improve badges display

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

@@ -24,19 +24,23 @@ export default React.memo((props) => {
                 return null
             }
 
-            return () => badgesData.map((badge, index) => {
+            return () => <div className="badges">
-                return <antd.Tooltip placement="bottom" title={badge.description ?? "An badge"}>
+                {
-                    <antd.Tag
+                    badgesData.map((badge, index) => {
-                        color={badge.color ?? "default"}
+                        return <antd.Tooltip placement="bottom" title={badge.description ?? "An badge"}>
-                        key={index}
+                            <antd.Tag
-                        id={badge.name}
+                                color={badge.color ?? "default"}
-                        icon={createIconRender(badge.icon)}
+                                key={index}
-                        className="badge"
+                                id={badge.name}
-                    >
+                                icon={createIconRender(badge.icon)}
-                        <span>{badge.label}</span>
+                                className="badge"
-                    </antd.Tag>
+                            >
-                </antd.Tooltip>
+                                <span>{badge.label}</span>
-            })
+                            </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,26 +122,28 @@ export default (props) => {
             </div>
         </div>
 
-        <div className="inline_field">
+        <DroppableField
-            <div className="field_header">
+            header={<>
-                <div className="field_icon">
+                <div className="field_header">
-                    <Icons.Award />
+                    <div className="field_icon">
+                        <Icons.Award />
+                    </div>
+
+                    <span>
+                        Badges collected
+                    </span>
                 </div>
 
-                <span>
+                <div className="field_value">
-                    Badges collected
+                    <p>
-                </span>
+                        {props.state.user?.badges.length}
-            </div>
+                    </p>
-
+                </div>
-            <div className="field_value">
+            </>}
-                <p>
+        >
-                    {props.state.user?.badges.length}
+            <React.Suspense fallback={<Skeleton />}>
-                </p>
+                <UserBadges user_id={props.state.user?._id} />
-            </div>
+            </React.Suspense>
-        </div>
+        </DroppableField>
-
-        <React.Suspense fallback={<Skeleton />}>
-            <UserBadges user_id={props.state.user?._id} />
-        </React.Suspense>
     </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;
         }
     }
 }