Rebrand Unstake banner (#507)

* Rebrand unstake banner * Move two line design to lower breakpoint
api3dao · Dec 3, 2024 · 3017fe3 · 3017fe3
1 parent 75a362e
commit 3017fe3
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 43 deletions.
diff --git a/public/api-icon.svg b/public/api-icon.svg
diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss
@@ -5,6 +5,7 @@
 @import './variants/secondary-neutral.module.scss';
 @import './variants/tertiary-color.module.scss';
 @import './variants/link-blue.module.scss';
+@import './variants/link-gray.module.scss';
 @import './variants/menu-link-secondary.module.scss';
 @import './variants/text-blue.module.scss';
 
@@ -43,6 +44,10 @@
     @include link-blue;
   }
 
+  &.link-gray {
+    @include link-gray;
+  }
+
   &.menu-link-secondary {
     @include menu-link-secondary;
   }

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -19,7 +19,8 @@ export interface Props extends BreakpointsProps {
     | 'text'
     | 'text-blue'
     | 'menu-link-secondary'
-    | 'link-blue';
+    | 'link-blue'
+    | 'link-gray';
   size?: Size;
   disabled?: boolean;
   href?: string;

diff --git a/src/components/button/variants/link-gray.module.scss b/src/components/button/variants/link-gray.module.scss
@@ -0,0 +1,36 @@
+@import '../../../styles/fonts.module.scss';
+
+@mixin link-gray {
+  color: $color-gray-700;
+  height: 20px;
+  border: none;
+
+  &.xs {
+    @include font-overline-2;
+  }
+
+  &.sm {
+    @include font-link-3;
+  }
+
+  &.md {
+    @include font-link-2;
+  }
+
+  &.lg {
+    height: 24px;
+    @include font-link-1;
+  }
+
+  &:hover {
+    color: $color-green-800;
+  }
+
+  &:active {
+    color: $color-green-700;
+  }
+
+  &:disabled {
+    color: $color-gray-400;
+  }
+}
diff --git a/src/components/icons/check-circle-fill.tsx b/src/components/icons/check-circle-fill.tsx
@@ -1,10 +1,6 @@
 import { ComponentProps } from 'react';
 
-interface Props extends ComponentProps<'svg'> {
-  theme?: 'dark' | 'light';
-}
-
-export const CheckCircleFillIcon = ({ theme = 'light', ...props }: Props) => {
+export const CheckCircleFillIcon = ({ ...props }: ComponentProps<'svg'>) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" {...props}>
       <mask id="path-1-inside-1_10049_29682" fill="white">
@@ -18,11 +14,11 @@ export const CheckCircleFillIcon = ({ theme = 'light', ...props }: Props) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.00033 17.3327C13.6027 17.3327 17.3337 13.6017 17.3337 8.99935C17.3337 4.39698 13.6027 0.666016 9.00033 0.666016C4.39795 0.666016 0.666992 4.39698 0.666992 8.99935C0.666992 13.6017 4.39795 17.3327 9.00033 17.3327ZM13.8415 6.82514C14.2077 6.45903 14.2077 5.86544 13.8415 5.49932C13.4754 5.1332 12.8818 5.1332 12.5157 5.49932L7.50675 10.5083L5.91303 8.91457C5.54692 8.54845 4.95333 8.54845 4.58721 8.91457C4.22109 9.28068 4.22109 9.87427 4.58721 10.2404L6.84384 12.497C7.20995 12.8631 7.80355 12.8631 8.16966 12.497L13.8415 6.82514Z"
-        fill={theme === 'light' ? '#4049A8' : '#FAFAFA'}
+        fill="currentColor"
       />
       <path
         d="M13.8415 6.82514L13.2523 6.23589L13.8415 6.82514ZM7.50675 10.5083L6.91749 11.0975L7.50675 11.6868L8.09601 11.0975L7.50675 10.5083ZM5.91303 8.91457L6.50229 8.32531L6.50229 8.32531L5.91303 8.91457ZM4.58721 8.91457L3.99795 8.32531L3.99795 8.32531L4.58721 8.91457ZM4.58721 10.2404L3.99795 10.8296L4.58721 10.2404ZM6.84384 12.497L7.43309 11.9078L6.84384 12.497ZM8.16966 12.497L8.75892 13.0863L8.16966 12.497ZM16.5003 8.99935C16.5003 13.1415 13.1425 16.4993 9.00033 16.4993V18.166C14.0629 18.166 18.167 14.062 18.167 8.99935H16.5003ZM9.00033 1.49935C13.1425 1.49935 16.5003 4.85721 16.5003 8.99935H18.167C18.167 3.93674 14.0629 -0.167318 9.00033 -0.167318V1.49935ZM1.50033 8.99935C1.50033 4.85721 4.85819 1.49935 9.00033 1.49935V-0.167318C3.93772 -0.167318 -0.166341 3.93674 -0.166341 8.99935H1.50033ZM9.00033 16.4993C4.85819 16.4993 1.50033 13.1415 1.50033 8.99935H-0.166341C-0.166341 14.062 3.93772 18.166 9.00033 18.166V16.4993ZM13.2523 6.08857C13.293 6.12925 13.293 6.19521 13.2523 6.23589L14.4308 7.4144C15.1223 6.72285 15.1223 5.60162 14.4308 4.91006L13.2523 6.08857ZM13.105 6.08857C13.1456 6.04789 13.2116 6.04789 13.2523 6.08857L14.4308 4.91006C13.7392 4.21851 12.618 4.21851 11.9265 4.91006L13.105 6.08857ZM8.09601 11.0975L13.105 6.08857L11.9265 4.91006L6.91749 9.91903L8.09601 11.0975ZM5.32378 9.50382L6.91749 11.0975L8.09601 9.91903L6.50229 8.32531L5.32378 9.50382ZM5.17646 9.50382C5.21714 9.46314 5.2831 9.46314 5.32378 9.50382L6.50229 8.32531C5.81074 7.63376 4.68951 7.63376 3.99795 8.32531L5.17646 9.50382ZM5.17647 9.65114C5.13579 9.61046 5.13579 9.5445 5.17647 9.50382L3.99795 8.32531C3.3064 9.01686 3.3064 10.1381 3.99795 10.8296L5.17647 9.65114ZM7.43309 11.9078L5.17647 9.65114L3.99795 10.8296L6.25458 13.0863L7.43309 11.9078ZM7.58041 11.9078C7.53973 11.9484 7.47377 11.9484 7.43309 11.9078L6.25458 13.0863C6.94614 13.7778 8.06737 13.7778 8.75892 13.0863L7.58041 11.9078ZM13.2523 6.23589L7.58041 11.9078L8.75892 13.0863L14.4308 7.4144L13.2523 6.23589Z"
-        fill={theme === 'light' ? '#4049A8' : '#FAFAFA'}
+        fill="currentColor"
         mask="url(#path-1-inside-1_10049_29682)"
       />
     </svg>

diff --git a/src/pages/dashboard/unstake-banner/unstake-banner.module.scss b/src/pages/dashboard/unstake-banner/unstake-banner.module.scss
@@ -1,44 +1,52 @@
 @import '../../../styles/variables.module.scss';
+@import '../../../styles/fonts.module.scss';
 
 .unstakeBanner {
   width: 100%;
   display: flex;
+  flex-direction: column;
+  gap: 16px;
   align-items: center;
   justify-content: space-between;
-  padding: $space-lg 0;
-  border-top: 1px solid rgba(124, 227, 203, 0.4);
-  border-bottom: 1px solid rgba(124, 227, 203, 0.4);
-  margin-bottom: 2 * $space-xl;
-
-  @media (max-width: $max-md) {
-    flex-direction: column;
-
-    & > *:not(:last-child) {
-      margin-bottom: $space-lg;
-    }
+  background: linear-gradient(180deg, #fafafa 0%, #f0f4ff 100%);
+  border-top: 1px solid $color-dark-blue-10;
+  border-bottom: 1px solid $color-dark-blue-10;
+  margin: 32px 0;
+  padding: 24px 16px;
+
+  @media (min-width: $sm) {
+    margin: 40px 0 72px 0;
+    padding: 24px;
+    flex-direction: row;
   }
 }
 
 .unstakeBannerWrap {
   display: flex;
   align-items: center;
-  margin-right: $space-lg;
 
-  @media (max-width: $max-sm) {
-    margin-right: 0;
-    margin-bottom: $space-md;
+  gap: 16px;
+  @include font-body-10;
+
+  & > svg {
+    color: $color-action-success-600;
+    width: 28px;
+    height: 28px;
   }
 
-  & > img {
-    margin-right: $space-lg;
+  @media (min-width: $md) {
+    @include font-body-4;
+    gap: 24px;
+
+    & > svg {
+      width: 36px;
+      height: 36px;
+    }
   }
 }
 
 .buttonPanel {
   display: flex;
   align-items: center;
-
-  & > *:not(:last-child) {
-    margin-right: $space-xxl;
-  }
+  gap: 32px;
 }
diff --git a/src/pages/dashboard/unstake-banner/unstake-banner.tsx b/src/pages/dashboard/unstake-banner/unstake-banner.tsx
@@ -1,10 +1,9 @@
 import { useApi3Pool } from '../../../contracts';
 import { useChainData } from '../../../chain-data';
-import { images } from '../../../utils';
 import Button from '../../../components/button';
-import globalStyles from '../../../styles/global-styles.module.scss';
 import styles from './unstake-banner.module.scss';
 import { handleTransactionError } from '../../../utils';
+import { CheckCircleFillIcon } from '../../../components/icons';
 
 interface Props {
   canUnstakeAndWithdraw: boolean;
@@ -36,16 +35,20 @@ const UnstakeBanner = (props: Props) => {
   return (
     <div className={styles.unstakeBanner}>
       <div className={styles.unstakeBannerWrap}>
-        <img src={images.apiIcon} alt="API icon" />
-        <div>
-          <p className={globalStyles.bold}>Your tokens are ready to be unstaked.</p>
-        </div>
+        <CheckCircleFillIcon />
+        <div>Your tokens are ready to be unstaked.</div>
       </div>
       <div className={styles.buttonPanel}>
-        <Button type="link" onClick={handleUnstake}>
+        <Button type="link-gray" size="sm" md={{ size: 'md' }} onClick={handleUnstake}>
           Unstake
         </Button>
-        <Button onClick={handleUnstakeAndWithdraw} disabled={!canUnstakeAndWithdraw}>
+        <Button
+          type="link-blue"
+          size="sm"
+          md={{ size: 'md' }}
+          onClick={handleUnstakeAndWithdraw}
+          disabled={!canUnstakeAndWithdraw}
+        >
           Unstake and Withdraw
         </Button>
       </div>

diff --git a/src/utils/image-list.ts b/src/utils/image-list.ts
@@ -2,7 +2,6 @@
 export const images = {
   api3DaoLogoDarkTheme: '/api3-dao-logo-dark-theme.svg',
   api3DaoLogoLightTheme: '/api3-dao-logo-light-theme.svg',
-  apiIcon: '/api-icon.svg',
   arrowDropdown: '/arrow-dropdown.svg',
   arrowLeft: '/arrow-left.svg',
   arrowRight: '/arrow-right.svg',