From 12cdf88c451f106a8c380c28ecdf330341486e89 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Sun, 17 Apr 2022 22:08:58 +0800
Subject: [PATCH 1/4] feat: add new theme color

---
 .../twitter.com/customization/custom.ts       |  26 +++--
 .../customization/twitter-color-schema.json   | 110 +++++-------------
 .../mask/src/utils/theme/theme-global.d.ts    |   2 +
 3 files changed, 51 insertions(+), 87 deletions(-)

diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
index 4eaebd387972..fefc7231ba05 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
@@ -71,21 +71,14 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
         setAutoFreeze(false)
 
         const TwitterTheme = produce(baseTheme, (theme) => {
-            theme.palette.background.paper = backgroundColor
             const isDark = theme.palette.mode === 'dark'
-            const isDarker = backgroundColor === 'rgb(0,0,0)'
             theme.palette.primary = {
                 light: toRGB(shade(primaryColorRGB, 10)),
                 main: toRGB(primaryColorRGB),
                 dark: toRGB(shade(primaryColorRGB, -10)),
                 contrastText: toRGB(primaryContrastColorRGB),
             }
-            const themeName = isDark ? (isDarker ? 'darker' : 'dark') : 'light'
-
-            // Just for design
-            if (themeName === 'dark') {
-                theme.palette.background.paper = '#151D26'
-            }
+            const themeName = isDark ? 'dark' : 'light'
 
             const colorSchema = twitterColorSchema[themeName]
             const colors = Object.keys(colorSchema) as Array<keyof typeof colorSchema>
@@ -100,6 +93,23 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
             theme.breakpoints.values = { xs: 0, sm: 687, md: 1024, lg: 1280, xl: 1920 }
             theme.components = theme.components || {}
             const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
+            theme.components.MuiInputBase = {
+                styleOverrides: {
+                    root: {
+                        background: theme.palette.background.input,
+                    },
+                    input: {
+                        background: theme.palette.background.input,
+                    },
+                },
+            }
+            theme.components.MuiDialogTitle = {
+                styleOverrides: {
+                    root: {
+                        background: theme.palette.background.modalTitle,
+                    },
+                },
+            }
             theme.components.MuiButton = {
                 defaultProps: {
                     size: 'medium',
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json b/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
index 51859be679c4..b0d1cda03043 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
+++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
@@ -7,16 +7,19 @@
             "50": "#eff3f4"
         },
         "text": {
-            "primary": "#0f1419",
+            "primary": "#07101B",
             "secondary": "#536471",
+            "third": "#ACB4C1",
             "strong": "#111418",
             "buttonText": "#FFFFFF"
         },
         "background": {
-            "default": "#F6F8F8",
-            "input": "#EDF1F2",
+            "default": "#F9F9F9",
+            "input": "#F2F6FA",
             "tipMask": "rgba(0, 0, 0, 0.85)",
-            "messageShadow": "rgba(101, 119, 134, 0.2)"
+            "messageShadow": "rgba(101, 119, 134, 0.2)",
+            "paper": "#ffffff",
+            "modalTitle": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)"
         },
         "error": {
             "main": "#F4212E"
@@ -37,16 +40,19 @@
             "50": "#cfd9de"
         },
         "text": {
-            "primary": "#0f1419",
-            "secondary": "#536471",
+            "primary": "#07101B",
+            "secondary": "#767F8D",
             "strong": "#111418",
-            "buttonText": "#FFFFFF"
+            "buttonText": "#FFFFFF",
+            "third": "#ACB4C1"
         },
         "background": {
-            "default": "#F6F8F8",
-            "input": "#EDF1F2",
+            "default": "#F9F9F9",
+            "input": "#F2F6FA",
             "tipMask": "rgba(0, 0, 0, 0.85)",
-            "messageShadow": "rgba(101, 119, 134, 0.2)"
+            "messageShadow": "rgba(101, 119, 134, 0.2)",
+            "paper": "#ffffff",
+            "modalTitle": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)"
         },
         "error": {
             "main": "#FF5555"
@@ -67,16 +73,19 @@
             "50": "#253341"
         },
         "text": {
-            "primary": "#EFF3F4",
+            "primary": "#F5F5F5",
             "secondary": "#8899A6",
+            "third": "#666C75",
             "strong": "#FFFFFF",
             "buttonText": "#0F1419"
         },
         "background": {
-            "default": "#18232E",
-            "input": "#212D39",
+            "default": "#1C1C1C",
+            "input": "#26292C",
             "tipMask": "rgba(255, 255, 255, 0.85)",
-            "messageShadow": "rgba(136, 153, 166, 0.2)"
+            "messageShadow": "rgba(136, 153, 166, 0.2)",
+            "paper": "#101010",
+            "modalTitle": "linear-gradient(180deg, #202020 0%, #181818 100%)"
         },
         "error": {
             "main": "#FF5555"
@@ -97,8 +106,9 @@
             "50": "#10171e"
         },
         "text": {
-            "primary": "#EFF3F4",
-            "secondary": "#8899A6",
+            "primary": "#F5F5F5",
+            "secondary": "#C4C7CD",
+            "third": "#666C75",
             "strong": "#FFFFFF",
             "buttonText": "#0F1419"
         },
@@ -108,75 +118,17 @@
         "divider": "#38444D",
         "secondaryDivider": "#38444D",
         "background": {
-            "default": "#18232E",
-            "input": "#212D39",
+            "default": "#1C1C1C",
+            "input": "#26292C",
             "tipMask": "rgba(255, 255, 255, 0.85)",
-            "messageShadow": "rgba(136, 153, 166, 0.2)"
+            "messageShadow": "rgba(136, 153, 166, 0.2)",
+            "paper": "#101010",
+            "modalTitle": "linear-gradient(180deg, #202020 0%, #181818 100%)"
         },
         "action": {
             "buttonHover": "#D7DBDC",
             "bgHover": "#1D2933",
             "mask": "rgba(91, 112, 131, 0.4)"
         }
-    },
-    "darker": {
-        "grey": {
-            "700": "#6e767d",
-            "300": "#3d4145",
-            "200": "#2f3336",
-            "50": "#202327"
-        },
-        "text": {
-            "primary": "#D9D9D9",
-            "secondary": "#6E767D",
-            "strong": "#EFF3F4",
-            "buttonText": "#0F1419"
-        },
-        "background": {
-            "default": "#15171A",
-            "input": "#1D2023",
-            "tipMask": "rgba(255, 255, 255, 0.85)",
-            "messageShadow": "rgba(255, 255, 255, 0.2)"
-        },
-        "error": {
-            "main": "#FF5555"
-        },
-        "divider": "#2F3336",
-        "secondaryDivider": "#2F3336",
-        "action": {
-            "buttonHover": "#D7dBDC",
-            "bgHover": "#1A1D20",
-            "mask": "rgba(91, 112, 131, 0.4)"
-        }
-    },
-    "darker_high_contrast": {
-        "grey": {
-            "700": "#929ca6",
-            "300": "#6e767d",
-            "200": "#3d4145",
-            "50": "#121517"
-        },
-        "text": {
-            "primary": "#D9D9D9",
-            "secondary": "#6E767D",
-            "strong": "#EFF3F4",
-            "buttonText": "#0F1419"
-        },
-        "error": {
-            "main": "#FF5555"
-        },
-        "divider": "#2F3336",
-        "secondaryDivider": "#2F3336",
-        "background": {
-            "default": "#15171A",
-            "input": "#1D2023",
-            "tipMask": "rgba(255, 255, 255, 0.85)",
-            "messageShadow": "rgba(255, 255, 255, 0.2)"
-        },
-        "action": {
-            "buttonHover": "#D7dBDC",
-            "bgHover": "#1A1D20",
-            "mask": "rgba(91, 112, 131, 0.4)"
-        }
     }
 }
