diff --git a/src/domains/chains/components/ChainSelector.tsx b/src/domains/chains/components/ChainSelector.tsx index 38df71b..83e3704 100644 --- a/src/domains/chains/components/ChainSelector.tsx +++ b/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; diff --git a/src/domains/misc/components/Button/Button.tsx b/src/domains/misc/components/Button/Button.tsx index 3921248..f50a817 100644 --- a/src/domains/misc/components/Button/Button.tsx +++ b/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; diff --git a/src/domains/misc/components/Layout/TopBar/NavBox.tsx b/src/domains/misc/components/Layout/TopBar/NavBox.tsx index b51c6c5..2d6fce0 100644 --- a/src/domains/misc/components/Layout/TopBar/NavBox.tsx +++ b/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%; diff --git a/src/domains/misc/components/Layout/TopBar/TopBar.tsx b/src/domains/misc/components/Layout/TopBar/TopBar.tsx index 0a99953..1d8c3c0 100644 --- a/src/domains/misc/components/Layout/TopBar/TopBar.tsx +++ b/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 = () => { {!isSmallScreen && } - - {isConnected ? ( + {isConnected ? ( + @@ -48,15 +50,18 @@ const TopBar = () => { - ) : ( + + ) : ( + - )} - + + )} ); }; @@ -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')}; + } +`;