Rebrand modals (#495)

* Remove unnecessary button wrapper * Update Modal component * Add button tertiary variant * Add button text-blue variant * Adapt Input component * Update Deposit modal * Update Withdraw/Stake/Unstake modals * Update Unstake Confirm modal * Update Unsupported Network modal * Self review * Show primary buttons first on mobile * Adapt to Button component without wrapper
api3dao · Feb 20, 2025 · 2cbe5ff · 2cbe5ff
1 parent 33d8d05
commit 2cbe5ff
Show file tree

Hide file tree

Showing 27 changed files with 737 additions and 235 deletions.
diff --git a/cypress/e2e/keyboard-navigation.cy.ts b/cypress/e2e/keyboard-navigation.cy.ts
@@ -44,11 +44,11 @@ describe('keyboard navigation and accessibility', () => {
 
       pressTabAndAssertFocusOutline(() => cy.findByText('Max'));
       pressTabAndAssertFocusOutline(() => cy.findByText('Approve'));
-      pressTabAndAssertFocusOutline(() => cy.get('#modal').find('img')); // Close icon
+      pressTabAndAssertFocusOutline(() => cy.get('#modal').findByTestId('modal-close-button'));
 
       // Focus is returned to the modal input (and it's text is selected)
       cy.tab().get('#modal').find('input').should('have.focus');
-      cy.get('#modal').find('img').click(); // Close the modal
+      cy.get('#modal').findByTestId('modal-close-button').click();
     });
 
     it('can use keyboard to "press" the buttons', () => {

diff --git a/cypress/e2e/staking.cy.ts b/cypress/e2e/staking.cy.ts
@@ -48,7 +48,7 @@ describe('staking', () => {
     cy.findByText('Initiate Unstake').click();
     cy.get('#modal').find('input').type('20');
     cy.findByText('Initiate Unstaking').click();
-    cy.findByText('Initiate Unstaking').click(); // confirm the unstake in the second modal
+    cy.findByText('Yes, Initiate Unstaking').click(); // confirm the unstake in the second modal
     cy.findByText('Pending API3 tokens unstaking').should('exist');
     // Assert balances
     cy.dataCy('balance').should('have.text', '480.0');
@@ -96,8 +96,8 @@ it.skip('user can unstake & withdraw', () => {
   // Schedule unstake
   cy.findByText('Initiate Unstake').click();
   cy.get('#modal').find('input').type('550');
-  cy.findByText('Initiate Unstaking').click();
-  cy.findByText('Initiate Unstaking').click(); // confirm the unstake in the second modal
+  cy.findByText('Yes, Initiate Unstaking').click();
+  cy.findByText('Yes, Initiate Unstaking').click(); // confirm the unstake in the second modal
   cy.findByText('Pending API3 tokens unstaking').should('exist');
   // Assert balances
   cy.dataCy('balance').should('have.text', '450.0');

diff --git a/public/exclamation-triangle-fill.svg b/public/exclamation-triangle-fill.svg
diff --git a/public/unsupported-network.svg b/public/unsupported-network.svg
diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss
@@ -3,26 +3,25 @@
 @import './variants/primary.module.scss';
 @import './variants/secondary.module.scss';
 @import './variants/secondary-neutral.module.scss';
+@import './variants/tertiary-color.module.scss';
 @import './variants/link-blue.module.scss';
 @import './variants/menu-link-secondary.module.scss';
-
-.buttonWrapper {
-  display: inline-block;
-  &.disabled {
-    pointer-events: none;
-  }
-}
+@import './variants/text-blue.module.scss';
 
 .button {
   background-color: transparent;
   text-decoration: none;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border-width: 1px;
   border-style: solid;
-  outline: none;
   cursor: pointer;
+  height: fit-content;
+
+  &.disabled {
+    pointer-events: none;
+  }
 
   &.primary {
     @include button-primary;
@@ -36,6 +35,10 @@
     @include button-secondary-neutral;
   }
 
+  &.tertiary-color {
+    @include button-tertiary-color;
+  }
+
   &.link-blue {
     @include link-blue;
   }
@@ -44,6 +47,10 @@
     @include menu-link-secondary;
   }
 
+  &.text-blue {
+    @include text-blue;
+  }
+
   &.normal {
     font-size: $text-small;
     line-height: $lh-small;

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -10,7 +10,16 @@ type BreakpointsProps = { [key in BreakpointKeys]?: { size?: Size } };
 export interface Props extends BreakpointsProps {
   children: ReactNode;
   className?: string;
-  type?: 'primary' | 'secondary' | 'secondary-neutral' | 'link' | 'text' | 'menu-link-secondary' | 'link-blue';
+  type?:
+    | 'primary'
+    | 'secondary'
+    | 'secondary-neutral'
+    | 'tertiary-color'
+    | 'link'
+    | 'text'
+    | 'text-blue'
+    | 'menu-link-secondary'
+    | 'link-blue';
   size?: Size;
   disabled?: boolean;
   href?: string;
@@ -37,28 +46,38 @@ const Button = ({
   const { width } = useWindowDimensions();
   const sizeClass = getSizeClass(width, size, { xs, sm, md, lg });
 
-  return (
-    <div className={classNames(styles.buttonWrapper, { [styles.disabled]: disabled }, className)}>
-      {href ? (
-        <a
-          href={href}
-          className={classNames(styles.button, styles[type], styles[theme], styles[sizeClass])}
-          {...(isExternal(href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-          {...rest}
-        >
-          {children}
-        </a>
-      ) : (
-        <button
-          className={classNames(styles.button, styles[type], styles[theme], styles[sizeClass])}
-          onClick={onClick}
-          disabled={disabled}
-          {...rest}
-        >
-          {children}
-        </button>
+  return href ? (
+    <a
+      href={href}
+      className={classNames(
+        styles.button,
+        styles[type],
+        styles[theme],
+        styles[sizeClass],
+        { [styles.disabled]: disabled },
+        className
       )}
-    </div>
+      {...(isExternal(href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+      {...rest}
+    >
+      {children}
+    </a>
+  ) : (
+    <button
+      className={classNames(
+        styles.button,
+        styles[type],
+        styles[theme],
+        styles[sizeClass],
+        { [styles.disabled]: disabled },
+        className
+      )}
+      onClick={onClick}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
   );
 };
 

diff --git a/src/components/button/variants/tertiary-color.module.scss b/src/components/button/variants/tertiary-color.module.scss
@@ -0,0 +1,76 @@
+@mixin button-tertiary-color {
+  position: relative;
+  color: $color-blue-500;
+  border: 1px solid $color-blue-500;
+  background: $color-base-light;
+
+  &.xxs {
+    padding: 0 10px;
+    border-radius: 24px;
+    height: 24px;
+    @include font-tagline-10;
+  }
+
+  &.xs {
+    padding: 0 16px;
+    border-radius: 24px;
+    height: 32px;
+    @include font-tagline-10;
+  }
+
+  &.sm {
+    padding: 0 20px;
+    border-radius: 24px;
+    height: 40px;
+    @include font-tagline-10;
+  }
+
+  &.md {
+    padding: 0 24px;
+    border-radius: 28px;
+    height: 48px;
+    @include font-tagline-7;
+  }
+
+  &.lg {
+    padding: 0 32px;
+    border-radius: 32px;
+    height: 56px;
+    @include font-tagline-7;
+  }
+
+  &:hover {
+    color: $color-blue-200;
+    border: 1px solid $color-blue-200;
+  }
+
+  &:active {
+    color: $color-blue-600;
+    border: 1px solid $color-blue-600;
+  }
+
+  &:disabled {
+    color: $color-blue-25;
+    border: 1px solid $color-blue-25;
+  }
+
+  &.dark {
+    color: $color-blue-400;
+    border: $color-blue-400;
+
+    &:hover {
+      color: $color-blue-200;
+      border: $color-blue-200;
+    }
+
+    &:active {
+      color: $color-blue-500;
+      border: $color-blue-500;
+    }
+
+    &:disabled {
+      color: $color-blue-100;
+      border: $color-blue-100;
+    }
+  }
+}
diff --git a/src/components/button/variants/text-blue.module.scss b/src/components/button/variants/text-blue.module.scss
@@ -0,0 +1,63 @@
+@import '../../../styles/fonts.module.scss';
+
+@mixin text-blue {
+  color: $color-blue-500;
+  height: 20px;
+  border: none;
+
+  &.xs {
+    padding: 0 16px;
+    border-radius: 24px;
+    height: 32px;
+    @include font-body-14;
+  }
+
+  &.sm {
+    padding: 0 20px;
+    border-radius: 24px;
+    height: 40px;
+    @include font-button-3;
+  }
+
+  &.md {
+    padding: 0 24px;
+    border-radius: 28px;
+    height: 48px;
+    @include font-button-2;
+  }
+
+  &.lg {
+    padding: 0 32px;
+    border-radius: 32px;
+    height: 56px;
+    @include font-button-1;
+  }
+
+  &:hover {
+    color: $color-blue-200;
+  }
+
+  &:active {
+    color: $color-blue-600;
+  }
+
+  &:disabled {
+    color: $color-blue-50;
+  }
+
+  &.dark {
+    color: $color-blue-100;
+
+    &:hover {
+      color: $color-blue-200;
+    }
+
+    &:active {
+      color: $color-blue-500;
+    }
+
+    &:disabled {
+      color: $color-dark-blue-100;
+    }
+  }
+}
diff --git a/src/components/icons/close.tsx b/src/components/icons/close.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export const CloseIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M11.25 11.25L28.7501 28.7499"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.252 28.752L20.0013 20.0026L28.752 11.252"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/icons/help-outline.tsx b/src/components/icons/help-outline.tsx
@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export const HelpOutlineIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <circle cx="8.68211" cy="8.68211" r="7.85985" stroke="currentColor" strokeWidth="1.25" />
+      <path
+        d="M6.69531 7.00868C6.78529 5.91419 7.74806 5.09966 8.84572 5.18937C9.85005 5.27145 10.6703 6.03406 10.6703 7.07366C10.6703 8.25105 9.56253 8.59808 8.84572 9.47775C8.5199 9.8776 8.38957 10.1257 8.38957 10.9054M8.43277 12.6826H8.37027"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
@@ -0,0 +1,4 @@
+import { CloseIcon } from './close';
+import { HelpOutlineIcon } from './help-outline';
+
+export { CloseIcon, HelpOutlineIcon };