diff --git a/packages/mask/src/utils/theme/theme-global.d.ts b/packages/mask/src/utils/theme/theme-global.d.ts
index 7037f9436dfe..389453dee8c7 100644
--- a/packages/mask/src/utils/theme/theme-global.d.ts
+++ b/packages/mask/src/utils/theme/theme-global.d.ts
@@ -3,6 +3,7 @@ declare module '@mui/material/styles/createPalette.d' {
         secondaryDivider: string
     }
     export interface TypeText {
+        third: string
         hint: string
         strong: string
         buttonText: string
@@ -16,6 +17,7 @@ declare module '@mui/material/styles/createPalette.d' {
         input: string
         tipMask: string
         messageShadow: string
+        modalTitle: string
     }
 }
 export {}

From 8ca3a7942d2077972a38200044c8199213c6d574 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Wed, 20 Apr 2022 22:51:03 +0800
Subject: [PATCH 2/4] feat: add new button variants and theme

---
 .../src/components/shared/WalletStatusBox.tsx |   2 +-
 .../twitter.com/customization/custom.ts       | 524 +++++++++++++++---
 .../customization/twitter-color-schema.json   |  56 +-
 .../twitter.com/ui-provider.ts                |   1 -
 .../mask/src/utils/theme/theme-global.d.ts    |  17 +
 .../mask/src/utils/theme/useSwapPageTheme.ts  |  16 -
 .../contexts/components/InjectedDialog.tsx    |   1 -
 packages/theme/src/extended.d.ts              |   5 +-
 8 files changed, 510 insertions(+), 112 deletions(-)

diff --git a/packages/mask/src/components/shared/WalletStatusBox.tsx b/packages/mask/src/components/shared/WalletStatusBox.tsx
index f75f919884b7..68025e7c5f6e 100644
--- a/packages/mask/src/components/shared/WalletStatusBox.tsx
+++ b/packages/mask/src/components/shared/WalletStatusBox.tsx
@@ -218,7 +218,7 @@ export function WalletStatusBox(props: WalletStatusBox) {
                     ) : null}
                     <Button
                         className={classNames(classes.actionButton)}
-                        variant="contained"
+                        variant="roundedContained"
                         size="small"
                         onClick={openSelectProviderDialog}>
                         {t('wallet_status_button_change')}
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
index fefc7231ba05..a309d6381e57 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
@@ -1,7 +1,7 @@
 import { MutationObserverWatcher, ValueRef } from '@dimensiondev/holoflows-kit'
 import { createSubscriptionFromValueRef } from '@masknet/shared-base'
 import { useValueRef } from '@masknet/shared-base-ui'
-import { PaletteMode, Theme, unstable_createMuiStrictModeTheme } from '@mui/material'
+import { PaletteMode, Theme, unstable_createMuiStrictModeTheme, buttonClasses } from '@mui/material'
 import produce, { setAutoFreeze } from 'immer'
 import { useMemo } from 'react'
 import type { SocialNetworkUI } from '../../../social-network'
@@ -9,8 +9,8 @@ import { fromRGB, getBackgroundColor, getForegroundColor, isDark, shade, toRGB }
 import { isMobileTwitter } from '../utils/isMobile'
 import { composeAnchorSelector, composeAnchorTextSelector, headingTextSelector } from '../utils/selector'
 import twitterColorSchema from './twitter-color-schema.json'
-import { parseColor } from '@masknet/theme'
 import { noop } from 'lodash-unified'
+import { parseColor } from '@masknet/theme'
 
 const themeColorRef = new ValueRef('rgb(29, 161, 242)')
 const textColorRef = new ValueRef('rgb(255, 255, 255)')
@@ -87,6 +87,8 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                     Object.assign(theme.palette[color], colorSchema[color])
                 }
             })
+
+            theme.palette.public = colorSchema.public
             theme.palette.divider = colorSchema.divider
             theme.palette.secondaryDivider = colorSchema.secondaryDivider
             theme.shape.borderRadius = isMobileTwitter ? 0 : 15
