improve badges style

packages/app/src/pages/account/index.jsx

@@ -3,7 +3,7 @@ import * as antd from "antd"
 import classnames from "classnames"
 import Loadable from "react-loadable"
 
-import { Icons } from "components/Icons"
+import { Icons, createIconRender } from "components/Icons"
 import { Image, Skeleton, FollowButton } from "components"
 import { Session, User } from "models"
 
@@ -65,9 +65,11 @@ const UserBadges = React.memo((props) => {
 			}
 
 			return () => badgesData.map((badge, index) => {
-				return <antd.Tag color={badge.color ?? "default"} key={index} id={badge.name} className="badge">
+				return <antd.Tooltip placement="bottom" title={badge.description ?? "An badge"}>
+					<antd.Tag color={badge.color ?? "default"} key={index} id={badge.name} icon={createIconRender(badge.icon)} className="badge">
 						<span>{badge.label}</span>
 					</antd.Tag>
+				</antd.Tooltip>
 			})
 		},
 		loading: antd.Skeleton,

packages/app/src/pages/account/index.less

@@ -145,8 +145,6 @@
 		position: relative;
 		z-index: 140;
 
-		height: 5vh;
-
 		display: flex;
 		flex-direction: row;
 

packages/app/src/theme/fixments.less

@@ -264,3 +264,100 @@
         color: var(--ant-success-color) !important;
     }
 }
+
+// FIX TAGS COLORS
+.ant-tag-red {
+
+    svg,
+    span {
+        color: #cf1322 !important;
+    }
+}
+
+.ant-tag-volcano {
+
+    svg,
+    span {
+        color: #d4380d !important;
+    }
+}
+
+.ant-tag-orange {
+
+    svg,
+    span {
+        color: #d46b08 !important;
+    }
+}
+
+.ant-tag-gold {
+
+    svg,
+    span {
+        color: #d48806 !important;
+    }
+}
+
+.ant-tag-yellow {
+
+    svg,
+    span {
+        color: #d4b106 !important;
+    }
+}
+
+.ant-tag-lime {
+
+    svg,
+    span {
+        color: #7cb305 !important;
+    }
+}
+
+.ant-tag-green {
+
+    svg,
+    span {
+        color: #389e0d !important;
+    }
+}
+
+.ant-tag-cyan {
+
+    svg,
+    span {
+        color: #08979c !important;
+    }
+}
+
+.ant-tag-blue {
+
+    svg,
+    span {
+        color: #096dd9 !important;
+    }
+}
+
+.ant-tag-geekblue {
+
+    svg,
+    span {
+        color: #1d39c4 !important;
+    }
+}
+
+.ant-tag-purple {
+
+    svg,
+    span {
+        color: #531dab !important;
+    }
+}
+
+.ant-tag-magenta {
+
+    svg,
+    span {
+        color: #c41d7f !important;
+    }
+}