style: additional theme refinements (#200)

lifinance · Feb 26, 2024 · 6df7caf · 6df7caf
1 parent 7371f78
commit 6df7caf
Show file tree

Hide file tree

Showing 33 changed files with 219 additions and 210 deletions.
diff --git 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
@@ -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
@@ -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,15 +24,15 @@ export const AccountAvatar = ({
   const { chain } = useChain(chainId);
 
   const avatar = account ? (
-    <Avatar
+    <AvatarMasked
       src={getConnectorIcon(account.connector)}
       alt={account.connector?.name}
       sx={{
         marginRight: chain?.logoURI ? 0 : 1.5,
       }}
     >
       {account.connector?.name[0]}
-    </Avatar>
+    </AvatarMasked>
   ) : empty ? (
     <AvatarDefault />
   ) : (

diff --git 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
@@ -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<Theme>;
@@ -28,7 +32,7 @@ export const AvatarBadgedSkeleton: React.FC<{
       badgeContent={<SmallAvatarSkeleton />}
       sx={sx}
     >
-      <Skeleton width={40} height={40} variant="circular" />
+      <AvatarSkeleton width={40} height={40} variant="circular" />
     </Badge>
   );
 };
diff --git 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}
     >
-      <Avatar src={token?.logoURI} alt={token?.symbol}>
+      <AvatarMasked src={token?.logoURI} alt={token?.symbol}>
         {token?.symbol?.[0]}
-      </Avatar>
+      </AvatarMasked>
     </Badge>
   );
 };
diff --git a/packages/widget/src/components/Avatar/utils.ts 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
@@ -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
@@ -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
@@ -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
@@ -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,22 +46,16 @@ 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',
   },
   [`.${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
@@ -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 = (
-    <Avatar
-      src={getConnectorIcon(account.connector)}
-      alt={account.connector?.name}
-      sx={{ width: 24, height: 24 }}
-    >
-      {account.connector?.name[0]}
-    </Avatar>
-  );
-
   return (
     <>
       <WalletButton
@@ -140,16 +131,27 @@ const ConnectedButton = ({ account }: { account: Account }) => {
                 <SmallAvatar
                   src={chain?.logoURI}
                   alt={chain?.name}
-                  sx={{ width: 16, height: 16 }}
+                  sx={{ width: 12, height: 12 }}
                 >
                   {chain?.name[0]}
                 </SmallAvatar>
               }
             >
-              {avatar}
+              <WalletAvatar
+                src={getConnectorIcon(account.connector)}
+                alt={account.connector?.name}
+              >
+                {account.connector?.name[0]}
+              </WalletAvatar>
             </Badge>
           ) : (
-            avatar
+            <Avatar
+              src={getConnectorIcon(account.connector)}
+              alt={account.connector?.name}
+              sx={{ width: 24, height: 24 }}
+            >
+              {account.connector?.name[0]}
+            </Avatar>
           )
         }
         sx={{