From 75d07ffe0fc13adbb5f8b75017b77f08f1a68052 Mon Sep 17 00:00:00 2001
From: Paul Makles <me@insrt.uk>
Date: Sun, 11 Jun 2023 13:02:38 +0100
Subject: [PATCH] chore: move badges to top half of user profile

---
 src/components/common/user/UserBadges.tsx     |  7 ++---
 .../modals/components/legacy/UserProfile.tsx  | 31 ++++++++++---------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/common/user/UserBadges.tsx b/src/components/common/user/UserBadges.tsx
index b14d8c6a..d2a6f3ff 100644
--- a/src/components/common/user/UserBadges.tsx
+++ b/src/components/common/user/UserBadges.tsx
@@ -22,12 +22,11 @@ enum Badges {
 const BadgesBase = styled.div`
     gap: 8px;
     display: flex;
-    margin-top: 4px;
     flex-direction: row;
 
     img {
-        width: 32px;
-        height: 32px;
+        width: 24px;
+        height: 24px;
     }
 `;
 
@@ -103,7 +102,7 @@ export default function UserBadges({ badges, uid }: Props) {
                         content={
                             <Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
                         }>
-                        <Shield size={32} color="gray" />
+                        <Shield size={24} color="gray" />
                     </Tooltip>
                 ) : (
                     <></>
diff --git a/src/controllers/modals/components/legacy/UserProfile.tsx b/src/controllers/modals/components/legacy/UserProfile.tsx
index 299eb68b..c1c9dddf 100644
--- a/src/controllers/modals/components/legacy/UserProfile.tsx
+++ b/src/controllers/modals/components/legacy/UserProfile.tsx
@@ -236,6 +236,21 @@ export const UserProfile = observer(
                             </IconButton>
                         )}
                     </div>
+                    {badges > 0 && (
+                        <div
+                            style={{
+                                marginInline: "1em",
+                                padding: "0.5em",
+                                background: "var(--primary-background)",
+                                borderRadius: "8px",
+                                width: "fit-content",
+                                backgroundColor:
+                                    "rgba(var(--primary-header-rgb), max(var(--min-opacity), 0.65))",
+                                backdropFilter: "blur(20px)",
+                            }}>
+                            <UserBadges badges={badges} uid={user._id} />
+                        </div>
+                    )}
                     <div className={styles.tabs}>
                         <div
                             data-active={tab === "profile"}
@@ -267,10 +282,7 @@ export const UserProfile = observer(
                 </div>
                 <div className={styles.content}>
                     {tab === "profile" &&
-                        (profile?.content ||
-                        badges > 0 ||
-                        flags > 0 ||
-                        user.bot ? (
+                        (profile?.content || flags > 0 || user.bot ? (
                             <div>
                                 {flags & 1 ? (
                                     /** ! FIXME: i18n this area */
@@ -320,17 +332,6 @@ export const UserProfile = observer(
                                         </div>
                                     </>
                                 ) : undefined}
-                                {badges > 0 && (
-                                    <div className={styles.category}>
-                                        <Text id="app.special.popovers.user_profile.sub.badges" />
-                                    </div>
-                                )}
-                                {badges > 0 && (
-                                    <UserBadges
-                                        badges={badges}
-                                        uid={user._id}
-                                    />
-                                )}
                                 {profile?.content && (
                                     <>
                                         <div className={styles.category}>