feat: update badge with title styles (#1387)

decentraland · Nov 1, 2023 · 170f451 · 170f451
1 parent 8ffcf72
commit 170f451
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/src/components/User/Badges/Badge.tsx b/src/components/User/Badges/Badge.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 
-import { BadgeStatus, Badge as GovernanceBadge } from '../../../entities/Badges/types'
+import { Badge as GovernanceBadge } from '../../../entities/Badges/types'
 
 import './Badge.css'
 

diff --git a/src/components/User/Badges/BadgeCard.css b/src/components/User/Badges/BadgeCard.css
@@ -11,6 +11,7 @@
   flex-direction: column;
   align-items: center;
   cursor: pointer;
+  transition: box-shadow 0.1s ease, transform 0.1s ease;
 }
 
 @media (min-width: 768px) {
@@ -20,7 +21,8 @@
 }
 
 .BadgeCard:hover {
-  box-shadow: 0 0 8px var(--black-600);
+  box-shadow: var(--shadow-2);
+  transform: translateY(-4px);
 }
 
 .BadgeCard__Icon {

diff --git a/src/components/User/Badges/BadgeWithTitle.css b/src/components/User/Badges/BadgeWithTitle.css
@@ -6,24 +6,30 @@
   margin-left: -12px;
 }
 
+.BadgeWithTitle__BadgeContainer {
+  z-index: 1;
+  border-radius: 25px;
+  border: 1px solid var(--alpha-black-300);
+}
+
 .BadgeWithTitle:first-child {
   margin-left: 0;
 }
 
 .BadgeWithTitle__Title {
-  background: var(--black-300);
+  background: var(--black-200);
   display: flex;
   height: 24px;
-  opacity: 0.56;
   border-radius: 4px;
   padding: 3px 6px 3px 24px;
   position: relative;
   right: 20px;
   gap: 4px;
+  transition: box-shadow 0.1s ease;
 }
 
-.BadgeWithTitle__Title:hover {
-  box-shadow: 0 0 8px var(--black-600);
+.BadgeWithTitle:hover > .BadgeWithTitle__Title {
+  box-shadow: 0 0 8px var(--black-400);
 }
 
 .BadgeWithTitle__Title > span {

diff --git a/src/components/User/Badges/BadgeWithTitle.tsx b/src/components/User/Badges/BadgeWithTitle.tsx
@@ -11,7 +11,9 @@ interface Props {
 export default function BadgeWithTitle({ badge, onClick }: Props) {
   return (
     <div className="BadgeWithTitle" key={`${badge.name}-id`} onClick={onClick}>
-      <Badge badge={badge} variant={BadgeVariant.FilledMono} />
+      <div className="BadgeWithTitle__BadgeContainer">
+        <Badge badge={badge} variant={BadgeVariant.FilledMono} />
+      </div>
       <div className="BadgeWithTitle__Title">
         <span>{badge.name}</span>
       </div>