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')};
+ }
+`;