improve badges display

packages/app/src/components/UserBadges/index.jsx

@@ -24,7 +24,9 @@ export default React.memo((props) => {
                 return null
             }
 
-            return () => badgesData.map((badge, index) => {
+            return () => <div className="badges">
+                {
+                    badgesData.map((badge, index) => {
                         return <antd.Tooltip placement="bottom" title={badge.description ?? "An badge"}>
                             <antd.Tag
                                 color={badge.color ?? "default"}
@@ -37,6 +39,8 @@ export default React.memo((props) => {
                             </antd.Tag>
                         </antd.Tooltip>
                     })
+                }
+            </div>
         },
         loading: antd.Skeleton,
     }))

packages/app/src/components/UserBadges/index.less

@@ -1,8 +1,32 @@
+#root {
+    &.mobile {
+        .badges {
+            .ant-tag {
+                padding: 10px;
+                font-size: 0.9rem;
+                width: 100%;
+
+                svg {
+                    font-size: 1.2rem;
+                }
+            }
+        }
+    }
+}
+
 .badges {
     display: flex;
     flex-direction: column;
 
-    padding: 10px;
-
     gap: 7px;
+
+    .ant-tag {
+        display: inline-flex;
+
+        flex-direction: row;
+
+        align-items: center;
+
+        margin: 0 !important;
+    }
 }

packages/app/src/pages/account/tabs/details.jsx

@@ -1,12 +1,14 @@
 import React from "react"
+import classnames from "classnames"
+
 import { DateTime } from "luxon"
 import { Skeleton } from "antd"
 import { UserBadges } from "components"
 
-import "./details.less"
-
 import { Icons } from "components/Icons"
 
+import "./details.less"
+
 function getJoinLabel(jsDate) {
     const date = DateTime.fromJSDate(new Date(jsDate))
 
@@ -16,6 +18,38 @@ function getJoinLabel(jsDate) {
     return `${month} ${year}`
 }
 
+const DroppableField = (props) => {
+    const [collapsed, setCollapsed] = React.useState(true)
+
+    return <div
+        className={classnames(
+            "droppableField",
+            {
+                ["collapsed"]: collapsed
+            }
+        )}
+    >
+        <div className="collapse_btn" onClick={() => setCollapsed(!collapsed)}>
+            {
+                collapsed
+                    ? <Icons.ChevronDown />
+                    : <Icons.ChevronUp />
+            }
+        </div>
+        <div className="inline_field">
+            {
+                props.header
+            }
+        </div>
+
+        <div className="field_body">
+            {
+                props.children
+            }
+        </div>
+    </div>
+}
+
 export default (props) => {
     return <div id="details" className="details">
         {
@@ -88,7 +122,8 @@ export default (props) => {
             </div>
         </div>
 
-        <div className="inline_field">
+        <DroppableField
+            header={<>
                 <div className="field_header">
                     <div className="field_icon">
                         <Icons.Award />
@@ -104,10 +139,11 @@ export default (props) => {
                         {props.state.user?.badges.length}
                     </p>
                 </div>
-        </div>
+            </>}
-
+        >
             <React.Suspense fallback={<Skeleton />}>
                 <UserBadges user_id={props.state.user?._id} />
             </React.Suspense>
+        </DroppableField>
     </div>
 }

packages/app/src/pages/account/tabs/details.less

@@ -66,6 +66,7 @@
                 font-size: 1rem;
 
                 svg {
+                    color: var(--text-color);
                     margin: 0;
                 }
             }
@@ -73,6 +74,58 @@
 
         .field_value {
             font-family: "DM Mono", monospace;
+            user-select: text;
+        }
+    }
+}
+
+.droppableField {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    justify-content: center;
+
+    background-color: var(--background-color-primary);
+
+    border-radius: 12px;
+
+    transition: all 150ms ease-in-out;
+
+    &.collapsed {
+        .field_body {
+            height: 0;
+            opacity: 0;
+            padding: 0;
+
+            pointer-events: none;
+        }
+    }
+
+    .inline_field {
+        margin-left: 20px;
+    }
+
+    .field_body {
+        display: flex;
+        flex-direction: column;
+
+        padding: 10px;
+        transition: all 150ms ease-in-out;
+    }
+
+    .collapse_btn {
+        position: absolute;
+
+        top: 0;
+        left: 0;
+
+        transform: translate(100%, 90%);
+
+        svg {
+            color: var(--text-color);
+            margin: 0 !important;
         }
     }
 }