fix: mf-5312 style for red packet (#10859)

DimensionDev · Sep 26, 2023 · 0da75d7 · 0da75d7
1 parent 2a10ce7
commit 0da75d7
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 45 deletions.
diff --git a/packages/icons/general/RadioButtonChecked.svg b/packages/icons/general/RadioButtonChecked.svg
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import { compact } from 'lodash-es'
 import Web3Utils from 'web3-utils'
-import { DialogContent, Tab } from '@mui/material'
+import { DialogContent, Tab, useTheme } from '@mui/material'
 import { TabContext, TabPanel } from '@mui/lab'
 import { CrossIsolationMessages, NetworkPluginID, PluginID } from '@masknet/shared-base'
 import { useChainContext, useGasPrice } from '@masknet/web3-hooks-base'
@@ -13,7 +13,11 @@ import { useActivatedPlugin } from '@masknet/plugin-infra/dom'
 import { Icons } from '@masknet/icons'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
-import { useCurrentVisitingIdentity, useLastRecognizedIdentity } from '@masknet/plugin-infra/content-script'
+import {
+    useCurrentVisitingIdentity,
+    useLastRecognizedIdentity,
+    useSiteThemeMode,
+} from '@masknet/plugin-infra/content-script'
 import { Web3 } from '@masknet/web3-providers'
 import { useI18N } from '../locales/index.js'
 import { reduceUselessPayloadInfo } from './utils/reduceUselessPayloadInfo.js'
@@ -26,8 +30,13 @@ import { RedPacketERC20Form } from './RedPacketERC20Form.js'
 import { RedPacketERC721Form } from './RedPacketERC721Form.js'
 import { openComposition } from './openComposition.js'
 
-const useStyles = makeStyles<{ currentTab: 'tokens' | 'collectibles'; showHistory: boolean }>()(
-    (theme, { currentTab, showHistory }) => ({
+const useStyles = makeStyles<{ currentTab: 'tokens' | 'collectibles'; showHistory: boolean; isDim: boolean }>()((
+    theme,
+    { currentTab, showHistory, isDim },
+) => {
+    // it's hard to set dynamic color, since the background color of the button is blended transparent
+    const darkBackgroundColor = isDim ? '#38414b' : '#292929'
+    return {
         dialogContent: {
             padding: 0,
             '::-webkit-scrollbar': {
@@ -41,8 +50,11 @@ const useStyles = makeStyles<{ currentTab: 'tokens' | 'collectibles'; showHistor
             width: '100%',
             paddingBottom: theme.spacing(2),
         },
-    }),
-)
+        arrowButton: {
+            backgroundColor: theme.palette.mode === 'dark' ? darkBackgroundColor : undefined,
+        },
+    }
+})
 
 enum CreateRedPacketPageStep {
     NewRedPacketPage = 'new',
@@ -68,7 +80,9 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
     const { account, chainId: _chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const approvalDefinition = useActivatedPlugin(PluginID.RedPacket, 'any')
     const [currentTab, onChange, tabs] = useTabs('tokens', 'collectibles')
-    const { classes } = useStyles({ currentTab, showHistory })
+    const theme = useTheme()
+    const mode = useSiteThemeMode(theme)
+    const { classes } = useStyles({ currentTab, showHistory, isDim: mode === 'dim' })
     const chainIdList = useMemo(() => {
         return compact<ChainId>(
             currentTab === tabs.tokens
@@ -217,6 +231,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
                                 chains={chainIdList}
                                 hideArrowButton={currentTab === tabs.collectibles}
                                 pluginID={NetworkPluginID.PLUGIN_EVM}
+                                classes={{ arrowButton: classes.arrowButton }}
                             />
                         </div>
                     ) : null

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx
@@ -1,9 +1,8 @@
 import { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
-import { Check as CheckIcon } from '@mui/icons-material'
 import { useAsync } from 'react-use'
 import { BigNumber } from 'bignumber.js'
 import { omit } from 'lodash-es'
-import { makeStyles, ActionButton, MaskTextField } from '@masknet/theme'
+import { makeStyles, ActionButton, MaskTextField, RadioIndicator } from '@masknet/theme'
 import { Box, InputBase, Typography, useTheme } from '@mui/material'
 import {
     type FungibleToken,
@@ -68,28 +67,17 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         width: '50%',
         alignItems: 'center',
-    },
-    checkIcon: {
-        width: 15,
-        height: 15,
-        color: theme.palette.maskColor.bottom,
+        color: theme.palette.maskColor.line,
     },
     checkIconWrapper: {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
         cursor: 'pointer',
-        width: 17,
-        height: 17,
-        borderRadius: 999,
+        borderRadius: '50%',
         marginRight: 5,
-        border: `2px solid ${theme.palette.maskColor.secondaryLine}`,
         backgroundColor: 'transparent',
     },
-    checked: {
-        borderColor: `${theme.palette.maskColor.primary} !important`,
-        backgroundColor: `${theme.palette.maskColor.primary} !important`,
-    },
     tokenValue: {
         flexGrow: 1,
     },
@@ -108,7 +96,7 @@ export interface RedPacketFormProps {
 
 export function RedPacketERC20Form(props: RedPacketFormProps) {
     const t = useI18N()
-    const { classes, cx } = useStyles()
+    const { classes } = useStyles()
     const theme = useTheme()
     const { onChange, onNext, origin, gasOption, onGasOptionChange, expectedChainId } = props
     // context
@@ -283,10 +271,8 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
         <>
             <div className={classes.field}>
                 <div className={classes.option}>
-                    <div
-                        className={cx(classes.checkIconWrapper, isRandom ? classes.checked : '')}
-                        onClick={() => setRandom(1)}>
-                        <CheckIcon className={classes.checkIcon} />
+                    <div className={classes.checkIconWrapper}>
+                        <RadioIndicator onClick={() => setRandom(1)} checked={!!isRandom} size={20} />
                     </div>
                     <Typography
                         color={isRandom ? theme.palette.maskColor.main : theme.palette.maskColor.second}
@@ -296,10 +282,8 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
                     </Typography>
                 </div>
                 <div className={classes.option}>
-                    <div
-                        className={cx(classes.checkIconWrapper, !isRandom ? classes.checked : '')}
-                        onClick={() => setRandom(0)}>
-                        <CheckIcon className={classes.checkIcon} />
+                    <div className={classes.checkIconWrapper}>
+                        <RadioIndicator onClick={() => setRandom(0)} checked={!isRandom} size={20} />
                     </div>
                     <Typography
                         color={!isRandom ? theme.palette.maskColor.main : theme.palette.maskColor.second}

diff --git a/packages/shared/src/UI/components/NetworkTab/index.tsx b/packages/shared/src/UI/components/NetworkTab/index.tsx
@@ -8,17 +8,16 @@ import {
     useWeb3Others,
 } from '@masknet/web3-hooks-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { MaskTabList, useTabs } from '@masknet/theme'
+import { MaskTabList, useTabs, type MaskTabListProps } from '@masknet/theme'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import { TabContext } from '@mui/lab'
 import { Stack, Tab, Typography } from '@mui/material'
 import { WalletIcon } from '../WalletIcon/index.js'
 import { SmartPayBundler } from '@masknet/web3-providers'
 import { ChainId } from '@masknet/web3-shared-evm'
 
-interface NetworkTabProps {
+interface NetworkTabProps extends Omit<MaskTabListProps, 'onChange'> {
     chains: Web3Helper.ChainIdAll[]
-    hideArrowButton?: boolean
     pluginID: NetworkPluginID
     onChange?(chainId: Web3Helper.ChainIdAll): void
     requireChains?: boolean
@@ -27,9 +26,9 @@ interface NetworkTabProps {
 export const NetworkTab = memo(function NetworkTab({
     chains,
     pluginID,
-    hideArrowButton,
     onChange,
     requireChains,
+    ...rest
 }: NetworkTabProps) {
     const { pluginID: networkPluginID } = useNetworkContext(pluginID)
     const { chainId, setChainId, setNetworkType } = useChainContext()
@@ -64,6 +63,7 @@ export const NetworkTab = memo(function NetworkTab({
     return (
         <TabContext value={tab}>
             <MaskTabList
+                {...rest}
                 variant="flexible"
                 onChange={(_, v) => {
                     const chainId = Number.parseInt(v, 10)
@@ -73,7 +73,6 @@ export const NetworkTab = memo(function NetworkTab({
                     onChange?.(chainId)
                     setTab(v)
                 }}
-                hideArrowButton={hideArrowButton}
                 aria-label="Network Tabs">
                 {usedNetworks.map((x) => {
                     return (

diff --git a/packages/theme/src/Components/Tabs/index.tsx b/packages/theme/src/Components/Tabs/index.tsx
@@ -1,4 +1,13 @@
-import { Box, Button, ButtonGroup, type ButtonGroupProps, styled, Tab, alpha } from '@mui/material'
+import {
+    Box,
+    Button,
+    ButtonGroup,
+    type ButtonGroupProps,
+    styled,
+    Tab,
+    alpha,
+    type ButtonGroupClasses,
+} from '@mui/material'
 import { useTabContext, getPanelId, getTabId } from '@mui/lab'
 import {
     forwardRef,
@@ -20,9 +29,11 @@ import { RoundTab } from './RoundTab.js'
 type MaskTabVariant = 'base' | 'flexible' | 'round'
 const defaultTabSize = 38
 
-export interface MaskTabListProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
+export interface MaskTabListProps
+    extends Omit<ButtonGroupProps, 'variant' | 'onChange' | 'classes'>,
+        withClasses<keyof ButtonGroupClasses | 'arrowButton'> {
     onChange(event: object, value: string): void
-    'aria-label': string
+    'aria-label'?: string
     variant?: MaskTabVariant
     hideArrowButton?: boolean
 }
@@ -154,6 +165,7 @@ const tabMapping: {
  */
 export const MaskTabList = forwardRef<HTMLDivElement, MaskTabListProps>((props, ref) => {
     const context = useTabContext()
+    const classes = props.classes
 
     const [open, handleToggle] = useState(false)
     const [isTabsOverflow, setIsTabsOverflow] = useState(false)
@@ -259,6 +271,7 @@ export const MaskTabList = forwardRef<HTMLDivElement, MaskTabListProps>((props,
                         {flexibleTabs}
                         {isTabsOverflow && !hideArrowButton ? (
                             <ArrowButtonWrap
+                                className={classes?.arrowButton}
                                 variant="text"
                                 size="small"
                                 aria-controls={open ? 'split-button-menu' : undefined}

diff --git a/packages/theme/src/Components/TextField/index.tsx b/packages/theme/src/Components/TextField/index.tsx
@@ -51,7 +51,7 @@ const useStyles = makeStyles()((theme) => ({
             color: !Sniffings.is_dashboard_page ? theme.palette.maskColor.second : theme.palette.maskColor.third,
         },
         [`&.${inputBaseClasses.focused}`]: {
-            background: theme.palette.maskColor.bottom,
+            background: 'transparent',
         },
     },
     input: {
@@ -74,9 +74,7 @@ const useStyles = makeStyles()((theme) => ({
         color: 'rgba(255, 255, 255, 0.4)',
     },
     inputFocused: {
-        background: `${
-            !Sniffings.is_dashboard_page ? theme.palette.maskColor.input : theme.palette.maskColor.bottom
-        } !important`,
+        background: 'transparent',
         ...(Sniffings.is_dashboard_page
             ? {
                   outline: `2px solid ${alpha(theme.palette.maskColor.primary, 0.2)}`,

diff --git a/packages/theme/src/Theme/component-changes.tsx b/packages/theme/src/Theme/component-changes.tsx
@@ -868,7 +868,7 @@ export const InputBase = (mode: PaletteMode, colors: MaskColor) => ({
                     [`&.${inputBaseClasses.focused}.${inputBaseClasses.focused}`]: {
                         outline: `2px solid ${alpha(colors.maskColor.primary, 0.2)}`,
                         borderColor: alpha(colors.maskColor.primary, 0.5),
-                        backgroundColor: colors.maskColor.bottom,
+                        backgroundColor: 'transparent',
                     },
                     [`&.${inputBaseClasses.focused} .${inputAdornmentClasses.positionEnd}`]: {
                         color: colors.maskColor.second,