From 4fcadcd24103fbc2edf240e3c295b76617993069 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Sun, 15 Sep 2024 03:34:23 +0000
Subject: [PATCH] improve badges style

---
 .../app/src/components/UserBadges/index.jsx    | 18 +++++++++++++++---
 .../app/src/components/UserBadges/index.less   | 10 ++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/components/UserBadges/index.jsx b/packages/app/src/components/UserBadges/index.jsx
index 593c853c..4eb8f4e2 100755
--- a/packages/app/src/components/UserBadges/index.jsx
+++ b/packages/app/src/components/UserBadges/index.jsx
@@ -1,5 +1,6 @@
 import React from "react"
 import * as antd from "antd"
+import classnames from "classnames"
 import DOMPurify from "dompurify"
 import axios from "axios"
 
@@ -47,7 +48,7 @@ const RemoteSVG = (props) => {
 export default (props) => {
     let { user_id } = props
 
-    const [L_Badges, R_Badges, E_Badges] = app.cores.api.useRequest(UserModel.getUserBadges, user_id)
+    const [L_Badges, R_Badges, E_Badges] = app.cores.api.useRequest(UserModel.getBadges, user_id)
 
     if (E_Badges) {
         return null
@@ -61,10 +62,21 @@ export default (props) => {
         return null
     }
 
-    return <div className="badges">
+    return <div
+        className={classnames(
+            "badges",
+            {
+                ["single"]: R_Badges.length === 1
+            }
+        )}
+    >
         {
             R_Badges.map((badge, index) => {
-                return <antd.Tooltip index={index} placement="bottom" title={badge.description ?? "An badge"}>
+                return <antd.Tooltip
+                    key={index}
+                    placement="bottom"
+                    title={badge.description ?? "A badge"}
+                >
                     <div
                         key={index}
                         className="badge"
diff --git a/packages/app/src/components/UserBadges/index.less b/packages/app/src/components/UserBadges/index.less
index 6a8c45dc..ef143f26 100755
--- a/packages/app/src/components/UserBadges/index.less
+++ b/packages/app/src/components/UserBadges/index.less
@@ -20,14 +20,20 @@ html {
 
     align-items: center;
 
-    height: fit-content;
+    min-height: 60px;
+    min-width: 60px;
 
     gap: 7px;
 
     background-color: var(--background-color-primary);
     border-radius: 12px;
 
-    padding: 7px 15px;
+    padding: 7px;
+    
+    &.single {
+        grid-template-columns: 1fr;
+        padding: 7px 15px;
+    }
 
     .badge {
         display: flex;