fixe-notif-css

src/components/ContentComponents/Navbar/Navbar.tsx

@@ -40,7 +40,7 @@ export const Navbar = ({ t }: NavbarProps) => {
               activeClassName="is-active"
             >
               {challengeNotification && (
-                <div className="nb-challenge-notif text-16-bold">1</div>
+                <div className="nb-challenge-notif">1</div>
               )}
               <Icon className="c-nav-icon off" icon={ChallengeIconOff} />
               <Icon className="c-nav-icon on" icon={ChallengeIconOn} />

src/styles/components/_nav.scss

@@ -78,20 +78,22 @@
 }
 
 .nb-challenge-notif {
-  @media #{$large-phone} {
-    left: 25px;
-    padding: 4px;
-    width: 0.75rem;
-    height: 0.75rem;
-    top: 0px;
-  }
   position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 42px;
+  bottom: 22px;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: $dark-light;
   border-radius: 50%;
+  border: 1px solid $dark-light;
   z-index: 1;
-  height: 1.2rem;
-  width: 1.2rem;
   background: $blue-radial-gradient;
-  left: 40px;
-  top: 7px;
-  text-align: center;
+  font-size: 12px;
+  @media #{$tablet} {
+    left: 25px;
+    bottom: unset;
+  }
 }