feat: Fix alarm icon on header

gnoswap-labs · Aug 4, 2023 · d0520e9 · d0520e9
1 parent 4469319
commit d0520e9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/packages/web/src/components/common/icons/IconAlert.tsx b/packages/web/src/components/common/icons/IconAlert.tsx
@@ -1,15 +1,15 @@
 const IconAlert = ({ className }: { className?: string }) => (
   <svg
-    width="18"
-    height="22"
-    viewBox="0 0 18 22"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    width="28"
+    height="29"
+    viewBox="0 0 28 29"
+    fill="none"
     className={className}
   >
     <path
-      d="M7.01 20.01C7.01 21.11 7.9 22 9 22C10.1 22 10.99 21.11 10.99 20.01H7.01ZM9 5C11.76 5 14 7.24 14 10V17H4V10C4 7.24 6.24 5 9 5ZM9 0.5C8.17 0.5 7.5 1.17 7.5 2V3.17C4.36 3.85 2 6.65 2 10V16L0 18V19H18V18L16 16V10C16 6.65 13.64 3.85 10.5 3.17V2C10.5 1.17 9.83 0.5 9 0.5Z"
-      fill="#E0E8F4"
+      d="M11.6783 25.0117C11.6783 26.295 12.7167 27.3333 14 27.3333C15.2833 27.3333 16.3217 26.295 16.3217 25.0117H11.6783ZM14 7.5C17.22 7.5 19.8333 10.1133 19.8333 13.3333V21.5H8.16667V13.3333C8.16667 10.1133 10.78 7.5 14 7.5ZM14 2.25C13.0317 2.25 12.25 3.03167 12.25 4V5.365C8.58667 6.15833 5.83333 9.425 5.83333 13.3333V20.3333L3.5 22.6667V23.8333H24.5V22.6667L22.1667 20.3333V13.3333C22.1667 9.425 19.4133 6.15833 15.75 5.365V4C15.75 3.03167 14.9683 2.25 14 2.25Z"
+      fill="#90A2C0"
     />
   </svg>
 );

diff --git a/packages/web/src/components/common/notification-button/NotificationButton.styles.ts b/packages/web/src/components/common/notification-button/NotificationButton.styles.ts
@@ -8,17 +8,20 @@ export const NotificationWrapper = styled.div`
 
 export const AlertButton = styled.button`
   ${mixins.flexbox("row", "center", "center")};
-  width: 36px;
-  height: 36px;
+  width: 28px;
+  height: 28px;
   border-radius: 4px;
   transition: all 0.3s ease;
+  ${media.tablet} {
+    width: 24px;
+    height: 24px;
+  }
   .notification-icon {
-    width: 36px;
-    height: 36px;
-    padding: 4px;
+    width: 21px;
+    height: 25px;
     ${media.tablet} {
-      width: 32px;
-      height: 32px;
+      width: 18px;
+      height: 21.5px;
     }
     * {
       fill: ${({ theme }) => theme.color.icon05};