fix: adjust token avatar skeleton badge to match with background

lifinance · Jan 25, 2023 · 333b3c3 · 333b3c3
1 parent b8f0e72
commit 333b3c3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/packages/widget/src/components/Card/Card.tsx b/packages/widget/src/components/Card/Card.tsx
@@ -1,5 +1,6 @@
 import type { BoxProps, Theme } from '@mui/material';
 import { Box } from '@mui/material';
+import { badgeClasses } from '@mui/material/Badge';
 import { alpha, darken, lighten, styled } from '@mui/material/styles';
 import type { MouseEventHandler } from 'react';
 
@@ -50,6 +51,11 @@ export const Card = styled(Box, {
     onClick,
   }) => {
     const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
+    const backgroundHoverColor = onClick
+      ? theme.palette.mode === 'light'
+        ? darken(backgroundColor, 0.02)
+        : lighten(backgroundColor, 0.02)
+      : backgroundColor;
     return {
       backgroundColor,
       border: `1px solid`,
@@ -70,11 +76,10 @@ export const Card = styled(Box, {
       boxSizing: 'border-box',
       '&:hover': {
         cursor: onClick ? 'pointer' : 'default',
-        backgroundColor: onClick
-          ? theme.palette.mode === 'light'
-            ? darken(backgroundColor, 0.02)
-            : lighten(backgroundColor, 0.02)
-          : backgroundColor,
+        backgroundColor: backgroundHoverColor,
+      },
+      [`&:hover .${badgeClasses.badge} > div`]: {
+        borderColor: backgroundHoverColor,
       },
       transition: theme.transitions.create(['background-color'], {
         duration: theme.transitions.duration.enteringScreen,

diff --git a/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx b/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx
@@ -18,15 +18,14 @@ export const AvatarDefault = styled(Box)(({ theme }) => ({
     theme.palette.mode === 'light'
       ? theme.palette.grey[300]
       : theme.palette.grey[800],
-  border: `2px solid ${theme.palette.background.paper}`,
   borderRadius: '50%',
 }));
 
-export const AvatarDefaultContainer = styled(Box)(({ theme }) => ({
-  border: `2px solid ${
+export const AvatarDefaultBadge = styled(Box)(({ theme }) => ({
+  background:
     theme.palette.mode === 'light'
       ? theme.palette.grey[300]
-      : theme.palette.grey[800]
-  }`,
+      : theme.palette.grey[800],
+  border: `2px solid ${theme.palette.background.paper}`,
   borderRadius: '50%',
 }));
diff --git a/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx b/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
@@ -3,7 +3,7 @@ import type { SxProps, Theme } from '@mui/material';
 import { Avatar, Badge, Skeleton } from '@mui/material';
 import { useChain, useToken } from '../../hooks';
 import { SmallAvatar, SmallAvatarSkeleton } from '../SmallAvatar';
-import { AvatarDefault, AvatarDefaultContainer } from './TokenAvatar.style';
+import { AvatarDefault, AvatarDefaultBadge } from './TokenAvatar.style';
 
 export const TokenAvatarFallback: React.FC<{
   token?: Token;
@@ -83,12 +83,10 @@ export const TokenAvatarDefault: React.FC<{
     <Badge
       overlap="circular"
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={<AvatarDefault width={16} height={16} />}
+      badgeContent={<AvatarDefaultBadge width={16} height={16} />}
       sx={sx}
     >
-      <AvatarDefaultContainer>
-        <AvatarDefault width={28} height={28} />
-      </AvatarDefaultContainer>
+      <AvatarDefault width={32} height={32} />
     </Badge>
   );
 };