@@ -107,6 +109,7 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                 styleOverrides: {
                     root: {
                         background: theme.palette.background.modalTitle,
+                        borderBottom: 'none',
                     },
                 },
             }
@@ -118,124 +121,469 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                 },
                 variants: [
                     {
-                        props: { variant: 'sns' },
+                        props: {
+                            size: 'small',
+                        },
+                        style: {
+                            padding: '8px 12px',
+                            borderRadius: 6,
+                            fontSize: 12,
+                            lineHeight: '16px',
+                        },
+                    },
+                    {
+                        props: {
+                            size: 'medium',
+                        },
+                        style: {
+                            padding: '11px 18px',
+                            borderRadius: 8,
+                            fontSize: 14,
+                            lineHeight: '18px',
+                        },
+                    },
+                    {
+                        props: {
+                            size: 'large',
+                        },
+                        style: {
+                            padding: '14px 20px',
+                            borderRadius: 10,
+                            fontSize: 16,
+                            lineHeight: '20px',
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'flat',
+                        },
                         style: {
-                            backgroundColor: theme.palette.primary.main,
-                            color: theme.palette.common.white,
-                            '&:hover': {
-                                backgroundColor: theme.palette.primary.dark,
-                                color: theme.palette.common.white,
+                            background: theme.palette.grey.main3,
+                            color: theme.palette.text.primary,
+                            ['&:hover']: {
+                                backgroundColor: theme.palette.background.paper,
+                                boxShadow:
+                                    theme.palette.mode === 'dark'
+                                        ? '0px 8px 25px rgba(255, 255, 255, 0.1)'
+                                        : '0px 8px 25px rgba(0, 0, 0, 0.1)',
                             },
-                            '&.Mui-disabled': {
-                                opacity: 0.5,
-                                backgroundColor: theme.palette.primary.main,
-                                color: theme.palette.common.white,
+                            [`&.${buttonClasses.disabled}`]: {
+                                opacity: 0.4,
+                                color: theme.palette.text.primary,
                             },
                         },
                     },
                     {
-                        props: { color: 'error' },
+                        props: {
+                            variant: 'contained',
+                        },
                         style: {
-                            backgroundColor: theme.palette.error.main,
-                            color: theme.palette.common.white,
-                            '&:hover': {
-                                backgroundColor: '#f53b47',
+                            backgroundColor: theme.palette.text.primary,
+                            ['&:hover']: {
+                                backgroundColor: theme.palette.text.primary,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.text.primary)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: theme.palette.grey.main,
+                                opacity: 0.6,
+                                color: theme.palette.background.paper,
                             },
                         },
                     },
-                ],
-                styleOverrides: {
-                    root: {
-                        borderRadius: 500,
-                        textTransform: 'initial',
-                        fontWeight: 600,
-                        minHeight: 39,
-                        paddingLeft: 15,
-                        paddingRight: 15,
-                        boxShadow: 'none',
-                        [smallQuery]: {
-                            '&': {
-                                height: 30,
-                                minHeight: 'auto !important',
-                                padding: '0 14px !important',
+                    {
+                        props: {
+                            variant: 'text',
+                        },
+                        style: {
+                            color: theme.palette.text.primary,
+                            ['&:hover']: {
+                                background: theme.palette.grey.main3,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                opacity: 0.4,
                             },
                         },
                     },
-                    contained: {
-                        backgroundColor: theme.palette.text.primary,
-                        color: theme.palette.text.buttonText,
-                        '&.Mui-disabled': {
-                            opacity: 0.5,
-                            backgroundColor: theme.palette.text.primary,
-                            color: theme.palette.text.buttonText,
+                    // info button
+                    {
+                        props: {
+                            variant: 'contained',
+                            color: 'info',
                         },
-                        '&:hover': {
-                            backgroundColor: theme.palette.action.buttonHover,
+                        style: {
+                            background: theme.palette.public.primary,
+                            color: theme.palette.public.white,
+                            ['&:hover']: {
+                                background: theme.palette.public.primary,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.primary)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.3).toRgbString(),
+                                opacity: 0.6,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'flat',
+                            color: 'info',
                         },
-                        [smallQuery]: {
-                            '&': {
-                                height: 30,
-                                minHeight: 'auto !important',
-                                padding: '0 14px !important',
+                        style: {
+                            backgroundColor: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                            color: theme.palette.public.primary,
+                            ['&:hover']: {
+                                background:
+                                    theme.palette.mode === 'dark'
+                                        ? parseColor(theme.palette.public.primary).setAlpha(0.3).toRgbString()
+                                        : theme.palette.public.white,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.primary)
+                                    .setAlpha(0.1)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.primary,
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                                opacity: 0.4,
                             },
                         },
                     },
-                    containedSecondary: {
-                        backgroundColor: theme.palette.background.default,
-                        color: theme.palette.text.strong,
-                        '&:hover': {
-                            color: theme.palette.action.buttonHover,
-                            backgroundColor: theme.palette.action.bgHover,
+                    {
+                        props: {
+                            variant: 'text',
+                            color: 'info',
                         },
-                        '&.Mui-disabled': {
-                            opacity: 0.5,
-                            backgroundColor: theme.palette.background.default,
-                            color: theme.palette.text.strong,
+                        style: {
+                            color: theme.palette.public.primary,
+                            ['&:hover']: {
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.primary,
+                                opacity: 0.4,
+                            },
                         },
                     },
-                    outlined: {
-                        color: theme.palette.text.strong,
-                        borderColor: theme.palette.secondaryDivider,
-                        backgroundColor: 'transparent',
-                        '&:hover': {
-                            color: theme.palette.action.buttonHover,
-                            borderColor: theme.palette.secondaryDivider,
-                            backgroundColor: parseColor(theme.palette.text.primary).setAlpha(0.1).toRgbString(),
+
+                    // warning button
+                    {
+                        props: {
+                            variant: 'contained',
+                            color: 'warning',
+                        },
+                        style: {
+                            backgroundColor: theme.palette.public.warning,
+                            color: theme.palette.public.white,
+                            ['&:hover']: {
+                                background: theme.palette.public.warning,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.warning)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: parseColor(theme.palette.public.warning).setAlpha(0.5).toRgbString(),
+                                opacity: 0.6,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'flat',
+                            color: 'warning',
+                        },
+                        style: {
+                            backgroundColor: parseColor(theme.palette.public.warning).setAlpha(0.1).toRgbString(),
+                            color: theme.palette.public.warning,
+                            ['&:hover']: {
+                                background:
+                                    theme.palette.mode === 'dark'
+                                        ? parseColor(theme.palette.public.warning).setAlpha(0.3).toRgbString()
+                                        : theme.palette.public.white,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.warning)
+                                    .setAlpha(0.1)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.warning,
+                                background: parseColor(theme.palette.public.warning).setAlpha(0.1).toRgbString(),
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'text',
+                            color: 'warning',
+                        },
+                        style: {
+                            color: theme.palette.public.warning,
+                            ['&:hover']: {
+                                background: parseColor(theme.palette.public.warning).setAlpha(0.1).toRgbString(),
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.warning,
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+
+                    // success button
+                    {
+                        props: {
+                            variant: 'contained',
+                            color: 'success',
+                        },
+                        style: {
+                            background: theme.palette.public.success,
+                            color: theme.palette.public.white,
+                            ['&:hover']: {
+                                background: theme.palette.public.success,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.success)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: parseColor(theme.palette.public.success).setAlpha(0.5).toRgbString(),
+                                opacity: 0.6,
+                            },
                         },
-                        '&.Mui-disabled': {
-                            opacity: 0.5,
-                            color: theme.palette.text.strong,
-                            backgroundColor: 'transparent',
+                    },
+                    {
+                        props: {
+                            variant: 'flat',
+                            color: 'success',
+                        },
+                        style: {
+                            background: parseColor(theme.palette.public.success).setAlpha(0.1).toRgbString(),
+                            color: theme.palette.public.warning,
+                            ['&:hover']: {
+                                background:
+                                    theme.palette.mode === 'dark'
+                                        ? parseColor(theme.palette.public.success).setAlpha(0.3).toRgbString()
+                                        : theme.palette.public.white,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.success)
+                                    .setAlpha(0.1)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.success,
+                                background: parseColor(theme.palette.public.success).setAlpha(0.1).toRgbString(),
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'text',
+                            color: 'success',
+                        },
+                        style: {
+                            color: theme.palette.public.success,
+                            ['&:hover']: {
+                                background: parseColor(theme.palette.public.success).setAlpha(0.1).toRgbString(),
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.success,
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+
+                    // error button
+                    {
+                        props: {
+                            variant: 'contained',
+                            color: 'error',
+                        },
+                        style: {
+                            backgroundColor: theme.palette.public.danger,
+                            color: theme.palette.public.white,
+                            ['&:hover']: {
+                                background: theme.palette.public.danger,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.danger)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: parseColor(theme.palette.public.danger).setAlpha(0.5).toRgbString(),
+                                opacity: 0.6,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'flat',
+                            color: 'error',
+                        },
+                        style: {
+                            backgroundColor: parseColor(theme.palette.public.danger).setAlpha(0.1).toRgbString(),
+                            color: theme.palette.public.danger,
+                            ['&:hover']: {
+                                background:
+                                    theme.palette.mode === 'dark'
+                                        ? parseColor(theme.palette.public.danger).setAlpha(0.3).toRgbString()
+                                        : theme.palette.public.white,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.danger)
+                                    .setAlpha(0.1)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.danger,
+                                background: parseColor(theme.palette.public.danger).setAlpha(0.1).toRgbString(),
+                                opacity: 0.4,
+                            },
                         },
                     },
-                    sizeLarge: {
-                        minHeight: 40,
-                        paddingLeft: 30,
-                        paddingRight: 30,
-                        [smallQuery]: {
-                            '&': {
-                                height: 28,
-                                minHeight: 28,
-                                paddingLeft: 15,
-                                paddingRight: 15,
+                    {
+                        props: {
+                            variant: 'text',
+                            color: 'error',
+                        },
+                        style: {
+                            color: theme.palette.public.danger,
+                            ['&:hover']: {
+                                background: parseColor(theme.palette.public.danger).setAlpha(0.1).toRgbString(),
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.danger,
+                                opacity: 0.4,
                             },
                         },
                     },
-                    sizeSmall: {
-                        minHeight: 30,
-                        paddingLeft: 15,
-                        paddingRight: 15,
-                        [smallQuery]: {
-                            '&': {
-                                height: 25,
-                                minHeight: 29,
-                                paddingLeft: 10,
-                                paddingRight: 10,
+
+                    // rounded button
+                    {
+                        props: {
+                            variant: 'roundedFlat',
+                        },
+                        style: {
+                            borderRadius: 99,
+                            background: theme.palette.grey.main3,
+                            color: theme.palette.text.primary,
+                            ['&:hover']: {
+                                backgroundColor: theme.palette.background.paper,
+                                boxShadow:
+                                    theme.palette.mode === 'dark'
+                                        ? '0px 8px 25px rgba(255, 255, 255, 0.1)'
+                                        : '0px 8px 25px rgba(0, 0, 0, 0.1)',
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                opacity: 0.4,
+                                color: theme.palette.text.primary,
                             },
                         },
                     },
+                    {
+                        props: {
+                            variant: 'roundedContained',
+                        },
+                        style: {
+                            backgroundColor: theme.palette.text.primary,
+                            borderRadius: 99,
+                            ['&:hover']: {
+                                backgroundColor: theme.palette.text.primary,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.text.primary)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: theme.palette.grey.main,
+                                opacity: 0.6,
+                                color: theme.palette.background.paper,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'roundedText',
+                        },
+                        style: {
+                            color: theme.palette.text.primary,
+                            borderRadius: 99,
+                            ['&:hover']: {
+                                background: theme.palette.grey.main3,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'roundedContained',
+                            color: 'info',
+                        },
+                        style: {
+                            background: theme.palette.public.primary,
+                            color: theme.palette.public.white,
+                            borderRadius: 99,
+                            ['&:hover']: {
+                                background: theme.palette.public.primary,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.primary)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.3).toRgbString(),
+                                opacity: 0.6,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'roundedFlat',
+                            color: 'info',
+                        },
+                        style: {
+                            backgroundColor: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                            color: theme.palette.public.primary,
+                            borderRadius: 99,
+                            ['&:hover']: {
+                                background:
+                                    theme.palette.mode === 'dark'
+                                        ? parseColor(theme.palette.public.primary).setAlpha(0.3).toRgbString()
+                                        : theme.palette.public.white,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.primary)
+                                    .setAlpha(0.1)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.primary,
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'roundedText',
+                            color: 'info',
+                        },
+                        style: {
+                            color: theme.palette.public.primary,
+                            borderRadius: 99,
+                            ['&:hover']: {
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.primary,
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                ],
+                styleOverrides: {
+                    root: {
+                        textTransform: 'initial',
+                        fontWeight: 700,
+                        color: theme.palette.background.paper,
+                    },
                 },
             }
+
             theme.components.MuiPaper = {
                 defaultProps: {
                     elevation: 0,
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json b/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
index b0d1cda03043..4e4a63dfb82b 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
+++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
@@ -4,7 +4,19 @@
             "700": "#536471",
             "300": "#b9cad3",
             "200": "#cfd9de",
-            "50": "#eff3f4"
+            "50": "#eff3f4",
+            "main": "linear-gradient(0deg, rgba(7, 16, 27, 0.3), rgba(7, 16, 27, 0.3)), #FFFFFF",
+            "main2": "linear-gradient(0deg, rgba(7, 16, 27, 0.2), rgba(7, 16, 27, 0.2)), #FFFFFF",
+            "main3": "linear-gradient(0deg, rgba(7, 16, 27, 0.05), rgba(7, 16, 27, 0.05)), #FFFFFF"
+        },
+        "public": {
+            "primary": "#1C68F3",
+            "success": "#3DC233",
+            "warning": "#FFB100",
+            "danger": "#FF3545",
+            "white": "#ffffff",
+            "dark": "#07101B",
+            "secondaryDark": "#767F8D"
         },
         "text": {
             "primary": "#07101B",
@@ -37,7 +49,10 @@
             "700": "#3b4c5c",
             "300": "#697987",
             "200": "#697987",
-            "50": "#cfd9de"
+            "50": "#cfd9de",
+            "main": "linear-gradient(0deg, rgba(7, 16, 27, 0.3), rgba(7, 16, 27, 0.3)), #FFFFFF",
+            "main2": "linear-gradient(0deg, rgba(7, 16, 27, 0.2), rgba(7, 16, 27, 0.2)), #FFFFFF",
+            "main3": "linear-gradient(0deg, rgba(7, 16, 27, 0.05), rgba(7, 16, 27, 0.05)), #FFFFFF"
         },
         "text": {
             "primary": "#07101B",
@@ -46,6 +61,15 @@
             "buttonText": "#FFFFFF",
             "third": "#ACB4C1"
         },
+        "public": {
+            "primary": "#1C68F3",
+            "success": "#3DC233",
+            "warning": "#FFB100",
+            "danger": "#FF3545",
+            "white": "#ffffff",
+            "dark": "#07101B",
+            "secondaryDark": "#767F8D"
+        },
         "background": {
             "default": "#F9F9F9",
             "input": "#F2F6FA",
@@ -70,7 +94,19 @@
             "700": "#8899a6",
             "300": "#6b7d8c",
             "200": "#3d5466",
-            "50": "#253341"
+            "50": "#253341",
+            "main": "linear-gradient(0deg, rgba(245, 245, 245, 0.3), rgba(245, 245, 245, 0.3)), #000000",
+            "main2": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000",
+            "main3": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000"
+        },
+        "public": {
+            "primary": "#1C68F3",
+            "success": "#3DC233",
+            "warning": "#FFB100",
+            "danger": "#FF3545",
+            "white": "#ffffff",
+            "dark": "#07101B",
+            "secondaryDark": "#767F8D"
         },
         "text": {
             "primary": "#F5F5F5",
@@ -103,7 +139,19 @@
             "700": "#b8cbd9",
             "300": "#92a4b3",
             "200": "#697987",
-            "50": "#10171e"
+            "50": "#10171e",
+            "main": "linear-gradient(0deg, rgba(245, 245, 245, 0.3), rgba(245, 245, 245, 0.3)), #000000",
+            "main2": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000",
+            "main3": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000"
+        },
+        "public": {
+            "primary": "#1C68F3",
+            "success": "#3DC233",
+            "warning": "#FFB100",
+            "danger": "#FF3545",
+            "white": "#ffffff",
+            "dark": "#07101B",
+            "secondaryDark": "#767F8D"
         },
         "text": {
             "primary": "#F5F5F5",
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
index 872aed50431c..4793dcd787db 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
@@ -66,7 +66,6 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
             display: 'flex',
             alignItems: 'center',
             padding: '3px 16px',
-            borderBottom: `1px solid ${theme.palette.mode === 'dark' ? '#2f3336' : '#eff3f4'}`,
             '& > h2': {
                 display: 'inline-block',
                 whiteSpace: 'nowrap',
diff --git a/packages/mask/src/utils/theme/theme-global.d.ts b/packages/mask/src/utils/theme/theme-global.d.ts
index 389453dee8c7..8193e0d32f8e 100644
--- a/packages/mask/src/utils/theme/theme-global.d.ts
+++ b/packages/mask/src/utils/theme/theme-global.d.ts
@@ -1,6 +1,15 @@
 declare module '@mui/material/styles/createPalette.d' {
     export interface Palette {
         secondaryDivider: string
+        public: {
+            primary: string
+            success: string
+            warning: string
+            danger: string
+            white: string
+            dark: string
+            secondaryDark: string
+        }
     }
     export interface TypeText {
         third: string
@@ -20,4 +29,12 @@ declare module '@mui/material/styles/createPalette.d' {
         modalTitle: string
     }
 }
+
+declare module '@mui/material/index.d' {
+    export interface Color {
+        main: string
+        main2: string
+        main3: string
+    }
+}
 export {}
diff --git a/packages/mask/src/utils/theme/useSwapPageTheme.ts b/packages/mask/src/utils/theme/useSwapPageTheme.ts
index f03e10a0f54a..6b11cb4ada63 100644
--- a/packages/mask/src/utils/theme/useSwapPageTheme.ts
+++ b/packages/mask/src/utils/theme/useSwapPageTheme.ts
@@ -37,22 +37,6 @@ export function useSwapPageTheme() {
                 variant: 'contained',
             },
             variants: [
-                {
-                    props: { variant: 'sns' },
-                    style: {
-                        backgroundColor: theme.palette.primary.main,
-                        color: theme.palette.common.white,
-                        '&:hover': {
-                            backgroundColor: theme.palette.primary.dark,
-                            color: theme.palette.common.white,
-                        },
-                        '&.Mui-disabled': {
-                            opacity: 0.5,
-                            backgroundColor: theme.palette.primary.main,
-                            color: theme.palette.common.white,
-                        },
-                    },
-                },
                 {
                     props: { color: 'error' },
                     style: {
diff --git a/packages/shared/src/contexts/components/InjectedDialog.tsx b/packages/shared/src/contexts/components/InjectedDialog.tsx
index 7d8073b4e8c0..983e7c74bddd 100644
--- a/packages/shared/src/contexts/components/InjectedDialog.tsx
+++ b/packages/shared/src/contexts/components/InjectedDialog.tsx
@@ -26,7 +26,6 @@ interface StyleProps {
 const useStyles = makeStyles<StyleProps>()((theme, { clean }) => ({
     dialogTitle: {
         padding: theme.spacing(1, 2),
-        borderBottom: `1px solid ${theme.palette.divider}`,
     },
     dialogContent: {
         overscrollBehavior: 'contain',
diff --git a/packages/theme/src/extended.d.ts b/packages/theme/src/extended.d.ts
index 4596bfb6a581..f9e0d5a5518d 100644
--- a/packages/theme/src/extended.d.ts
+++ b/packages/theme/src/extended.d.ts
@@ -2,7 +2,10 @@ declare global {
     module '@mui/material/Button' {
         interface ButtonPropsVariantOverrides {
             rounded: true
-            sns: true
+            flat: true
+            roundedContained: true
+            roundedFlat: true
+            roundedText: true
         }
         interface ButtonPropsColorOverrides {
             warning: true

From 7f7b42be54d07bbf9fd24138be71c29ac0afb2da Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Thu, 21 Apr 2022 22:21:38 +0800
Subject: [PATCH 3/4] chore: reply review

---
 .../twitter.com/customization/custom.ts       | 12 +++++-----
 .../customization/twitter-color-schema.json   | 24 +++++++++----------
 .../mask/src/utils/theme/theme-global.d.ts    |  6 ++---
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
index a309d6381e57..7f008ea3454e 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
@@ -158,7 +158,7 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                             variant: 'flat',
                         },
                         style: {
-                            background: theme.palette.grey.main3,
+                            background: theme.palette.grey.primary,
                             color: theme.palette.text.primary,
                             ['&:hover']: {
                                 backgroundColor: theme.palette.background.paper,
@@ -186,7 +186,7 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                                     .toRgbString()}`,
                             },
                             [`&.${buttonClasses.disabled}`]: {
-                                background: theme.palette.grey.main,
+                                background: theme.palette.grey.primary,
                                 opacity: 0.6,
                                 color: theme.palette.background.paper,
                             },
@@ -199,7 +199,7 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                         style: {
                             color: theme.palette.text.primary,
                             ['&:hover']: {
-                                background: theme.palette.grey.main3,
+                                background: theme.palette.grey.primary,
                             },
                             [`&.${buttonClasses.disabled}`]: {
                                 opacity: 0.4,
@@ -461,7 +461,7 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                         },
                         style: {
                             borderRadius: 99,
-                            background: theme.palette.grey.main3,
+                            background: theme.palette.grey.primary,
                             color: theme.palette.text.primary,
                             ['&:hover']: {
                                 backgroundColor: theme.palette.background.paper,
@@ -490,7 +490,7 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                                     .toRgbString()}`,
                             },
                             [`&.${buttonClasses.disabled}`]: {
-                                background: theme.palette.grey.main,
+                                background: theme.palette.grey.primary,
                                 opacity: 0.6,
                                 color: theme.palette.background.paper,
                             },
@@ -504,7 +504,7 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                             color: theme.palette.text.primary,
                             borderRadius: 99,
                             ['&:hover']: {
-                                background: theme.palette.grey.main3,
+                                background: theme.palette.grey.primary,
                             },
                             [`&.${buttonClasses.disabled}`]: {
                                 opacity: 0.4,
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json b/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
index 4e4a63dfb82b..fbb85626f891 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
+++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
@@ -5,9 +5,9 @@
             "300": "#b9cad3",
             "200": "#cfd9de",
             "50": "#eff3f4",
-            "main": "linear-gradient(0deg, rgba(7, 16, 27, 0.3), rgba(7, 16, 27, 0.3)), #FFFFFF",
-            "main2": "linear-gradient(0deg, rgba(7, 16, 27, 0.2), rgba(7, 16, 27, 0.2)), #FFFFFF",
-            "main3": "linear-gradient(0deg, rgba(7, 16, 27, 0.05), rgba(7, 16, 27, 0.05)), #FFFFFF"
+            "primary": "linear-gradient(0deg, rgba(7, 16, 27, 0.3), rgba(7, 16, 27, 0.3)), #FFFFFF",
+            "secondary": "linear-gradient(0deg, rgba(7, 16, 27, 0.2), rgba(7, 16, 27, 0.2)), #FFFFFF",
+            "third": "linear-gradient(0deg, rgba(7, 16, 27, 0.05), rgba(7, 16, 27, 0.05)), #FFFFFF"
         },
         "public": {
             "primary": "#1C68F3",
@@ -50,9 +50,9 @@
             "300": "#697987",
             "200": "#697987",
             "50": "#cfd9de",
-            "main": "linear-gradient(0deg, rgba(7, 16, 27, 0.3), rgba(7, 16, 27, 0.3)), #FFFFFF",
-            "main2": "linear-gradient(0deg, rgba(7, 16, 27, 0.2), rgba(7, 16, 27, 0.2)), #FFFFFF",
-            "main3": "linear-gradient(0deg, rgba(7, 16, 27, 0.05), rgba(7, 16, 27, 0.05)), #FFFFFF"
+            "primary": "linear-gradient(0deg, rgba(7, 16, 27, 0.3), rgba(7, 16, 27, 0.3)), #FFFFFF",
+            "secondary": "linear-gradient(0deg, rgba(7, 16, 27, 0.2), rgba(7, 16, 27, 0.2)), #FFFFFF",
+            "third": "linear-gradient(0deg, rgba(7, 16, 27, 0.05), rgba(7, 16, 27, 0.05)), #FFFFFF"
         },
         "text": {
             "primary": "#07101B",
@@ -95,9 +95,9 @@
             "300": "#6b7d8c",
             "200": "#3d5466",
             "50": "#253341",
-            "main": "linear-gradient(0deg, rgba(245, 245, 245, 0.3), rgba(245, 245, 245, 0.3)), #000000",
-            "main2": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000",
-            "main3": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000"
+            "primary": "linear-gradient(0deg, rgba(245, 245, 245, 0.3), rgba(245, 245, 245, 0.3)), #000000",
+            "secondary": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000",
+            "third": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000"
         },
         "public": {
             "primary": "#1C68F3",
@@ -140,9 +140,9 @@
             "300": "#92a4b3",
             "200": "#697987",
             "50": "#10171e",
-            "main": "linear-gradient(0deg, rgba(245, 245, 245, 0.3), rgba(245, 245, 245, 0.3)), #000000",
-            "main2": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000",
-            "main3": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000"
+            "primary": "linear-gradient(0deg, rgba(245, 245, 245, 0.3), rgba(245, 245, 245, 0.3)), #000000",
+            "secondary": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000",
+            "third": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000"
         },
         "public": {
             "primary": "#1C68F3",
diff --git a/packages/mask/src/utils/theme/theme-global.d.ts b/packages/mask/src/utils/theme/theme-global.d.ts
index 8193e0d32f8e..7a2a91f7a578 100644
--- a/packages/mask/src/utils/theme/theme-global.d.ts
+++ b/packages/mask/src/utils/theme/theme-global.d.ts
@@ -32,9 +32,9 @@ declare module '@mui/material/styles/createPalette.d' {
 
 declare module '@mui/material/index.d' {
     export interface Color {
-        main: string
-        main2: string
-        main3: string
+        primary: string
+        second: string
+        third: string
     }
 }
 export {}

From b89ddd9d3e27d32081d1f1c4a55d1ebcd39a5db3 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Thu, 28 Apr 2022 14:55:53 +0800
Subject: [PATCH 4/4] feat: remove useless variant

---
 .../plugins/ITO/SNSAdaptor/PostInspector.tsx  | 11 ++++++++++-
 .../Snapshot/SNSAdaptor/PostInspector.tsx     | 15 ++++++++++-----
 .../Snapshot/SNSAdaptor/VotingCard.tsx        |  1 -
 .../twitter.com/customization/custom.ts       | 19 ++++++++-----------
 .../twitter.com/ui-provider.ts                |  3 +++
 .../src/utils/theme/useClassicMaskSNSTheme.ts | 16 ++++++++++++++++
 .../src/web3/UI/EthereumChainBoundary.tsx     |  8 +-------
 .../contexts/components/InjectedDialog.tsx    |  3 ++-
 8 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx
index 5c718b144fb7..c41277a9a927 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx
@@ -14,6 +14,8 @@ import { isCompactPayload } from './helpers'
 import { usePoolPayload } from './hooks/usePoolPayload'
 import type { JSON_PayloadInMask } from '../types'
 import { ITO, ITO_Error, ITO_Loading } from './ITO'
+import { useClassicMaskSNSPluginTheme } from '../../../utils'
+import { ThemeProvider } from '@mui/material'
 
 export interface PostInspectorProps {
     payload: JSON_PayloadInMask
@@ -92,5 +94,12 @@ export function PostInspector(props: PostInspectorProps) {
             />
         )
     }
-    return <EthereumChainBoundary chainId={chain_id}>{renderITO()}</EthereumChainBoundary>
+
+    const theme = useClassicMaskSNSPluginTheme()
+
+    return (
+        <ThemeProvider theme={theme}>
+            <EthereumChainBoundary chainId={chain_id}>{renderITO()}</EthereumChainBoundary>
+        </ThemeProvider>
+    )
 }
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/PostInspector.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/PostInspector.tsx
index 1ced6ab9b2a9..bafa7b3e8343 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/PostInspector.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/PostInspector.tsx
@@ -3,6 +3,8 @@ import { getProposalIdentifier } from './helpers'
 import { Snapshot } from './Snapshot'
 import { LoadingFailCard } from './LoadingFailCard'
 import { useRetry } from './hooks/useRetry'
+import { ThemeProvider } from '@mui/material'
+import { useClassicMaskSNSPluginTheme } from '../../../utils'
 
 export interface PostInspectorProps {
     url: string
@@ -11,11 +13,14 @@ export interface PostInspectorProps {
 export function PostInspector(props: PostInspectorProps) {
     const identifier = getProposalIdentifier(props.url)
     const retry = useRetry()
+    const theme = useClassicMaskSNSPluginTheme()
     return (
-        <SnapshotContext.Provider value={identifier}>
-            <LoadingFailCard title="" isFullPluginDown retry={retry}>
-                <Snapshot />
-            </LoadingFailCard>
-        </SnapshotContext.Provider>
+        <ThemeProvider theme={theme}>
+            <SnapshotContext.Provider value={identifier}>
+                <LoadingFailCard title="" isFullPluginDown retry={retry}>
+                    <Snapshot />
+                </LoadingFailCard>
+            </SnapshotContext.Provider>
+        </ThemeProvider>
     )
 }
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
index dbe8030aef39..afef896ffbf0 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
@@ -87,7 +87,6 @@ export function VotingCard() {
                 offChain>
                 <Button
                     className={classes.button}
-                    variant="contained"
                     disabled={choice === 0 || !account || !power}
                     onClick={() => setOpen(true)}>
                     {Boolean(power) && Boolean(account) ? t('plugin_snapshot_vote') : t('plugin_snapshot_no_power')}
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
index 7f008ea3454e..82a7f36db15f 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
@@ -100,19 +100,16 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                     root: {
                         background: theme.palette.background.input,
                     },
-                    input: {
-                        background: theme.palette.background.input,
-                    },
-                },
-            }
-            theme.components.MuiDialogTitle = {
-                styleOverrides: {
-                    root: {
-                        background: theme.palette.background.modalTitle,
-                        borderBottom: 'none',
-                    },
                 },
             }
+            // theme.components.MuiDialogTitle = {
+            //     styleOverrides: {
+            //         root: {
+            //             background: theme.palette.background.modalTitle,
+            //             borderBottom: 'none',
+            //         },
+            //     },
+            // }
             theme.components.MuiButton = {
                 defaultProps: {
                     size: 'medium',
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
index 3e895b524183..a4945eeb674a 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
@@ -65,6 +65,9 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
             display: 'flex',
             alignItems: 'center',
             padding: '3px 16px',
+            position: 'relative',
+            background: theme.palette.background.modalTitle,
+            borderBottom: 'none',
             '& > h2': {
                 display: 'inline-block',
                 whiteSpace: 'nowrap',
diff --git a/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts b/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts
index c1c0d2744c52..1c083fb4ec90 100644
--- a/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts
+++ b/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts
@@ -9,6 +9,7 @@ import { createSubscriptionFromValueRef } from '@masknet/shared-base'
 import { ValueRef } from '@dimensiondev/holoflows-kit'
 import { useValueRef } from '@masknet/shared-base-ui'
 import { languageSettings } from '../../settings/settings'
+import { cloneDeep, merge } from 'lodash-unified'
 
 const staticRef = createSubscriptionFromValueRef(new ValueRef('light'))
 const defaultUseTheme = (t: Theme) => t
@@ -26,3 +27,18 @@ export function useClassicMaskSNSTheme() {
     const theme = unstable_createMuiStrictModeTheme(baseTheme, localization)
     return usePostTheme(theme)
 }
+
+export function useClassicMaskSNSPluginTheme() {
+    const theme = useClassicMaskSNSTheme()
+    return unstable_createMuiStrictModeTheme(
+        merge(cloneDeep(theme), {
+            components: {
+                MuiButton: {
+                    defaultProps: {
+                        variant: 'roundedContained',
+                    },
+                },
+            },
+        }),
+    )
+}
diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
index c2ac6e140688..a7581e1721b0 100644
--- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
@@ -170,11 +170,7 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                     <span>{t('plugin_wallet_connect_wallet_tip')}</span>
                 </Typography>
                 {!props.hiddenConnectButton ? (
-                    <ActionButton
-                        variant="contained"
-                        size="small"
-                        sx={{ marginTop: 1.5 }}
-                        onClick={openSelectProviderDialog}>
+                    <ActionButton size="small" sx={{ marginTop: 1.5 }} onClick={openSelectProviderDialog}>
                         {t('plugin_wallet_connect_wallet')}
                     </ActionButton>
                 ) : null}
@@ -208,7 +204,6 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                 ) : null}
                 {isAllowed ? (
                     <ActionButtonPromise
-                        variant="contained"
                         size="small"
                         className={classes.switchButton}
                         sx={props.switchButtonStyle ?? { marginTop: 1.5 }}
@@ -249,7 +244,6 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
             ) : null}
             {isAllowed ? (
                 <ActionButtonPromise
-                    variant="contained"
                     size="small"
                     className={classes.switchButton}
                     sx={props.switchButtonStyle ?? { marginTop: 1.5 }}
diff --git a/packages/shared/src/contexts/components/InjectedDialog.tsx b/packages/shared/src/contexts/components/InjectedDialog.tsx
index eb02ecfc98b5..415dc11c7ae5 100644
--- a/packages/shared/src/contexts/components/InjectedDialog.tsx
+++ b/packages/shared/src/contexts/components/InjectedDialog.tsx
@@ -32,7 +32,8 @@ const useStyles = makeStyles<StyleProps>()((theme, { clean }) => ({
         overscrollBehavior: 'contain',
     },
     dialogTitleTypography: {
-        marginLeft: 6,
+        flex: 1,
+        textAlign: 'center',
         verticalAlign: 'middle',
     },
     dialogCloseButton: {