fixup! fix(Wallet): mf-5277 mf-5278 colors in dark mode (#10778) (#10779

) * fixup! fix(Wallet): mf-5277 mf-5278 colors in dark mode (#10778) * fix: confirm button
DimensionDev · Sep 18, 2023 · a438637 · a438637
1 parent ed5fef8
commit a438637
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 48 deletions.
diff --git a/packages/mask/src/extension/popups/pages/Swap/index.tsx b/packages/mask/src/extension/popups/pages/Swap/index.tsx
@@ -4,9 +4,8 @@ import { Appearance } from '@masknet/public-api'
 import { SharedContextProvider } from '@masknet/shared'
 import { applyMaskColorVars, makeStyles } from '@masknet/theme'
 import { ChainContextProvider, DefaultWeb3ContextProvider } from '@masknet/web3-hooks-base'
-import { ThemeProvider, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
 import { useI18N } from '../../../../utils/index.js'
-import { useSwapPageTheme } from '../../../../utils/theme/useSwapPageTheme.js'
 import { NetworkSelector } from '../../components/NetworkSelector/index.js'
 import { useTokenParams } from '../../hooks/index.js'
 import { SwapBox } from './SwapBox/index.js'
@@ -22,7 +21,7 @@ const useStyles = makeStyles()((theme) => {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            backgroundColor: '#F7F9FA',
+            backgroundColor: theme.palette.maskColor.bg,
         },
         container: {
             width: 800,
@@ -49,7 +48,7 @@ const useStyles = makeStyles()((theme) => {
         title: {
             fontSize: 32,
             fontWeight: 'bold',
-            color: theme.palette.grey['900'],
+            color: theme.palette.maskColor.second,
         },
         main: {
             width: 598,
@@ -64,7 +63,6 @@ const useStyles = makeStyles()((theme) => {
 export default function SwapPage() {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const theme = useSwapPageTheme()
     const { chainId } = useTokenParams()
     applyMaskColorVars(document.body, Appearance.light)
     const chainContextValue = useMemo(() => ({ chainId }), [chainId])
@@ -98,28 +96,26 @@ export default function SwapPage() {
     }, [])
 
     return (
-        <ThemeProvider theme={theme}>
-            <SharedContextProvider>
-                <ChainContextProvider value={chainContextValue}>
-                    <div className={classes.page}>
-                        <div className={classes.container}>
-                            <header className={classes.header}>
-                                <Typography variant="h1" className={classes.title}>
-                                    {t('plugin_trader_swap')}
-                                </Typography>
-                                <NetworkSelector />
-                            </header>
-                            <main className={classes.main}>
-                                <DefaultWeb3ContextProvider>
-                                    <AllProviderTradeContext.Provider>
-                                        <SwapBox />
-                                    </AllProviderTradeContext.Provider>
-                                </DefaultWeb3ContextProvider>
-                            </main>
-                        </div>
+        <SharedContextProvider>
+            <ChainContextProvider value={chainContextValue}>
+                <div className={classes.page}>
+                    <div className={classes.container}>
+                        <header className={classes.header}>
+                            <Typography variant="h1" className={classes.title}>
+                                {t('plugin_trader_swap')}
+                            </Typography>
+                            <NetworkSelector />
+                        </header>
+                        <main className={classes.main}>
+                            <DefaultWeb3ContextProvider>
+                                <AllProviderTradeContext.Provider>
+                                    <SwapBox />
+                                </AllProviderTradeContext.Provider>
+                            </DefaultWeb3ContextProvider>
+                        </main>
                     </div>
-                </ChainContextProvider>
-            </SharedContextProvider>
-        </ThemeProvider>
+                </div>
+            </ChainContextProvider>
+        </SharedContextProvider>
     )
 }
diff --git a/packages/mask/src/extension/popups/pages/Wallet/ChangeOwner/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ChangeOwner/index.tsx
@@ -65,7 +65,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         fontSize: 12,
         fontWeight: 400,
-        color: theme.palette.maskColor.secondaryMain,
+        color: theme.palette.mode === 'light' ? theme.palette.maskColor.second : theme.palette.maskColor.main,
         WebkitTextSizeAdjust: '100%',
     },
     walletAddress: {
@@ -122,26 +122,19 @@ const useStyles = makeStyles()((theme) => ({
     button: {
         fontWeight: 600,
         padding: '9px 0',
-        borderRadius: 20,
         fontSize: 14,
         lineHeight: '20px',
     },
-    secondaryButton: {
-        backgroundColor: '#F7F9FA',
-        color: '#1C68F3',
-        '&:hover': {
-            backgroundColor: 'rgba(28, 104, 243, 0.04)',
-        },
-    },
     controller: {
         display: 'grid',
         gridTemplateColumns: 'repeat(2, 1fr)',
         gap: 20,
         padding: 16,
         position: 'fixed',
+        left: 0,
+        right: 0,
         bottom: 0,
-        width: '100%',
-        backgroundColor: '#ffffff',
+        backgroundColor: theme.palette.maskColor.bg,
     },
     disabledItem: {
         opacity: 0.5,
@@ -221,8 +214,8 @@ export default function ChangeOwner() {
         const contract = Contract.getWeb3Contract<Wallet>(wallet?.address, WalletABI as AbiItem[])
         if (!manageAccount?.address || !wallet?.address) return
         const tx = {
-            from: wallet?.address,
-            to: wallet?.address,
+            from: wallet.address,
+            to: wallet.address,
             data: contract?.methods.changeOwner(manageAccount.address).encodeABI(),
         }
         const gas = await Web3.estimateTransaction?.(tx, FALLBACK_GAS)
@@ -237,7 +230,7 @@ export default function ChangeOwner() {
             account: wallet?.address,
             providerType: ProviderType.MaskWallet,
             owner: wallet?.owner,
-            identifier: ECKeyIdentifier.from(wallet?.identifier).unwrapOr(undefined),
+            identifier: ECKeyIdentifier.from(wallet.identifier).unwrapOr(undefined),
             gasOptionType: gasConfig?.gasOptionType,
             overrides: gasConfig,
         })
@@ -259,6 +252,7 @@ export default function ChangeOwner() {
             { providerType: ProviderType.MaskWallet },
         )
     }, [manageAccount, smartPayChainId, wallet, gasConfig])
+    const disabled = !manageAccount?.address || !wallet || loadingHandleConfirm
 
     useTitle(t('popups_wallet_change_owner'))
 
@@ -448,8 +442,10 @@ export default function ChangeOwner() {
             </div>
             <div className={classes.controller}>
                 <ActionButton
-                    variant="contained"
-                    className={cx(classes.button, classes.secondaryButton)}
+                    className={classes.button}
+                    variant="outlined"
+                    color="secondary"
+                    disabled={disabled}
                     onClick={async () => {
                         navigate(-1)
                         await Services.Helper.removePopupWindow()
@@ -461,7 +457,7 @@ export default function ChangeOwner() {
                     className={classes.button}
                     onClick={handleConfirm}
                     loading={loadingHandleConfirm}
-                    disabled={loadingHandleConfirm}>
+                    disabled={disabled}>
                     {t('wallet_status_button_change')}
                 </ActionButton>
             </div>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/Transfer/NonFungibleTokenSection.tsx b/packages/mask/src/extension/popups/pages/Wallet/Transfer/NonFungibleTokenSection.tsx
@@ -48,6 +48,9 @@ const useStyles = makeStyles()((theme) => {
             zIndex: 100,
             marginTop: 'auto',
         },
+        confirmButton: {
+            color: `${theme.palette.maskColor.bottom} !important`,
+        },
     }
 })
 
@@ -162,7 +165,12 @@ export const NonFungibleTokenSection = memo(function NonFungibleTokenSection() {
                 )}
             </div>
             <div className={classes.actionGroup}>
-                <ActionButton fullWidth onClick={transfer} disabled={disabled} loading={state.loading}>
+                <ActionButton
+                    className={classes.confirmButton}
+                    fullWidth
+                    onClick={transfer}
+                    disabled={disabled}
+                    loading={state.loading}>
                     {t('confirm')}
                 </ActionButton>
             </div>

diff --git a/packages/shared/src/hooks/useGasCurrencyMenu.tsx b/packages/shared/src/hooks/useGasCurrencyMenu.tsx
@@ -1,6 +1,6 @@
 import { compact, noop, pick } from 'lodash-es'
 import { useCallback, useState } from 'react'
-import { Button, MenuItem, Typography } from '@mui/material'
+import { Button, MenuItem, Typography, alpha } from '@mui/material'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles, RadioIndicator } from '@masknet/theme'
 import { formatBalance, isLessThan, isSameAddress } from '@masknet/web3-shared-base'
@@ -34,6 +34,9 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         lineHeight: '20px',
     },
+    radio: {
+        color: theme.palette.mode === 'dark' ? alpha(theme.palette.maskColor.line, 0.43) : theme.palette.maskColor.line,
+    },
 }))
 
 export function useGasCurrencyMenu(
@@ -72,7 +75,11 @@ export function useGasCurrencyMenu(
                         <TokenIcon {...pick(nativeToken, 'chainId', 'address', 'symbol')} size={30} />
                         {nativeToken.symbol}
                     </Typography>
-                    <RadioIndicator size={20} checked={isSameAddress(selected, nativeToken.address)} />
+                    <RadioIndicator
+                        size={20}
+                        checked={isSameAddress(selected, nativeToken.address)}
+                        className={classes.radio}
+                    />
                 </MenuItem>
             ) : null,
             maskToken ? (
@@ -89,7 +96,11 @@ export function useGasCurrencyMenu(
                             {sharedI18N.unlock()}
                         </Button>
                     ) : (
-                        <RadioIndicator size={20} checked={isSameAddress(selected, maskAddress)} />
+                        <RadioIndicator
+                            size={20}
+                            className={classes.radio}
+                            checked={isSameAddress(selected, maskAddress)}
+                        />
                     )}
                 </MenuItem>
             ) : null,

diff --git a/packages/theme/src/Theme/component-changes.tsx b/packages/theme/src/Theme/component-changes.tsx
@@ -78,6 +78,7 @@ export const Button = (mode: PaletteMode, colors: MaskColor) => ({
                         [`&.${buttonClasses.disabled}`]: {
                             background: colors.maskColor.primaryMain,
                             opacity: 0.6,
+                            color: colors.maskColor.bottom,
                         },
                     },
                 },