From e066ea3503e1aaa12f66976bc496260f9eca22ef Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 17 Feb 2025 21:14:32 -0300
Subject: [PATCH] feat: css

---
 src/renderer/src/pages/profile/profile-hero/profile-hero.scss | 2 +-
 src/renderer/src/pages/profile/profile-hero/user-badges.tsx   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index 284d1abf..fd21cf1d 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -82,7 +82,7 @@
     text-shadow: 0 0 5px rgb(0 0 0 / 40%);
   }
 
-  &__display-name-badges {
+  &__display-name-badges-container {
     display: flex;
     gap: globals.$spacing-unit;
     align-items: center;
diff --git a/src/renderer/src/pages/profile/profile-hero/user-badges.tsx b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx
index 4ca180a0..ed5d0571 100644
--- a/src/renderer/src/pages/profile/profile-hero/user-badges.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx
@@ -20,13 +20,14 @@ export function UserBadges() {
   };
 
   return (
-    <div className="profile-hero__display-name-badges">
+    <div className="profile-hero__display-name-badges-container">
       {userProfile.badges.map((badge) => {
         const badgeIcon = getBadgeIcon(badge);
 
         if (!badgeIcon) return null;
         return (
           <div
+            className={`badge__${badge.toLowerCase()}`}
             key={badge}
             title={t(`badge_description_${badge.toLowerCase()}`)}
           >