Move connect button to the navigation bar on small screens (#525)

* Move Connect button to navigation bar also on small screens * More explicit condition * Fix failing cypress test
api3dao · Feb 20, 2025 · 77817c0 · 77817c0
1 parent b2bc67b
commit 77817c0
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 30 deletions.
diff --git a/cypress/e2e/keyboard-navigation.cy.ts b/cypress/e2e/keyboard-navigation.cy.ts
@@ -13,7 +13,7 @@ describe('keyboard navigation and accessibility', () => {
 
     closeErrorReportingNotice();
     pressTabAndAssertFocusOutline(() => cy.dataCy('api3-logo'));
-    pressTabAndAssertFocusOutline(() => cy.findAllByText('Connect Wallet').filter(':visible'));
+    pressTabAndAssertFocusOutline(() => cy.findAllByText('Connect Wallet').parent().filter(':visible'));
 
     pressTabAndAssertFocusOutline(() => cy.findAllByText('Staking').filter(':visible').closest('a'));
     pressTabAndAssertFocusOutline(() => cy.findAllByText('Governance').filter(':visible').closest('a'));

diff --git a/src/components/navigation/navigation.module.scss b/src/components/navigation/navigation.module.scss
@@ -2,7 +2,6 @@
 
 .navigation {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
@@ -18,7 +17,6 @@
   }
 
   @media (min-width: $md) {
-    flex-direction: row;
     padding: 0 24px 0 40px;
     height: 120px;
 
@@ -33,16 +31,8 @@
   }
 }
 
-.navigationMenu {
+.right {
   display: flex;
+  gap: 16px;
   align-items: center;
-  justify-content: space-between;
-  align-self: flex-start;
-  box-sizing: border-box;
-  width: 100%;
-
-  @media (min-width: $md) {
-    align-self: center;
-    height: unset;
-  }
 }
diff --git a/src/components/navigation/navigation.tsx b/src/components/navigation/navigation.tsx
@@ -7,13 +7,13 @@ import styles from './navigation.module.scss';
 const Navigation = () => {
   return (
     <div className={styles.navigation}>
-      <div className={styles.navigationMenu}>
-        <Link to="/" data-cy="api3-logo">
-          <img src={images.api3DaoLogoLightTheme} alt="logo" className={styles.api3DaoLogo} />
-        </Link>
+      <Link to="/" data-cy="api3-logo">
+        <img src={images.api3DaoLogoLightTheme} alt="logo" className={styles.api3DaoLogo} />
+      </Link>
+      <div className={styles.right}>
+        <SignIn position="navigation" />
         <MobileMenu />
       </div>
-      <SignIn position="navigation" />
     </div>
   );
 };

diff --git a/src/components/sign-in/sign-in.module.scss b/src/components/sign-in/sign-in.module.scss
@@ -41,18 +41,14 @@
 }
 
 .connectButton {
-  width: calc(100% - 64px);
-  min-width: 165px;
-  max-width: 404px;
-  margin-top: 24px;
+  white-space: nowrap;
 
-  button {
-    width: 100%;
-  }
+  .connectButtonLabel {
+    padding: 0 8px;
 
-  @media (min-width: $md) {
-    margin-top: 0;
-    max-width: 224px;
+    @media (min-width: $md) {
+      padding: 0 24px;
+    }
   }
 }
 

diff --git a/src/components/sign-in/sign-in.tsx b/src/components/sign-in/sign-in.tsx
@@ -12,6 +12,7 @@ import { SUPPORTED_NETWORKS, useProviderSubscriptions } from '../../contracts';
 import DisconnectIcon from './disconnect-icon';
 import Button from '../button';
 import { ExclamationTriangleFillIcon } from '../icons';
+import { useWindowDimensions } from '../../hooks/use-window-dimensions';
 
 type Props = {
   dark?: boolean;
@@ -77,6 +78,7 @@ const SignIn = ({ dark, position }: Props) => {
   const { provider, networkName } = useChainData();
   const { disconnect } = useDisconnect();
   const { switchNetwork } = useSwitchNetwork();
+  const { isDesktop } = useWindowDimensions();
   useProviderSubscriptions();
 
   const switchToMainnet = () => {
@@ -96,11 +98,11 @@ const SignIn = ({ dark, position }: Props) => {
       {!provider && (
         <ConnectButton
           type={dark ? 'primary' : 'secondary'}
-          size="sm"
+          size="xxs"
           md={{ size: 'md' }}
           className={styles.connectButton}
         >
-          Connect Wallet
+          <span className={styles.connectButtonLabel}>{isDesktop ? 'Connect Wallet' : 'Connect'}</span>
         </ConnectButton>
       )}
       {provider && <ConnectedStatus dark={dark} position={position} />}