diff --git a/packages/widget/src/components/Header/WalletHeader.tsx b/packages/widget/src/components/Header/WalletHeader.tsx index 147a0e97f..c77b3376b 100644 --- a/packages/widget/src/components/Header/WalletHeader.tsx +++ b/packages/widget/src/components/Header/WalletHeader.tsx @@ -1,18 +1,19 @@ import { ContentCopy as ContentCopyIcon, ExpandMore as ExpandMoreIcon, + OpenInNewOutlined as OpenInNewOutlinedIcon, PowerSettingsNewRounded as PowerSettingsIcon, WalletOutlined as WalletOutlinedIcon, } from '@mui/icons-material'; -import { Avatar, MenuItem } from '@mui/material'; +import { Avatar, Button, MenuItem } from '@mui/material'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate } from 'react-router-dom'; import { useChain } from '../../hooks'; import { useWallet, useWidgetConfig } from '../../providers'; import { navigationRoutes, shortenWalletAddress } from '../../utils'; -import { Menu } from '../Menu'; import { HeaderAppBar, WalletButton } from './Header.style'; +import { WalletMenu } from './WalletMenu'; export const WalletHeader: React.FC = () => { const { account } = useWallet(); @@ -96,8 +97,7 @@ const ConnectedButton = () => { > {walletAddress} -
+ } + sx={{ + marginTop: 1, + }} + > + {t(`button.disconnect`)} + + > ); }; diff --git a/packages/widget/src/components/Menu.tsx b/packages/widget/src/components/Header/WalletMenu.tsx similarity index 66% rename from packages/widget/src/components/Menu.tsx rename to packages/widget/src/components/Header/WalletMenu.tsx index f0bfc8c31..b089def59 100644 --- a/packages/widget/src/components/Menu.tsx +++ b/packages/widget/src/components/Header/WalletMenu.tsx @@ -4,16 +4,20 @@ import { menuItemClasses } from '@mui/material/MenuItem'; import { styled } from '@mui/material/styles'; import { svgIconClasses } from '@mui/material/SvgIcon'; -export const Menu = styled(MuiMenu)(({ theme }) => ({ +export const WalletMenu = styled(MuiMenu)(({ theme }) => ({ [`& .${menuClasses.paper}`]: { borderRadius: theme.shape.borderRadius, color: theme.palette.text.primary, + boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)', + padding: theme.spacing(2), [`& .${menuClasses.list}`]: { - padding: theme.spacing(0.5, 0), + padding: 0, }, [`& .${menuItemClasses.root}`]: { + borderRadius: theme.shape.borderRadiusSecondary, + padding: theme.spacing(1, 2, 1, 1), [`& .${svgIconClasses.root}`]: { - fontSize: 18, + fontSize: 20, color: theme.palette.text.primary, marginRight: theme.spacing(1.5), }, diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts index f6df9b623..cf5ea37d0 100644 --- a/packages/widget/src/config/theme.ts +++ b/packages/widget/src/config/theme.ts @@ -86,7 +86,7 @@ const paletteDark = { const shape = { borderRadius: 12, - borderRadiusSecondary: 6, + borderRadiusSecondary: 8, }; export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => { diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json index adf9eaea4..421d98bf5 100644 --- a/packages/widget/src/i18n/en.json +++ b/packages/widget/src/i18n/en.json @@ -6,9 +6,10 @@ "contactSupport": "Contact support", "continue": "Continue", "copyAddress": "Copy address", + "viewOnExplorer": "View on explorer", "dark": "Dark", "delete": "Delete", - "disconnectWallet": "Disconnect wallet", + "disconnect": "Disconnect", "done": "Done", "getGas": "Get gas", "hide": "Hide",