Self review

api3dao · Nov 21, 2024 · ed84d29 · ed84d29
1 parent a44fcaf
commit ed84d29
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 10 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/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -50,7 +50,6 @@ const Button = ({
     <a
       href={href}
       className={classNames(
-        'button',
         styles.button,
         styles[type],
         styles[theme],
@@ -66,7 +65,6 @@ const Button = ({
   ) : (
     <button
       className={classNames(
-        'button',
         styles.button,
         styles[type],
         styles[theme],

diff --git a/src/components/button/variants/tertiary-color.module.scss b/src/components/button/variants/tertiary-color.module.scss
@@ -53,4 +53,24 @@
     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/modal/modal.tsx b/src/components/modal/modal.tsx
@@ -45,7 +45,7 @@ export const ModalContent = (props: ModalProps) => {
         >
           {!hideCloseButton && (
             <div className={styles.closeButtonWrapper}>
-              <button onClick={onClose} onKeyDown={triggerOnEnter(onClose)}>
+              <button onClick={onClose} onKeyDown={triggerOnEnter(onClose)} data-testid="modal-close-button">
                 <CloseIcon />
                 <span className="sr-only">Close modal</span>
               </button>

diff --git a/src/pages/dashboard/forms/token-amount-form.tsx b/src/pages/dashboard/forms/token-amount-form.tsx
@@ -63,7 +63,7 @@ const TokenAmountForm = (props: Props) => {
         {maxValue && (
           <div className={styles.tokenFormBalance}>
             Your balance:{' '}
-            <button className={styles.valueButton} onClick={handleSetMax}>
+            <button className={styles.valueButton} onClick={handleSetMax} tabIndex={-1}>
               {/* We don't round because we want to show all decimal digits for the maxValue field */}
               {formatApi3(maxValue)}
             </button>

diff --git a/src/pages/dashboard/forms/token-deposit-form.tsx b/src/pages/dashboard/forms/token-deposit-form.tsx
@@ -102,7 +102,7 @@ const TokenDepositForm = (props: Props) => {
 
         <div className={styles.tokenFormBalance}>
           Your balance:{' '}
-          <button className={styles.valueButton} onClick={handleSetMax}>
+          <button className={styles.valueButton} onClick={handleSetMax} tabIndex={-1}>
             {walletBalance ? formatApi3(walletBalance) : UNKNOWN_NUMBER}
           </button>
         </div>