From 6df7caf3d6cf6f35d6af419fc11c8e05890c7b89 Mon Sep 17 00:00:00 2001 From: Eugene Chybisov <18644653+chybisov@users.noreply.github.com> Date: Mon, 26 Feb 2024 13:47:29 +0100 Subject: [PATCH] style: additional theme refinements (#200) --- .../src/components/Card/Card.style.tsx | 8 +-- .../ActiveTransactions.style.ts | 2 +- .../src/components/Avatar/AccountAvatar.tsx | 12 ++-- .../src/components/Avatar/Avatar.style.tsx | 18 ++++-- .../widget/src/components/Avatar/Avatar.tsx | 10 +++- .../src/components/Avatar/TokenAvatar.tsx | 8 +-- .../widget/src/components/Avatar/utils.ts | 11 ++++ .../widget/src/components/ButtonTertiary.tsx | 19 +++++++ packages/widget/src/components/Card/Card.tsx | 16 ++++-- .../src/components/Card/CardIconButton.tsx | 11 ++-- .../src/components/Header/Header.style.ts | 22 ++++--- .../src/components/Header/WalletHeader.tsx | 28 ++++----- .../src/components/Header/WalletMenu.tsx | 33 ++++++----- packages/widget/src/components/Input.tsx | 4 -- .../widget/src/components/ListItemButton.tsx | 27 ++++++--- .../components/RouteCard/RouteCard.style.ts | 4 +- .../widget/src/components/Routes/Routes.tsx | 7 ++- .../SendToWallet/SendToWallet.style.tsx | 3 + .../SendToWallet/SendToWalletButton.tsx | 2 +- .../widget/src/components/SmallAvatar.tsx | 10 ++-- .../src/components/Step/StepProcess.style.tsx | 5 +- .../StepActions/StepActions.style.tsx | 33 +++++------ .../components/StepActions/StepActions.tsx | 4 +- .../StepActions/StepFeeBreakdown.tsx | 5 +- .../widget/src/components/Tabs/Tabs.style.tsx | 8 +-- .../widget/src/components/Token/Token.tsx | 5 -- .../components/TokenList/TokenList.style.tsx | 8 +-- packages/widget/src/config/theme.ts | 4 +- .../pages/SendToWallet/EmptyListIndicator.tsx | 11 ++-- .../SendToWallet/SendToWalletPage.style.tsx | 57 ++----------------- .../pages/SendToWallet/SendToWalletPage.tsx | 19 ++++--- .../ResetSettingsButton.style.tsx | 4 +- packages/widget/src/utils/colors.ts | 11 ++-- 33 files changed, 219 insertions(+), 210 deletions(-) create mode 100644 packages/widget/src/components/Avatar/utils.ts create mode 100644 packages/widget/src/components/ButtonTertiary.tsx diff --git a/packages/widget-playground/src/components/Card/Card.style.tsx b/packages/widget-playground/src/components/Card/Card.style.tsx index 48d4b7d6a..d9050a38b 100644 --- a/packages/widget-playground/src/components/Card/Card.style.tsx +++ b/packages/widget-playground/src/components/Card/Card.style.tsx @@ -1,8 +1,8 @@ -import type { MouseEventHandler } from 'react'; import type { BoxProps, Theme } from '@mui/material'; -import { alpha, darken, lighten, styled } from '@mui/material/styles'; -import { Box, ButtonBase, Typography } from '@mui/material'; +import { Box, ButtonBase, Typography, avatarClasses } from '@mui/material'; import { badgeClasses } from '@mui/material/Badge'; +import { alpha, darken, lighten, styled } from '@mui/material/styles'; +import type { MouseEventHandler } from 'react'; type CardVariant = 'default' | 'selected' | 'error'; @@ -71,7 +71,7 @@ export const Card = styled(Box, { cursor: onClick ? 'pointer' : 'default', backgroundColor: backgroundHoverColor, }, - [`&:hover .${badgeClasses.badge} > div`]: { + [`&:hover .${badgeClasses.badge} > .${avatarClasses.root}`]: { borderColor: backgroundHoverColor, }, transition: theme.transitions.create(['background-color'], { diff --git a/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts b/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts index 8beda3bcc..668d52886 100644 --- a/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts +++ b/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts @@ -13,7 +13,7 @@ export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({ paddingRight: theme.spacing(1.5), height: 64, '&:hover': { - backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'), + backgroundColor: getContrastAlphaColor(theme, 0.04), }, })); diff --git a/packages/widget/src/components/Avatar/AccountAvatar.tsx b/packages/widget/src/components/Avatar/AccountAvatar.tsx index 482fee8ec..09e0632a6 100644 --- a/packages/widget/src/components/Avatar/AccountAvatar.tsx +++ b/packages/widget/src/components/Avatar/AccountAvatar.tsx @@ -1,10 +1,14 @@ import { getConnectorIcon } from '@lifi/wallet-management'; import { Wallet } from '@mui/icons-material'; -import { Avatar, Badge } from '@mui/material'; +import { Badge } from '@mui/material'; import type { Account } from '../../hooks/useAccount.js'; import { useChain } from '../../hooks/useChain.js'; import { SmallAvatar } from '../SmallAvatar.js'; -import { AvatarDefault, AvatarDefaultBadge } from './Avatar.style.js'; +import { + AvatarDefault, + AvatarDefaultBadge, + AvatarMasked, +} from './Avatar.style.js'; interface AccountAvatarProps { chainId?: number; @@ -20,7 +24,7 @@ export const AccountAvatar = ({ const { chain } = useChain(chainId); const avatar = account ? ( - {account.connector?.name[0]} - + ) : empty ? ( ) : ( diff --git a/packages/widget/src/components/Avatar/Avatar.style.tsx b/packages/widget/src/components/Avatar/Avatar.style.tsx index 2ad4af4ad..99d71668a 100644 --- a/packages/widget/src/components/Avatar/Avatar.style.tsx +++ b/packages/widget/src/components/Avatar/Avatar.style.tsx @@ -2,10 +2,21 @@ import type { CSSObject } from '@mui/material'; import { AvatarGroup, Box, + Avatar as MuiAvatar, + Skeleton, avatarClasses, badgeClasses, styled, } from '@mui/material'; +import { avatarMask16 } from './utils.js'; + +export const AvatarMasked = styled(MuiAvatar)(({ theme }) => ({ + mask: avatarMask16, +})); + +export const AvatarSkeleton = styled(Skeleton)(({ theme }) => ({ + mask: avatarMask16, +})); export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({ [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: { @@ -31,19 +42,18 @@ export const AvatarDefault = styled(Box)(({ theme }) => { height: root?.height, width: root?.width, color: theme.palette.text.secondary, + mask: avatarMask16, }; }); export const AvatarDefaultBadge = styled(Box)(({ theme }) => { - const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject; return { background: theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800], - border: `2px solid ${theme.palette.background.paper}`, borderRadius: '50%', - height: ((root?.height ?? 40) as number) / 2, - width: ((root?.width ?? 40) as number) / 2, + height: 16, + width: 16, }; }); diff --git a/packages/widget/src/components/Avatar/Avatar.tsx b/packages/widget/src/components/Avatar/Avatar.tsx index 5af74f964..1671cc305 100644 --- a/packages/widget/src/components/Avatar/Avatar.tsx +++ b/packages/widget/src/components/Avatar/Avatar.tsx @@ -1,7 +1,11 @@ import type { SxProps, Theme } from '@mui/material'; -import { Badge, Skeleton } from '@mui/material'; +import { Badge } from '@mui/material'; import { SmallAvatarSkeleton } from '../SmallAvatar.js'; -import { AvatarDefault, AvatarDefaultBadge } from './Avatar.style.js'; +import { + AvatarDefault, + AvatarDefaultBadge, + AvatarSkeleton, +} from './Avatar.style.js'; export const AvatarBadgedDefault: React.FC<{ sx?: SxProps; @@ -28,7 +32,7 @@ export const AvatarBadgedSkeleton: React.FC<{ badgeContent={} sx={sx} > - + ); }; diff --git a/packages/widget/src/components/Avatar/TokenAvatar.tsx b/packages/widget/src/components/Avatar/TokenAvatar.tsx index b9ec11fec..8f77b299a 100644 --- a/packages/widget/src/components/Avatar/TokenAvatar.tsx +++ b/packages/widget/src/components/Avatar/TokenAvatar.tsx @@ -1,11 +1,11 @@ import type { Chain, StaticToken } from '@lifi/sdk'; import type { SxProps, Theme } from '@mui/material'; -import { Avatar, Badge } from '@mui/material'; +import { Badge } from '@mui/material'; import { useChain } from '../../hooks/useChain.js'; import { useToken } from '../../hooks/useToken.js'; import { SmallAvatar } from '../SmallAvatar.js'; import { AvatarBadgedSkeleton } from './Avatar.js'; -import { AvatarDefaultBadge } from './Avatar.style.js'; +import { AvatarDefaultBadge, AvatarMasked } from './Avatar.style.js'; export const TokenAvatar: React.FC<{ token?: StaticToken; @@ -69,9 +69,9 @@ export const TokenAvatarBase: React.FC<{ } sx={sx} > - + {token?.symbol?.[0]} - + ); }; diff --git a/packages/widget/src/components/Avatar/utils.ts b/packages/widget/src/components/Avatar/utils.ts new file mode 100644 index 000000000..e032c30db --- /dev/null +++ b/packages/widget/src/components/Avatar/utils.ts @@ -0,0 +1,11 @@ +/** + * Avatar mask for 16px badge + */ +export const avatarMask16 = + 'radial-gradient(circle 10.5px at calc(100% - 5.5px) calc(100% - 5.5px), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat'; + +/** + * Avatar mask for 12px badge + */ +export const avatarMask12 = + 'radial-gradient(circle 8.5px at calc(100% - 3.5px) calc(100% - 3.5px), #fff0 96%, #fff) 100% 100%/100% 100% no-repeat'; diff --git a/packages/widget/src/components/ButtonTertiary.tsx b/packages/widget/src/components/ButtonTertiary.tsx new file mode 100644 index 000000000..6192bff35 --- /dev/null +++ b/packages/widget/src/components/ButtonTertiary.tsx @@ -0,0 +1,19 @@ +import { LoadingButton, loadingButtonClasses } from '@mui/lab'; +import { styled } from '@mui/material'; +import { getContrastAlphaColor } from '../utils/colors.js'; + +export const ButtonTertiary = styled(LoadingButton)(({ theme }) => ({ + color: theme.palette.text.primary, + height: 40, + fontSize: 14, + backgroundColor: getContrastAlphaColor(theme, 0.04), + '&:hover, &:active': { + backgroundColor: getContrastAlphaColor(theme, 0.08), + }, + [`&.${loadingButtonClasses.loading}:disabled`]: { + backgroundColor: getContrastAlphaColor(theme, 0.04), + }, + [`.${loadingButtonClasses.loadingIndicator}`]: { + color: theme.palette.text.primary, + }, +})); diff --git a/packages/widget/src/components/Card/Card.tsx b/packages/widget/src/components/Card/Card.tsx index 92ca01019..91f8db06e 100644 --- a/packages/widget/src/components/Card/Card.tsx +++ b/packages/widget/src/components/Card/Card.tsx @@ -2,6 +2,7 @@ import type { BoxProps, Theme } from '@mui/material'; import { Box, alpha, + avatarClasses, badgeClasses, darken, lighten, @@ -69,7 +70,7 @@ export const Card = styled(Box, { ? theme.palette.grey[300] : theme.palette.grey[800], borderRadius: theme.shape.borderRadius, - // boxShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.04)', + // boxShadow: '0px 1px 8px 0px rgba(0, 0, 0, 0.04)', overflow: 'hidden', position: 'relative', padding: indented ? theme.spacing(2) : 0, @@ -78,13 +79,16 @@ export const Card = styled(Box, { cursor: onClick ? 'pointer' : 'default', backgroundColor: backgroundHoverColor, }, - [`&:hover .${badgeClasses.badge} > div`]: { + [`&:hover .${badgeClasses.badge} > .${avatarClasses.root}`]: { borderColor: backgroundHoverColor, }, - transition: theme.transitions.create(['background-color'], { - duration: theme.transitions.duration.enteringScreen, - easing: theme.transitions.easing.easeOut, - }), + transition: theme.transitions.create( + ['background-color', 'box-shadow', 'border-color'], + { + duration: theme.transitions.duration.enteringScreen, + easing: theme.transitions.easing.easeOut, + }, + ), pointerEvents, }; }); diff --git a/packages/widget/src/components/Card/CardIconButton.tsx b/packages/widget/src/components/Card/CardIconButton.tsx index 731966efc..75dd0179d 100644 --- a/packages/widget/src/components/Card/CardIconButton.tsx +++ b/packages/widget/src/components/Card/CardIconButton.tsx @@ -1,15 +1,12 @@ -import { IconButton as MuiIconButton, alpha, styled } from '@mui/material'; +import { IconButton as MuiIconButton, styled } from '@mui/material'; +import { getContrastAlphaColor } from '../../utils/colors.js'; export const CardIconButton = styled(MuiIconButton)(({ theme }) => { - const backgroundColor = - theme.palette.mode === 'light' - ? theme.palette.common.black - : theme.palette.common.white; return { padding: theme.spacing(0.5), - backgroundColor: alpha(backgroundColor, 0.04), + backgroundColor: getContrastAlphaColor(theme, 0.04), '&:hover': { - backgroundColor: alpha(backgroundColor, 0.08), + backgroundColor: getContrastAlphaColor(theme, 0.08), }, }; }); diff --git a/packages/widget/src/components/Header/Header.style.ts b/packages/widget/src/components/Header/Header.style.ts index 175bb3873..8b6360ff2 100644 --- a/packages/widget/src/components/Header/Header.style.ts +++ b/packages/widget/src/components/Header/Header.style.ts @@ -1,12 +1,16 @@ import { AppBar, + Avatar, Box, Button, alpha, + avatarClasses, badgeClasses, buttonClasses, styled, } from '@mui/material'; +import { getContrastAlphaColor } from '../../utils/colors.js'; +import { avatarMask12 } from '../Avatar/utils.js'; import { Tabs } from '../Tabs/Tabs.style.js'; export const HeaderAppBar = styled(AppBar)(({ theme }) => ({ @@ -42,10 +46,7 @@ export const WalletButton = styled(Button)(({ theme }) => ({ fontWeight: 600, borderRadius: theme.shape.borderRadius * 2, '&:hover': { - backgroundColor: - theme.palette.mode === 'light' - ? alpha(theme.palette.common.black, 0.04) - : alpha(theme.palette.common.white, 0.08), + backgroundColor: getContrastAlphaColor(theme, 0.04), }, [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: { fontSize: '24px', @@ -53,11 +54,8 @@ export const WalletButton = styled(Button)(({ theme }) => ({ [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: { fontSize: '24px', }, - [`&:hover .${badgeClasses.badge} > div`]: { - borderColor: - theme.palette.mode === 'light' - ? alpha(theme.palette.common.black, 0.04) - : alpha(theme.palette.common.white, 0.08), + [`&:hover .${badgeClasses.badge} > .${avatarClasses.root}`]: { + borderColor: getContrastAlphaColor(theme, 0.04), }, })); @@ -88,3 +86,9 @@ export const SplitTabs = styled(Tabs)(({ theme }) => ({ ? alpha(theme.palette.common.black, 0.04) : theme.palette.background.paper, })); + +export const WalletAvatar = styled(Avatar)(({ theme }) => ({ + mask: avatarMask12, + width: 24, + height: 24, +})); diff --git a/packages/widget/src/components/Header/WalletHeader.tsx b/packages/widget/src/components/Header/WalletHeader.tsx index 94cb6b85a..fb1eb4447 100644 --- a/packages/widget/src/components/Header/WalletHeader.tsx +++ b/packages/widget/src/components/Header/WalletHeader.tsx @@ -17,6 +17,7 @@ import { CloseDrawerButton } from './CloseDrawerButton.js'; import { DrawerWalletContainer, HeaderAppBar, + WalletAvatar, WalletButton, } from './Header.style.js'; import { WalletMenu } from './WalletMenu.js'; @@ -117,16 +118,6 @@ const ConnectedButton = ({ account }: { account: Account }) => { setAnchorEl(null); }; - const avatar = ( - - {account.connector?.name[0]} - - ); - return ( <> { {chain?.name[0]} } > - {avatar} + + {account.connector?.name[0]} + ) : ( - avatar + + {account.connector?.name[0]} + ) } sx={{ diff --git a/packages/widget/src/components/Header/WalletMenu.tsx b/packages/widget/src/components/Header/WalletMenu.tsx index d472aceff..86327ff1f 100644 --- a/packages/widget/src/components/Header/WalletMenu.tsx +++ b/packages/widget/src/components/Header/WalletMenu.tsx @@ -19,6 +19,7 @@ import { useAccount } from '../../hooks/useAccount.js'; import { useAvailableChains } from '../../hooks/useAvailableChains.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; +import { AvatarMasked } from '../Avatar/Avatar.style.js'; import { SmallAvatar } from '../SmallAvatar.js'; import { EVMDisconnectIconButton } from './EVMDisconnectIconButton.js'; import { SVMDisconnectIconButton } from './SVMDisconnectIconButton.js'; @@ -44,17 +45,7 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => { await navigator.clipboard.writeText(account.address ?? ''); onClose(); }; - const avatar = ( - - {account.connector?.name[0]} - - ); + return ( @@ -69,10 +60,26 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => { } sx={{ marginRight: 1.5 }} > - {avatar} + + {account.connector?.name[0]} + ) : ( - avatar + + {account.connector?.name[0]} + )} {walletAddress} diff --git a/packages/widget/src/components/Input.tsx b/packages/widget/src/components/Input.tsx index b335d3f4e..b8c0d0a34 100644 --- a/packages/widget/src/components/Input.tsx +++ b/packages/widget/src/components/Input.tsx @@ -1,10 +1,6 @@ import { InputBase, inputBaseClasses, styled } from '@mui/material'; export const Input = styled(InputBase)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'light' - ? theme.palette.common.white - : theme.palette.background.paper, paddingRight: theme.spacing(2), [`.${inputBaseClasses.input}`]: { padding: theme.spacing(1.5, 1, 1.5, 2), diff --git a/packages/widget/src/components/ListItemButton.tsx b/packages/widget/src/components/ListItemButton.tsx index 9202f3be0..6dee51211 100644 --- a/packages/widget/src/components/ListItemButton.tsx +++ b/packages/widget/src/components/ListItemButton.tsx @@ -1,15 +1,26 @@ -import { ListItemButton as MuiListItemButton, styled } from '@mui/material'; +import { + ListItemButton as MuiListItemButton, + avatarClasses, + badgeClasses, + styled, +} from '@mui/material'; import { getContrastAlphaColor } from '../utils/colors.js'; -export const ListItemButton = styled(MuiListItemButton)( - ({ theme, disabled }) => ({ +export const ListItemButton = styled(MuiListItemButton)(({ + theme, + disabled, +}) => { + const backgroundHoverColor = getContrastAlphaColor(theme, 0.04); + return { borderRadius: theme.shape.borderRadius, paddingLeft: theme.spacing(1.5), height: 56, - ...(disabled ? { opacity: 0.5, cursor: 'auto' } : {}), '&:hover': { - backgroundColor: - !disabled && getContrastAlphaColor(theme.palette.mode, '4%'), + backgroundColor: !disabled && backgroundHoverColor, + }, + [`&:hover .${badgeClasses.badge} > .${avatarClasses.root}`]: { + borderColor: backgroundHoverColor, }, - }), -); + ...(disabled ? { opacity: 0.5, cursor: 'auto' } : {}), + }; +}); diff --git a/packages/widget/src/components/RouteCard/RouteCard.style.ts b/packages/widget/src/components/RouteCard/RouteCard.style.ts index d0440b576..6ced9fa6b 100644 --- a/packages/widget/src/components/RouteCard/RouteCard.style.ts +++ b/packages/widget/src/components/RouteCard/RouteCard.style.ts @@ -3,8 +3,8 @@ import { Box, Typography, alpha, styled } from '@mui/material'; export const IconTypography = styled(Typography)(({ theme }) => ({ color: theme.palette.mode === 'light' - ? alpha(theme.palette.common.black, 0.24) - : alpha(theme.palette.common.white, 0.32), + ? alpha(theme.palette.common.black, 0.32) + : alpha(theme.palette.common.white, 0.4), lineHeight: 0, })); diff --git a/packages/widget/src/components/Routes/Routes.tsx b/packages/widget/src/components/Routes/Routes.tsx index 6cdecb78d..a1ad59d36 100644 --- a/packages/widget/src/components/Routes/Routes.tsx +++ b/packages/widget/src/components/Routes/Routes.tsx @@ -1,10 +1,11 @@ import type { BoxProps } from '@mui/material'; -import { Box, Button, Collapse } from '@mui/material'; +import { Box, Collapse } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { useRoutes } from '../../hooks/useRoutes.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; +import { ButtonTertiary } from '../ButtonTertiary.js'; import { Card } from '../Card/Card.js'; import { CardTitle } from '../Card/CardTitle.js'; import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'; @@ -68,9 +69,9 @@ export const Routes: React.FC = (props) => { - + diff --git a/packages/widget/src/components/SendToWallet/SendToWallet.style.tsx b/packages/widget/src/components/SendToWallet/SendToWallet.style.tsx index 1870a4aab..8f7a8c559 100644 --- a/packages/widget/src/components/SendToWallet/SendToWallet.style.tsx +++ b/packages/widget/src/components/SendToWallet/SendToWallet.style.tsx @@ -28,4 +28,7 @@ export const SendToWalletCardHeader = styled(CardHeader, { [`.${cardHeaderClasses.action}`]: { marginRight: 0, }, + [`.${cardHeaderClasses.action} > button`]: { + fontSize: 16, + }, })); diff --git a/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx b/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx index 9034b2573..5bdc04190 100644 --- a/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx +++ b/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx @@ -135,7 +135,7 @@ export const SendToWalletButton: React.FC = (props) => { action={ isSelected && !disabledForChanges ? ( - + ) : null } diff --git a/packages/widget/src/components/SmallAvatar.tsx b/packages/widget/src/components/SmallAvatar.tsx index 8f204e0b9..f3f9de927 100644 --- a/packages/widget/src/components/SmallAvatar.tsx +++ b/packages/widget/src/components/SmallAvatar.tsx @@ -2,15 +2,13 @@ import { Avatar, Box, Skeleton, styled } from '@mui/material'; export const SmallAvatar = styled(Avatar)(({ theme }) => ({ background: theme.palette.background.paper, - width: 20, - height: 20, - border: `2px solid ${theme.palette.background.paper}`, + width: 16, + height: 16, })); export const SmallAvatarSkeletonBase = styled(Skeleton)(({ theme }) => ({ - border: `2px solid ${theme.palette.background.paper}`, - width: 20, - height: 20, + width: 16, + height: 16, })); export const SmallAvatarSkeletonContainer = styled(Box)(({ theme }) => ({ diff --git a/packages/widget/src/components/Step/StepProcess.style.tsx b/packages/widget/src/components/Step/StepProcess.style.tsx index 3285fce03..5c0c4d431 100644 --- a/packages/widget/src/components/Step/StepProcess.style.tsx +++ b/packages/widget/src/components/Step/StepProcess.style.tsx @@ -1,7 +1,8 @@ import type { IconButtonProps, LinkProps } from '@mui/material'; -import { IconButton, styled } from '@mui/material'; +import { styled } from '@mui/material'; +import { CardIconButton } from '../Card/CardIconButton.js'; -export const LinkButton = styled(IconButton)( +export const LinkButton = styled(CardIconButton)( ({ theme }) => ({ padding: theme.spacing(0.5), }), diff --git a/packages/widget/src/components/StepActions/StepActions.style.tsx b/packages/widget/src/components/StepActions/StepActions.style.tsx index 0f46a6c61..f166fa620 100644 --- a/packages/widget/src/components/StepActions/StepActions.style.tsx +++ b/packages/widget/src/components/StepActions/StepActions.style.tsx @@ -1,27 +1,14 @@ import { - Avatar, Box, StepConnector as MuiStepConnector, StepLabel as MuiStepLabel, Typography, + alpha, stepConnectorClasses, stepLabelClasses, styled, } from '@mui/material'; - -export const StepIcon = styled('span', { - shouldForwardProp: (prop) => - !['active', 'completed', 'error'].includes(prop as string), -})(({ theme }) => ({ - width: 12, - height: 12, - borderRadius: '50%', - border: `2px solid ${ - theme.palette.mode === 'light' - ? theme.palette.grey[300] - : theme.palette.grey[800] - }`, -})); +import { AvatarMasked } from '../Avatar/Avatar.style.js'; export const StepConnector = styled(MuiStepConnector, { shouldForwardProp: (prop) => @@ -43,10 +30,10 @@ export const StepLabel = styled(MuiStepLabel, { !['active', 'completed', 'error', 'disabled'].includes(prop as string), })(({ theme }) => ({ padding: 0, - alignItems: 'flex-start', + alignItems: 'center', [`.${stepLabelClasses.iconContainer}`]: { - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(3), + paddingLeft: theme.spacing(1.25), + paddingRight: theme.spacing(3.25), }, [`.${stepLabelClasses.labelContainer}`]: { minHeight: 24, @@ -80,7 +67,15 @@ export const StepContent = styled(Box, { paddingLeft: last ? theme.spacing(4.625) : theme.spacing(4.375), })); -export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({ +export const StepAvatar = styled(AvatarMasked)(({ theme }) => ({ color: theme.palette.text.primary, backgroundColor: 'transparent', })); + +export const IconTypography = styled(Typography)(({ theme }) => ({ + color: + theme.palette.mode === 'light' + ? alpha(theme.palette.common.black, 0.32) + : alpha(theme.palette.common.white, 0.4), + lineHeight: 0, +})); diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx index 4b5cdef44..dc249120e 100644 --- a/packages/widget/src/components/StepActions/StepActions.tsx +++ b/packages/widget/src/components/StepActions/StepActions.tsx @@ -113,9 +113,7 @@ export const IncludedSteps: React.FC<{ {tool.toolDetails.name[0]} diff --git a/packages/widget/src/components/StepActions/StepFeeBreakdown.tsx b/packages/widget/src/components/StepActions/StepFeeBreakdown.tsx index f5270799b..617c9e869 100644 --- a/packages/widget/src/components/StepActions/StepFeeBreakdown.tsx +++ b/packages/widget/src/components/StepActions/StepFeeBreakdown.tsx @@ -5,6 +5,7 @@ import type { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { formatUnits } from 'viem'; import { getStepFeeCostsBreakdown } from '../../utils/fees.js'; +import { IconTypography } from './StepActions.style.js'; export const StepFeeBreakdown: React.FC<{ step: LiFiStepExtended; @@ -87,9 +88,9 @@ export const StepFeeBreakdown: React.FC<{ return ( - + - + ({ backgroundColor: getCardFieldsetBackgroundColor(theme), - borderRadius: Math.max( - theme.shape.borderRadius, - theme.shape.borderRadiusSecondary, - ), + borderRadius: theme.shape.borderRadius, padding: theme.spacing(0.5), flex: 1, [`.${tabsClasses.indicator}`]: { height: '100%', width: '100%', backgroundColor: theme.palette.background.paper, - borderRadius: - Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary) - 4, + borderRadius: theme.shape.borderRadius - 4, boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`, }, })); diff --git a/packages/widget/src/components/Token/Token.tsx b/packages/widget/src/components/Token/Token.tsx index 99fba25bb..422b0075f 100644 --- a/packages/widget/src/components/Token/Token.tsx +++ b/packages/widget/src/components/Token/Token.tsx @@ -166,11 +166,6 @@ const TokenStep: FC>> = ({ {step?.toolDetails.name[0]} diff --git a/packages/widget/src/components/TokenList/TokenList.style.tsx b/packages/widget/src/components/TokenList/TokenList.style.tsx index fb285f29e..6dac6b105 100644 --- a/packages/widget/src/components/TokenList/TokenList.style.tsx +++ b/packages/widget/src/components/TokenList/TokenList.style.tsx @@ -1,5 +1,6 @@ import type { IconButtonProps, LinkProps } from '@mui/material'; -import { IconButton as MuiIconButton, alpha, styled } from '@mui/material'; +import { IconButton as MuiIconButton, styled } from '@mui/material'; +import { getContrastAlphaColor } from '../../utils/colors.js'; import { ListItem as ListItemBase } from '../ListItem/ListItem.js'; export const ListItem = styled(ListItemBase)(({ theme }) => ({ @@ -20,10 +21,7 @@ export const IconButton = styled(MuiIconButton)( minWidth: 'unset', borderRadius: '50%', '&:hover': { - backgroundColor: - theme.palette.mode === 'light' - ? alpha(theme.palette.common.black, 0.04) - : alpha(theme.palette.common.white, 0.08), + backgroundColor: getContrastAlphaColor(theme, 0.04), }, svg: { fontSize: 14, diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts index a89624060..39e34bc63 100644 --- a/packages/widget/src/config/theme.ts +++ b/packages/widget/src/config/theme.ts @@ -74,7 +74,7 @@ const palette = { const paletteLight = { // background: { - // default: '#F5F6FF', + // default: '#F5F5F5', // }, text: { primary: '#000000', @@ -206,7 +206,7 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => { root: { borderRadius: borderRadiusSecondary, textTransform: 'none', - fontSize: '1rem', + fontSize: 16, fontWeight: 600, [`&.Mui-disabled, &.Mui-disabled:hover`]: { color: alpha( diff --git a/packages/widget/src/pages/SendToWallet/EmptyListIndicator.tsx b/packages/widget/src/pages/SendToWallet/EmptyListIndicator.tsx index e57fd103b..2ee1ae515 100644 --- a/packages/widget/src/pages/SendToWallet/EmptyListIndicator.tsx +++ b/packages/widget/src/pages/SendToWallet/EmptyListIndicator.tsx @@ -1,9 +1,6 @@ +import { Typography } from '@mui/material'; import type { PropsWithChildren, ReactNode } from 'react'; -import { - EmptyContainer, - EmptyListMessage, - IconContainer, -} from './SendToWalletPage.style.js'; +import { EmptyContainer, IconContainer } from './SendToWalletPage.style.js'; interface EmptyListIndicatorProps extends PropsWithChildren { icon: ReactNode; @@ -14,6 +11,8 @@ export const EmptyListIndicator = ({ }: EmptyListIndicatorProps) => ( {icon} - {children} + + {children} + ); diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx index 0e5288e45..0a6ac9501 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx @@ -1,5 +1,3 @@ -import { LoadingButton, loadingButtonClasses } from '@mui/lab'; -import type { Theme } from '@mui/material'; import { Alert, Box, @@ -10,6 +8,7 @@ import { inputBaseClasses, styled, } from '@mui/material'; +import { ButtonTertiary } from '../../components/ButtonTertiary.js'; import { Card } from '../../components/Card/Card.js'; import { Input } from '../../components/Input.js'; import type { PageContainerProps } from '../../components/PageContainer.js'; @@ -39,10 +38,10 @@ export const SendToWalletPageContainer = styled( gap: theme.spacing(1), })); -export const SendToWalletCard = styled(Card)(({ theme }) => ({ +export const SendToWalletCard = styled(Card)({ display: 'flex', flexDirection: 'column', -})); +}); export const SendToWalletSheetContainer = styled(Box)(({ theme }) => ({ display: 'flex', @@ -58,48 +57,11 @@ export const SendToWalletButtonRow = styled(Box)(({ theme }) => ({ gap: theme.spacing(1), })); -const tertiaryButtonStyles = (theme: Theme) => ({ - color: theme.palette.text.primary, - height: 40, - fontSize: 14, - backgroundColor: - theme.palette.mode === 'light' - ? theme.palette.grey[200] - : theme.palette.grey[800], - '&:hover, &:active': { - backgroundColor: - theme.palette.mode === 'light' - ? theme.palette.grey[300] - : theme.palette.grey[700], - }, - [`&.${loadingButtonClasses.loading}:disabled`]: { - backgroundColor: - theme.palette.mode === 'light' - ? theme.palette.grey[200] - : theme.palette.grey[800], - }, - [`.${loadingButtonClasses.loadingIndicator}`]: { - color: theme.palette.text.primary, - }, -}); - -export const SendToWalletButton = styled(LoadingButton)(({ theme }) => ({ - ...tertiaryButtonStyles(theme), -})); - -export const SendToWalletIconButton = styled(LoadingButton)(({ theme }) => ({ - ...tertiaryButtonStyles(theme), +export const SendToWalletIconButton = styled(ButtonTertiary)(({ theme }) => ({ padding: theme.spacing(1.25), minWidth: 40, })); -export const WalletNumber = styled(Typography)(({ theme }) => ({ - color: - theme.palette.mode === 'light' - ? theme.palette.grey[600] - : theme.palette.grey[400], -})); - export const IconContainer = styled(Box)(({ theme }) => ({ display: 'flex', justifyContent: 'center', @@ -155,15 +117,6 @@ export const EmptyContainer = styled(Box)(({ theme }) => ({ gap: theme.spacing(2), })); -export const EmptyListMessage = styled(Typography)(({ theme }) => ({ - fontSize: 14, - fontWeight: 700, - color: - theme.palette.mode === 'light' - ? theme.palette.grey[600] - : theme.palette.grey[400], -})); - export const ValidationAlert = styled(Alert)(({ theme }) => ({ backgroundColor: 'transparent', padding: 0, @@ -180,6 +133,6 @@ export const OptionsMenuButton = styled(IconButton)(({ theme }) => ({ top: theme.spacing(1.75), right: theme.spacing(2), '&:hover': { - backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'), + backgroundColor: getContrastAlphaColor(theme, 0.04), }, })); diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx index 979d66d50..b4483822f 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx @@ -1,10 +1,11 @@ import { Error, History, TurnedIn, Wallet } from '@mui/icons-material'; -import { Tooltip } from '@mui/material'; +import { Tooltip, Typography } from '@mui/material'; import type { ChangeEvent } from 'react'; import { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import type { BottomSheetBase } from '../../components/BottomSheet/types.js'; +import { ButtonTertiary } from '../../components/ButtonTertiary.js'; import { CardButton } from '../../components/Card/CardButton.js'; import { useAccount } from '../../hooks/useAccount.js'; import { @@ -23,13 +24,11 @@ import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'; import { ConfirmAddressSheet } from './ConfirmAddressSheet.js'; import { AddressInput, - SendToWalletButton, SendToWalletButtonRow, SendToWalletCard, SendToWalletIconButton, SendToWalletPageContainer, ValidationAlert, - WalletNumber, } from './SendToWalletPage.style.js'; export const SendToWalletPage = () => { @@ -201,7 +200,7 @@ export const SendToWalletPage = () => { ) : null} - { sx={{ flexGrow: 1 }} > {t('button.done')} - + { onClick={handleRecentWalletsClick} > {!!recentWallets.length && ( - {recentWallets.length} + {recentWallets.length} )} { onClick={handleConnectedWalletsClick} > {!!connectedWallets.length && ( - {connectedWallets.length} + + {connectedWallets.length} + )} { icon={} onClick={handleBookmarkedWalletsClick} > - {!!bookmarks.length && {bookmarks.length}} + {!!bookmarks.length && ( + {bookmarks.length} + )} ); diff --git a/packages/widget/src/pages/SettingsPage/ResetSettingsButton.style.tsx b/packages/widget/src/pages/SettingsPage/ResetSettingsButton.style.tsx index d13f03c1b..2902a98b1 100644 --- a/packages/widget/src/pages/SettingsPage/ResetSettingsButton.style.tsx +++ b/packages/widget/src/pages/SettingsPage/ResetSettingsButton.style.tsx @@ -2,11 +2,11 @@ import { Box, styled } from '@mui/material'; import { getContrastAlphaColor } from '../../utils/colors.js'; export const ResetButtonContainer = styled(Box)(({ theme }) => ({ - background: getContrastAlphaColor(theme.palette.mode, '4%'), + background: getContrastAlphaColor(theme, 0.04), borderRadius: '16px', padding: '16px', [`svg`]: { - fill: getContrastAlphaColor(theme.palette.mode, '40%'), + fill: getContrastAlphaColor(theme, 0.4), }, })); diff --git a/packages/widget/src/utils/colors.ts b/packages/widget/src/utils/colors.ts index 2676193fe..6c6fa5453 100644 --- a/packages/widget/src/utils/colors.ts +++ b/packages/widget/src/utils/colors.ts @@ -1,11 +1,10 @@ -import type { PaletteMode, Theme } from '@mui/material'; +import type { Theme } from '@mui/material'; import { alpha } from '@mui/material'; -export const getContrastAlphaColor = ( - mode: PaletteMode, - alpha: string | number, -) => - mode === 'light' ? `rgb(0 0 0 / ${alpha})` : `rgb(255 255 255 / ${alpha})`; +export const getContrastAlphaColor = (theme: Theme, value: number) => + theme.palette.mode === 'light' + ? alpha(theme.palette.common.black, value) + : alpha(theme.palette.common.white, value); export const getWarningBackgroundColor = (theme: Theme) => theme.palette.mode === 'light'