Modify notification badge (#1519)

voyagegroup · Nov 27, 2023 · 18019b9 · 18019b9
1 parent 7a23650
commit 18019b9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/.changeset/moody-mayflies-clean.md b/.changeset/moody-mayflies-clean.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+modify-notification-badge-styles
diff --git a/src/components/NavigationRail/__tests__/__snapshots__/NavigationRail.test.tsx.snap b/src/components/NavigationRail/__tests__/__snapshots__/NavigationRail.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`NavigationRail component testing NavigationRail 1`] = `
                 </svg>
               </span>
               <span
-                class="sc-breuTD ikPEph"
+                class="sc-breuTD cPWRYw"
               >
                 0
               </span>
@@ -129,7 +129,7 @@ exports[`NavigationRail component testing NavigationRail 1`] = `
               </svg>
             </span>
             <span
-              class="sc-breuTD ikPEph"
+              class="sc-breuTD cPWRYw"
             >
               0
             </span>

diff --git a/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap b/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`NotificationBadge component testing NotificationBadge dot 1`] = `
   >
     text
     <span
-      class="sc-gsnTZi dkYiBH"
+      class="sc-gsnTZi ljNXNg"
     />
   </div>
 </DocumentFragment>
@@ -20,7 +20,7 @@ exports[`NotificationBadge component testing NotificationBadge normal 1`] = `
   >
     text
     <span
-      class="sc-gsnTZi bodcSJ"
+      class="sc-gsnTZi hIELPk"
     >
       1
     </span>

diff --git a/src/components/NotificationBadge/styled.ts b/src/components/NotificationBadge/styled.ts
@@ -45,16 +45,16 @@ export const Badge = styled.span<BadgeProps>`
   align-items: center;
   align-content: center;
   justify-content: center;
-  height: ${({ variant, size }) =>
-    variant === "normal" ? "20px" : dotSizeMapping[size]};
+  min-height: ${({ variant, size }) =>
+    variant === "normal" ? "24px" : dotSizeMapping[size]};
   min-width: ${({ variant, size }) =>
-    variant === "normal" ? "20px" : dotSizeMapping[size]};
+    variant === "normal" ? "24px" : dotSizeMapping[size]};
   line-height: 1;
-  padding: 0 ${({ variant }) => (variant === "normal" ? "6px" : 0)};
+  padding: 0 ${({ variant }) => (variant === "normal" ? "4px" : 0)};
   border-radius: 10rem;
   color: ${({ theme }) => theme.palette.text.white};
   background-color: ${({ theme }) => theme.palette.danger.main};
-  font-size: 10.5px;
+  font-size: 13px;
   font-weight: bold;
   transition: transform 0.3s;
 `;