fix: icon style

packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/index.tsx

@@ -48,10 +48,12 @@ const useStyles = makeStyles()((theme) => ({
     },
     chainIcon: {
         position: 'absolute',
-        right: -8,
+        right: -9,
         bottom: 0,
-        height: 16,
-        width: 16,
+        height: 18,
+        width: 18,
+        border: `1px solid ${theme.palette.background.default}`,
+        borderRadius: '50%',
     },
     tip: {
         padding: theme.spacing(1),

packages/mask/src/components/InjectedComponents/PageTabItem.tsx

@@ -3,18 +3,33 @@ import { makeStyles } from '@masknet/theme'
 import { Button } from '@mui/material'
 import type { Plugin } from '@masknet/plugin-infra'
 
+const borderShadows = {
+    dark: '0px 0px 16px 0px #FFFFFF33',
+    light: '0px 0px 16px 0px #65778633',
+    dim: '0px 0px 16px 0px #8899A633',
+}
 const useStyles = makeStyles()((theme) => ({
     hidden: {
         display: 'none',
     },
     button: {
-        border: `1px solid ${theme.palette.text.primary} !important`,
+        border: `1px solid ${theme.palette.divider} !important`,
         color: `${theme.palette.text.primary} !important`,
         borderRadius: 9999,
+        '&:hover': {
+            boxShadow: borderShadows?.[theme.palette.mode],
+            border: `1px solid ${theme.palette.primary.main} !important`,
+            color: `${theme.palette.primary.main} !important`,
+            backgroundColor: 'transparent',
+        },
     },
     selected: {
         border: `1px solid ${theme.palette.primary.main} !important`,
         color: `${theme.palette.primary.main} !important`,
+        '&:hover': {
+            boxShadow: borderShadows?.[theme.palette.mode],
+            backgroundColor: 'transparent',
+        },
     },
 }))
 

packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx

@@ -124,6 +124,7 @@ export function ToolboxHintUnstyled(props: ToolboxHintProps) {
                                     badgeSize={badgeSize}
                                     networkIcon={providerDescriptor?.icon} // switch the icon to meet design
                                     providerIcon={networkDescriptor?.icon}
+                                    isBorderColorNotDefault
                                 />
                             ) : (
                                 <MaskFilledIcon size={iconSize} />

packages/shared/src/UI/components/TokenIcon/constants.ts

@@ -0,0 +1,3 @@
+const NO_IMAGE_COLOR = ['#ea7262', '#f3c76b', '#62c1ea', '#627eea', '#a662ea']
+
+export default NO_IMAGE_COLOR

packages/shared/src/UI/components/TokenIcon/index.tsx

@@ -13,6 +13,7 @@ import { Avatar, AvatarProps } from '@mui/material'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { useImageFailOver } from '../../hooks'
 import SPECIAL_ICON_LIST from './TokenIconSpecialIconList.json'
+import NO_IMAGE_COLOR from './constants'
 
 function getFallbackIcons(address: string, baseURIs: string[]) {
     const checkSummedAddress = formatEthereumAddress(address)
@@ -80,10 +81,20 @@ export interface TokenIconUIProps extends withClasses<'icon'> {
 
 export const TokenIconUI = memo<TokenIconUIProps>((props) => {
     const { logoURL, AvatarProps, name } = props
+
+    // add background color to no-img token icon
+    const defaultBackgroundColorNumber = name?.split('')?.reduce((total, cur) => total + Number(cur?.charCodeAt(0)), 0)
+    const defaultBackgroundColor = defaultBackgroundColorNumber
+        ? NO_IMAGE_COLOR?.[defaultBackgroundColorNumber % 5]
+        : undefined
     const classes = useStylesExtends(useStyles(), props)
 
     return (
-        <Avatar className={classes.icon} src={logoURL} {...AvatarProps}>
+        <Avatar
+            className={classes.icon}
+            src={logoURL}
+            style={{ backgroundColor: logoURL ? undefined : defaultBackgroundColor }}
+            {...AvatarProps}>
             {name?.substr(0, 1).toUpperCase()}
         </Avatar>
     )

packages/shared/src/UI/components/WalletIcon/index.tsx

@@ -4,6 +4,7 @@ import { ImageIcon } from '../ImageIcon'
 
 interface StyleProps {
     size: number
+    isBorderColorNotDefault?: boolean
 }
 
 const useStyles = makeStyles<StyleProps>()((theme, props) => ({
@@ -24,7 +25,12 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
         bottom: -2,
     },
     networkIcon: {},
-    providerIcon: {},
+    providerIcon: {
+        border: props?.isBorderColorNotDefault
+            ? `1px solid ${theme.palette.background.paper}`
+            : `1px solid ${theme.palette.background.default}`,
+        borderRadius: '50%',
+    },
 }))
 
 interface WalletIconProps extends withClasses<'networkIcon' | 'providerIcon'> {
@@ -33,11 +39,18 @@ interface WalletIconProps extends withClasses<'networkIcon' | 'providerIcon'> {
     inverse?: boolean
     networkIcon?: URL
     providerIcon?: URL
+    isBorderColorNotDefault?: boolean
 }
 
 export const WalletIcon = (props: WalletIconProps) => {
     const { size = 24, badgeSize = 14, inverse = false, networkIcon, providerIcon } = props
-    const classes = useStylesExtends(useStyles({ size: badgeSize > size ? badgeSize : size }), props)
+    const classes = useStylesExtends(
+        useStyles({
+            size: badgeSize > size ? badgeSize : size,
+            isBorderColorNotDefault: props.isBorderColorNotDefault,
+        }),
+        props,
+    )
 
     // #region icon names
     const names = [