SD-106: Adjust button styling

Author: rAskVAL

src/domains/chains/components/ChainSelector.tsx

@@ -82,6 +82,7 @@ const StyledButton = styled(Button)`
   padding-inline: ${vars('--spacing-s')};
   width: ${CHAIN_SELECTOR_WIDTH}px;
 
+  border-radius: ${vars('--spacing-s')};
   background: ${vars('--color-neutral-background-1-rest')};
   border-color: ${vars('--color-neutral-stroke-2-rest')};
   overflow: hidden;

src/domains/misc/components/Button/Button.tsx

@@ -108,13 +108,7 @@ const DomButton = styled.button.withConfig({
     'extra-small': typography.caption1Strong,
     tiny: typography.caption2Strong,
   })};
-  border-radius: ${perSize({
-    large: vars('--border-radius-s'),
-    medium: vars('--border-radius-s'),
-    small: vars('--border-radius-s'),
-    'extra-small': vars('--border-radius-s'),
-    tiny: vars('--border-radius-xs'),
-  })};
+  border-radius: ${vars('--border-radius-circular')};
   transition: background-color ${transitionTime}, color ${transitionTime};
 
   outline-offset: -${BORDER_WIDTH}px;

src/domains/misc/components/Layout/TopBar/NavBox.tsx

@@ -53,6 +53,7 @@ const ContentWrapper = styled.section`
   display: flex;
 
   justify-content: space-between;
+  align-items: center;
   gap: ${vars('--spacing-xs')};
 
   width: 100%;

src/domains/misc/components/Layout/TopBar/TopBar.tsx

@@ -6,7 +6,7 @@ import ConnectModal from 'src/domains/chains/components/ConnectModal';
 import { useWallet } from 'src/domains/chains/components/WalletProvider';
 import Button from 'src/domains/misc/components/Button';
 import { useModal } from 'src/domains/misc/components/Modal';
-import { BOTTOM_MENU_BREAKPOINT } from 'src/domains/misc/consts/consts';
+import { BOTTOM_MENU_BREAKPOINT, BREAKPOINTS } from 'src/domains/misc/consts/consts';
 import formatAddress from 'src/domains/misc/utils/formatAddress';
 import { typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
@@ -20,6 +20,8 @@ import UserIcon from './userIcon.svg?react';
 
 const TopBar = () => {
   const isSmallScreen = useMediaQuery(`(max-width: ${BOTTOM_MENU_BREAKPOINT})`);
+  const isLargeScreen = useMediaQuery(`(width > ${BREAKPOINTS.lg}`);
+
   const { disconnect, isConnected , address } = useWallet();
   const { open } = useModal();
 
@@ -31,8 +33,8 @@ const TopBar = () => {
         </BrandContainer>
         {!isSmallScreen && <Navigation position="floor" />}
       </NavBox.BrandCanvas>
-      <NavBox.UserCanvas>
-        {isConnected ? (
+      {isConnected ? (
+        <NavBox.UserCanvas>
           <AccountManager>
             <ChainSelector />
             <Divider />
@@ -48,15 +50,18 @@ const TopBar = () => {
               </PowerButton>
             </AccountDetails>
           </AccountManager>
-        ) : (
+        </NavBox.UserCanvas>
+      ) : (
+        <ConnectButtonWrapper>
           <Button
             onClick={() => void open(<ConnectModal />)}
             variant="primary"
+            size={isLargeScreen ? 'medium' : 'small'}
           >
             Connect
           </Button>
-        )}
-      </NavBox.UserCanvas>
+        </ConnectButtonWrapper>
+      )}
     </NavBox.Container>
   );
 };
@@ -104,3 +109,13 @@ const Divider = styled.div`
 const PowerButton = styled(Button)`
   color: ${vars('--color-neutral-foreground-2-rest')};
 `;
+
+const ConnectButtonWrapper = styled.div`
+  display: flex;
+  padding-left: ${vars('--spacing-m-nudge')};
+  padding-right: ${vars('--spacing-l')};
+
+  @media (width > ${BREAKPOINTS.lg}) { /* stylelint-disable-line media-query-no-invalid */
+    padding-inline: ${vars('--spacing-s')};
+  }
+`;