fix: bugfix for theme

packages/mask/src/plugins/MaskPluginWrapper.tsx

@@ -74,15 +74,6 @@ const useStyles = makeStyles<{ backgroundGradient?: string }>()((theme, props) =
         body: {
             padding: theme.spacing(0),
         },
-        button: {
-            backgroundColor: theme.palette.maskColor.dark,
-            color: 'white',
-            width: 254,
-            '&,&:hover': {
-                background: theme.palette.maskColor.dark,
-            },
-            borderRadius: 9999,
-        },
     }
 })
 

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx

@@ -241,7 +241,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
 
     const tokenState = useState(RpTypeTabs.ERC20)
 
-    const dialogContentHeight = state[0] === DialogTabs.past ? 600 : tokenState[0] === RpTypeTabs.ERC20 ? 350 : 670
+    const dialogContentHeight = state[0] === DialogTabs.past ? 600 : tokenState[0] === RpTypeTabs.ERC20 ? 350 : 690
 
     const tabProps: AbstractTabProps = {
         tabs: [

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx

@@ -71,8 +71,8 @@ const useStyles = makeStyles()((theme) => {
             gridTemplateColumns: 'repeat(4, 1fr)',
             gap: 16,
             width: '100%',
-            height: 200,
             overflowY: 'auto',
+            height: 200,
             background: theme.palette.background.default,
             borderRadius: 12,
             padding: theme.spacing(1.5, 1.5, 1, 1),

packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx

@@ -19,6 +19,7 @@ import { WalletMessages, WalletRPC } from '../../messages'
 import { hasNativeAPI, nativeAPI } from '../../../../../shared/native-rpc'
 import { PluginProviderRender } from './PluginProviderRender'
 import { pluginIDSettings } from '../../../../settings/settings'
+import { useUpdateEffect } from 'react-use'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -70,7 +71,6 @@ export function SelectProviderDialog(props: SelectProviderDialogProps) {
         async (result?: Web3Plugin.ConnectionResult) => {
             if (result)
                 await WalletRPC.updateAccount(result as Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType>)
-
             if (undeterminedNetwork?.type === networkType) {
                 pluginIDSettings.value = undeterminedPluginID
             }
@@ -80,6 +80,12 @@ export function SelectProviderDialog(props: SelectProviderDialogProps) {
         [networkType, undeterminedNetwork?.type, undeterminedPluginID, closeDialog, isDashboard],
     )
 
+    useUpdateEffect(() => {
+        if (undeterminedNetwork?.type === networkType) {
+            pluginIDSettings.value = undeterminedPluginID
+        }
+    }, [undeterminedNetwork?.type, networkType])
+
     // not available for the native app
     if (hasNativeAPI) return null
 

packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts

@@ -61,11 +61,11 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
         },
         dialogTitle: {
             display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
+            gridTemplateColumns: '1fr auto 1fr',
             alignItems: 'center',
             padding: 16,
             position: 'relative',
-            background: theme.palette.background.modalTitle,
+            background: theme.palette.maskColor.modelTitleBg,
             borderBottom: 'none',
             '& > p': {
                 fontSize: 18,
@@ -84,7 +84,6 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
             },
         },
         dialogContent: {
-            padding: 16,
             [smallQuery]: {
                 display: 'flex',
                 flexDirection: 'column',

packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts

@@ -10,6 +10,8 @@ import { ValueRef } from '@dimensiondev/holoflows-kit'
 import { useValueRef } from '@masknet/shared-base-ui'
 import { languageSettings } from '../../settings/settings'
 import { cloneDeep, merge } from 'lodash-unified'
+import twitterColorSchema from '../../social-network-adaptor/twitter.com/customization/twitter-color-schema.json'
+import produce, { setAutoFreeze } from 'immer'
 
 const staticRef = createSubscriptionFromValueRef(new ValueRef('light'))
 const defaultUseTheme = (t: Theme) => t
@@ -22,9 +24,14 @@ export function useClassicMaskSNSTheme() {
     const palette = useSubscription(provider)
     const baseTheme = palette === 'dark' ? MaskDarkTheme : MaskLightTheme
 
+    setAutoFreeze(false)
+    const maskTheme = produce(baseTheme, (theme) => {
+        const colorSchema = twitterColorSchema[theme.palette.mode]
+        theme.palette.maskColor = colorSchema.maskColor
+    })
     // TODO: support RTL?
     const [localization, isRTL] = useThemeLanguage(useValueRef(languageSettings))
-    const theme = unstable_createMuiStrictModeTheme(baseTheme, localization)
+    const theme = unstable_createMuiStrictModeTheme(maskTheme, localization)
     return usePostTheme(theme)
 }
 

packages/mask/src/utils/theme/useSwapPageTheme.ts

@@ -26,6 +26,7 @@ export function useSwapPageTheme() {
                 Object.assign(theme.palette[color], colorSchema[color])
             }
         })
+        theme.palette.maskColor = colorSchema.maskColor
         theme.palette.divider = colorSchema.divider
         theme.palette.secondaryDivider = colorSchema.secondaryDivider
         theme.components = theme.components || {}

packages/mask/src/web3/UI/EthereumChainBoundary.tsx

@@ -35,14 +35,6 @@ import { WalletIcon } from '@masknet/shared'
 import { PluginWalletConnectIcon } from '@masknet/icons'
 
 const useStyles = makeStyles()((theme) => ({
-    button: {
-        backgroundColor: theme.palette.maskColor.dark,
-        color: 'white',
-        width: 254,
-        '&,&:hover': {
-            background: theme.palette.maskColor.dark,
-        },
-    },
     action: {
         textAlign: 'center',
         margin: theme.spacing(1),
@@ -193,18 +185,7 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                         startIcon={<PluginWalletConnectIcon />}
                         variant="contained"
                         size={props.ActionButtonPromiseProps?.size}
-                        sx={{
-                            backgroundColor: theme.palette.maskColor.dark,
-                            width: '100%',
-                            color: 'white',
-                            '&:hover': {
-                                backgroundColor: theme.palette.maskColor.dark,
-                            },
-                            margin: 0,
-                            lineHeight: 0,
-                            paddingTop: 1.25,
-                            paddingBottom: 1.25,
-                        }}
+                        sx={{ marginTop: 1.5 }}
                         onClick={openSelectProviderDialog}>
                         {t('plugin_wallet_connect_wallet')}
                     </ActionButton>
@@ -246,18 +227,7 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                                 isBorderColorNotDefault
                             />
                         }
-                        sx={
-                            props.switchButtonStyle ?? {
-                                backgroundColor: theme.palette.maskColor.dark,
-                                width: '100%',
-                                color: 'white',
-                                '&:hover': {
-                                    backgroundColor: theme.palette.maskColor.dark,
-                                },
-                                padding: 1,
-                                margin: 0,
-                            }
-                        }
+                        sx={props.switchButtonStyle}
                         style={{ borderRadius: 10 }}
                         init={
                             <span>
@@ -303,18 +273,7 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                             size={18}
                         />
                     }
-                    sx={
-                        props.switchButtonStyle ?? {
-                            backgroundColor: theme.palette.maskColor.dark,
-                            width: '100%',
-                            color: 'white',
-                            '&:hover': {
-                                backgroundColor: theme.palette.maskColor.dark,
-                            },
-                            padding: 1,
-                            margin: 0,
-                        }
-                    }
+                    sx={props.switchButtonStyle}
                     style={{ borderRadius: 10, paddingTop: 11, paddingBottom: 11 }}
                     init={
                         <span>

packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx

@@ -10,20 +10,8 @@ import { useWalletRiskWarningDialog } from '../../plugins/Wallet/hooks/useWallet
 
 const useStyles = makeStyles()((theme) => ({
     button: {
-        backgroundColor: theme.palette.maskColor.dark,
-        color: 'white',
-        fontSize: 14,
-        fontWeight: 700,
-        width: '100%',
-        '&:hover': {
-            backgroundColor: theme.palette.maskColor.dark,
-        },
         margin: 0,
     },
-    grid: {
-        justifyContent: 'center',
-        padding: 8,
-    },
 }))
 
 export interface EthereumWalletConnectedBoundaryProps

packages/plugins/GoPlusSecurity/src/SNSAdaptor/CheckSecurityDialog.tsx

@@ -1,5 +1,5 @@
 import { Box, DialogContent, Stack } from '@mui/material'
-import { makeStyles, MaskDialog, useStylesExtends } from '@masknet/theme'
+import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { useI18N } from '../locales'
 import { SearchBox } from './components/SearchBox'
 import { useAsyncFn } from 'react-use'
@@ -11,6 +11,7 @@ import { Center, TokenSecurity } from './components/Common'
 import { DefaultPlaceholder } from './components/DefaultPlaceholder'
 import { NotFound } from './components/NotFound'
 import type { ChainId } from '@masknet/web3-shared-evm'
+import { InjectedDialog } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -52,11 +53,7 @@ export function CheckSecurityDialog(props: BuyTokenDialogProps) {
     }, [])
 
     return (
-        <MaskDialog
-            DialogProps={{ classes: { paper: classes.paperRoot } }}
-            title={t.__plugin_name()}
-            open={open}
-            onBack={onClose}>
+        <InjectedDialog classes={{ paper: classes.paperRoot }} title={t.__plugin_name()} open={open} onClose={onClose}>
             <DialogContent className={classes.content}>
                 <Stack height="100%" spacing={2}>
                     <Box>
@@ -81,6 +78,6 @@ export function CheckSecurityDialog(props: BuyTokenDialogProps) {
                     </Box>
                 </Stack>
             </DialogContent>
-        </MaskDialog>
+        </InjectedDialog>
     )
 }