Rebrand staking page (#474)

* Misc additions * Update page header style * Update radial chart * Update Staking page * Move tooltips to own column * Style card title * Correct Connect Wallet info icon size * Correct Connect Wallet box button * Adjust card gap * Add secondary-neutral button variant * Add gradient border to unstaking card * Remove unnecesary global classes and fine-tune unstake panel * Refactor button variants * Adjust staking panel actions buttons * Fix Cy tests * Use data-testid instead of data-cy * Update pending staking card * Fix button unclickable bug
api3dao · Nov 20, 2024 · 90b9d7e · 90b9d7e
1 parent 0ed47aa
commit 90b9d7e
Show file tree

Hide file tree

Showing 30 changed files with 996 additions and 528 deletions.
diff --git a/cypress/e2e/delegation.cy.ts b/cypress/e2e/delegation.cy.ts
@@ -5,7 +5,7 @@ describe('delegation', () => {
     cy.resetBlockchain().login();
 
     // Approve, deposit and stake
-    cy.findByText('+ Deposit').click();
+    cy.findByTestId('staking-card-deposit-btn').click();
     cy.get('#modal').find('input').type('200');
     cy.findByText('Approve').click();
     cy.findByText('Deposit and Stake').click();

diff --git a/cypress/e2e/keyboard-navigation.cy.ts b/cypress/e2e/keyboard-navigation.cy.ts
@@ -23,6 +23,7 @@ describe('keyboard navigation and accessibility', () => {
     pressTabAndAssertFocusOutline(() => cy.findAllByText('Api3 Market').filter(':visible').closest('a'));
     pressTabAndAssertFocusOutline(() => cy.findAllByText('Docs').filter(':visible').closest('a'));
 
+    pressTabAndAssertFocusOutline(() => cy.findByTestId('connect-wallet-staking-btn'));
     pressTabAndAssertFocusOutline(() => cy.findByText('About API3'));
     pressTabAndAssertFocusOutline(() => cy.findByText('Error Reporting'));
     pressTabAndAssertFocusOutline(() => cy.findByText('Github'));
@@ -36,7 +37,7 @@ describe('keyboard navigation and accessibility', () => {
     });
 
     it('uses focus lock (cannot tab outside modal)', () => {
-      cy.findByText('+ Deposit').click();
+      cy.findByText('Deposit').click();
 
       cy.get('#modal').find('input').should('have.focus');
       cy.get('#modal').find('input').type('123');
@@ -52,12 +53,12 @@ describe('keyboard navigation and accessibility', () => {
 
     it('can use keyboard to "press" the buttons', () => {
       // Can close the modal by pressing ESC
-      cy.findByText('+ Deposit').click();
+      cy.findByText('Deposit').click();
       cy.get('body').type('{esc}');
       cy.get('#modal').find('input').should('not.exist');
 
       // Can deposit by pressing ENTER when button has focus
-      cy.findByText('+ Deposit').click();
+      cy.findByText('Deposit').click();
       cy.get('#modal').find('input').type('123').tab(); // Tab over "Max" button
       pressTabAndAssertFocusOutline(() => cy.findByText('Approve'));
 

diff --git a/cypress/e2e/staking.cy.ts b/cypress/e2e/staking.cy.ts
@@ -7,18 +7,19 @@ describe('staking', () => {
     cy.resetBlockchain().login();
 
     // Approve and deposit
-    cy.findByText('+ Deposit').click();
+    cy.findByTestId('staking-card-deposit-btn').click();
     cy.get('#modal').find('input').type('500');
     cy.findByText('Approve').click();
     cy.findByText('Deposit').should('be.visible');
+    cy.get('#modal').findByRole('button', { name: 'Deposit' }).should('be.visible');
     cy.percySnapshot('Staking: Deposit modal');
-    cy.findByText('Deposit').click();
+    cy.get('#modal').findByRole('button', { name: 'Deposit' }).click();
     cy.dataCy('balance').should('have.text', '500.0');
 
     // Stake
-    cy.findByText('+ Stake').click();
+    cy.findByTestId('staking-card-stake-btn').click();
     cy.get('#modal').find('input').type('100');
-    cy.findByText('Stake').click();
+    cy.get('#modal').findByRole('button', { name: 'Stake' }).click();
     cy.dataCy('unstaked').should('have.text', '400.0');
     cy.dataCy('withdrawable').should('have.text', '400.0');
     cy.dataCy('staked').should('have.text', '100.0');
@@ -31,7 +32,7 @@ describe('staking', () => {
   it('can deposit and stake', () => {
     cy.useChainSnapshot('user-staked');
 
-    cy.findByText('+ Deposit').click();
+    cy.findByTestId('staking-card-deposit-btn').click();
     cy.get('#modal').find('input').type('200');
     cy.findByText('Deposit and Stake').click();
 
@@ -86,7 +87,7 @@ it.skip('user can unstake & withdraw', () => {
   cy.resetBlockchain().login();
 
   // Approve and deposit
-  cy.findByText('+ Deposit').click();
+  cy.findByTestId('staking-card-deposit-btn').click();
   cy.get('#modal').find('input').type('1000');
   cy.findByText('Approve').click();
   cy.findByText('Deposit and Stake').click();

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -65,7 +65,7 @@ Cypress.Commands.add('login', () => {
   });
 
   // Login
-  cy.findByRole('button', { name: 'Connect Wallet' }).click();
+  cy.findAllByRole('button', { name: 'Connect Wallet' }).first().click();
 
   // Web3 Modal
   cy.get('w3m-modal')

diff --git a/public/help-outline.svg b/public/help-outline.svg
diff --git a/public/info-circle.svg b/public/info-circle.svg
diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss
@@ -1,6 +1,10 @@
 @import '../../styles/variables.module.scss';
 @import '../../styles/fonts.module.scss';
-@import '../../styles/link-styles.module.scss';
+@import './variants/primary.module.scss';
+@import './variants/secondary.module.scss';
+@import './variants/secondary-neutral.module.scss';
+@import './variants/link-blue.module.scss';
+@import './variants/menu-link-secondary.module.scss';
 
 .buttonWrapper {
   display: inline-block;
@@ -21,139 +25,15 @@
   cursor: pointer;
 
   &.primary {
-    background-color: $color-blue-500;
-    color: $color-base-light;
-    border: none;
-
-    &.xxs {
-      padding: 0 10px;
-      border-radius: 24px;
-      height: 24px;
-      @include font-body-17;
-    }
-
-    &.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 {
-      background-color: $color-blue-200;
-    }
-
-    &:active {
-      background-color: $color-blue-600;
-    }
-
-    &:disabled {
-      color: $color-blue-50;
-      background-color: $color-blue-10;
-    }
-
-    &.dark {
-      background-color: $color-blue-400;
-
-      &:hover {
-        background-color: $color-blue-200;
-      }
-
-      &:active {
-        background-color: $color-blue-500;
-      }
-
-      &:disabled {
-        color: $color-blue-400;
-        background-color: $color-dark-blue-400;
-      }
-    }
+    @include button-primary;
   }
 
   &.secondary {
-    position: relative;
-    color: $color-dark-blue-400;
-    border: 1px solid transparent;
-    @include gradient-border($gradient-soft-light);
-
-    &.xxs {
-      padding: 0 10px;
-      border-radius: 24px;
-      height: 24px;
-      @include font-body-17;
-    }
-
-    &.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,
-    &:active,
-    &:disabled {
-      &:before {
-        padding: 0px;
-      }
-    }
-
-    &:hover {
-      color: $color-blue-200;
-      border: 1px solid $color-blue-200;
-    }
-
-    &:active {
-      color: $color-blue-600;
-      border: 1px solid $color-blue-600;
-    }
+    @include button-secondary;
+  }
 
-    &:disabled {
-      color: $color-gray-400;
-      border: 1px solid $color-gray-400;
-    }
+  &.secondary-neutral {
+    @include button-secondary-neutral;
   }
 
   &.link-blue {

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -10,12 +10,13 @@ type BreakpointsProps = { [key in BreakpointKeys]?: { size?: Size } };
 export interface Props extends BreakpointsProps {
   children: ReactNode;
   className?: string;
-  type?: 'primary' | 'secondary' | 'link' | 'text' | 'menu-link-secondary' | 'link-blue';
+  type?: 'primary' | 'secondary' | 'secondary-neutral' | 'link' | 'text' | 'menu-link-secondary' | 'link-blue';
   size?: Size;
   disabled?: boolean;
   href?: string;
   theme?: 'light' | 'dark';
   onClick?: () => void;
+  'data-testid'?: string;
 }
 
 const Button = ({
@@ -31,6 +32,7 @@ const Button = ({
   sm,
   md,
   lg,
+  ...rest
 }: Props) => {
   const { width } = useWindowDimensions();
   const sizeClass = getSizeClass(width, size, { xs, sm, md, lg });
@@ -42,6 +44,7 @@ const Button = ({
           href={href}
           className={classNames(styles.button, styles[type], styles[theme], styles[sizeClass])}
           {...(isExternal(href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+          {...rest}
         >
           {children}
         </a>
@@ -50,6 +53,7 @@ const Button = ({
           className={classNames(styles.button, styles[type], styles[theme], styles[sizeClass])}
           onClick={onClick}
           disabled={disabled}
+          {...rest}
         >
           {children}
         </button>

diff --git a/src/styles/link-styles.module.scss → ...nts/button/variants/link-blue.module.scss b/src/styles/link-styles.module.scss → ...nts/button/variants/link-blue.module.scss
@@ -1,4 +1,4 @@
-@import './fonts.module.scss';
+@import '../../../styles/fonts.module.scss';
 
 @mixin link-blue {
   color: $color-blue-500;
@@ -50,40 +50,3 @@
     }
   }
 }
-
-@mixin menu-link-secondary {
-  position: relative;
-  border: none;
-  color: $color-dark-blue-400;
-  height: 20px;
-  padding: 0;
-
-  &.xs {
-    @include font-overline-2;
-  }
-
-  &.sm {
-    @include font-body-15;
-  }
-
-  &.md {
-    @include font-body-12;
-  }
-
-  &.lg {
-    height: 24px;
-    @include font-description-6;
-  }
-
-  &:hover {
-    color: $color-blue-400;
-  }
-
-  &:active {
-    color: $color-blue-300;
-  }
-
-  &:disabled {
-    color: $color-dark-blue-25;
-  }
-}
diff --git a/src/components/button/variants/menu-link-secondary.module.scss b/src/components/button/variants/menu-link-secondary.module.scss
@@ -0,0 +1,38 @@
+@import '../../../styles/fonts.module.scss';
+
+@mixin menu-link-secondary {
+  position: relative;
+  border: none;
+  color: $color-dark-blue-400;
+  height: 20px;
+  padding: 0;
+
+  &.xs {
+    @include font-overline-2;
+  }
+
+  &.sm {
+    @include font-body-15;
+  }
+
+  &.md {
+    @include font-body-12;
+  }
+
+  &.lg {
+    height: 24px;
+    @include font-description-6;
+  }
+
+  &:hover {
+    color: $color-blue-400;
+  }
+
+  &:active {
+    color: $color-blue-300;
+  }
+
+  &:disabled {
+    color: $color-dark-blue-25;
+  }
+}