fix: color of some text on dark mode (#11045)

DimensionDev · Oct 27, 2023 · 75ee60a · 75ee60a
1 parent ce1f643
commit 75ee60a
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 81 deletions.
diff --git a/packages/icons/general/Lock.svg b/packages/icons/general/Lock.svg
diff --git a/packages/icons/icon-generated-as-jsx.js b/packages/icons/icon-generated-as-jsx.js
@@ -2235,11 +2235,35 @@ export const LocalBackup = /*#__PURE__*/ __createIcon('LocalBackup', [
         u: () => new URL('./general/LocalBackup.png', import.meta.url),
     },
 ])
-export const Lock = /*#__PURE__*/ __createIcon('Lock', [
-    {
-        u: () => new URL('./general/Lock.svg', import.meta.url),
-    },
-])
+export const Lock = /*#__PURE__*/ __createIcon(
+    'Lock',
+    [
+        {
+            u: () => new URL('./general/Lock.svg', import.meta.url),
+            j: () =>
+                /*#__PURE__*/ _jsx('svg', {
+                    xmlns: 'http://www.w3.org/2000/svg',
+                    fill: 'none',
+                    viewBox: '0 0 24 25',
+                    children: /*#__PURE__*/ _jsxs('g', {
+                        fill: 'currentColor',
+                        fillRule: 'evenodd',
+                        clipRule: 'evenodd',
+                        children: [
+                            /*#__PURE__*/ _jsx('path', {
+                                d: 'M7.748 5.01c-.697.866-.948 2.132-.948 3.74v2a.8.8 0 0 1-1.6 0v-2c0-1.704.25-3.438 1.302-4.744C7.585 2.662 9.363 1.95 12 1.95s4.416.713 5.498 2.057C18.55 5.312 18.8 7.046 18.8 8.75v2a.8.8 0 0 1-1.6 0v-2c0-1.607-.25-2.873-.948-3.74-.667-.828-1.889-1.46-4.252-1.46s-3.584.632-4.252 1.46zM12 15.05a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4zm-3.3 1.7a3.3 3.3 0 1 1 6.6 0 3.3 3.3 0 0 1-6.6 0z',
+                            }),
+                            /*#__PURE__*/ _jsx('path', {
+                                d: 'M3.566 12.315c-.496.495-.766 1.428-.766 3.434v2c0 2.006.27 2.939.766 3.434.495.496 1.428.766 3.434.766h10c2.006 0 2.939-.27 3.434-.766.496-.495.766-1.428.766-3.434v-2c0-2.006-.27-2.939-.765-3.434-.496-.496-1.43-.766-3.435-.766H7c-2.006 0-2.939.27-3.434.766zm-1.131-1.131C3.439 10.178 5.005 9.949 7 9.949h10c1.994 0 3.561.23 4.566 1.235 1.004 1.004 1.234 2.57 1.234 4.565v2c0 1.995-.23 3.562-1.234 4.566-1.005 1.004-2.572 1.234-4.566 1.234H7c-1.994 0-3.561-.23-4.565-1.234C1.43 21.31 1.2 19.743 1.2 17.749v-2c0-1.994.23-3.561 1.235-4.566z',
+                            }),
+                        ],
+                    }),
+                }),
+            s: true,
+        },
+    ],
+    [24, 25],
+)
 export const MaskAvatar = /*#__PURE__*/ __createIcon('MaskAvatar', [
     {
         c: ['dark'],

diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
@@ -271,7 +271,7 @@
     "export": "Export",
     "confirm_swap_risk": "Confirm swap risk",
     "wallet_load_retry": "Failed to load {{symbol}}. Click to retry.",
-    "wallet_name": "Wallet Name",
+    "name": "Name",
     "wallet_rename": "Rename Wallet",
     "wallet_loading_nft_contract": "Loading NFT contract...",
     "wallet_search_contract_no_result": "No results or contract address does not meet the query criteria.",
@@ -1138,7 +1138,7 @@
     "wallet_edit_contact_successfully": "Edit contact successfully.",
     "wallet_delete_contact": "Delete Contact",
     "wallet_delete_contact_successfully": "Delete contact successfully.",
-    "wallet_name_wallet": "Name your wallet",
+    "wallet_name": "Name your wallet",
     "wallet_account": "Wallet Account",
     "wallet_imported": "Imported",
     "scan_address_to_payment": "Scan QR code to receive payment",

diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
@@ -57,6 +57,7 @@ import Services from '#services'
 const useStyles = makeStyles()((theme) => ({
     root: {
         width: Sniffings.is_facebook_page ? 876 : 'auto',
+        color: theme.palette.maskColor.main,
     },
     container: {
         background:

diff --git a/packages/mask/src/extension/popups/modals/AddContactModal/index.tsx b/packages/mask/src/extension/popups/modals/AddContactModal/index.tsx
@@ -97,7 +97,7 @@ function AddContactDrawer({ onConfirm, address, name, setName, setAddress, ...re
             <EmojiAvatar value={address} className={classes.emojiAvatar} sx={{ width: 60, height: 60 }} />
             <MaskTextField
                 spellCheck={false}
-                placeholder={t('wallet_name_wallet')}
+                placeholder={t('name')}
                 className={classes.input}
                 value={name}
                 onChange={(ev) => {

diff --git a/packages/mask/src/extension/popups/modals/EditContactModal/index.tsx b/packages/mask/src/extension/popups/modals/EditContactModal/index.tsx
@@ -134,7 +134,7 @@ function EditContactDrawer({ onConfirm, address, name, setName, type, ...rest }:
                     inputProps={{ style: { textAlign: 'center' } }}
                     classes={{ root: classes.inputRoot }}
                     spellCheck={false}
-                    placeholder={t('wallet_name_wallet')}
+                    placeholder={t('name')}
                     className={classes.input}
                     value={name}
                     onChange={(ev) => {

diff --git a/packages/mask/src/extension/popups/pages/Settings/index.tsx b/packages/mask/src/extension/popups/pages/Settings/index.tsx
@@ -1,23 +1,24 @@
+import Services from '#services'
+import { env } from '@masknet/flags'
+import { Icons } from '@masknet/icons'
+import { Appearance, LanguageOptions } from '@masknet/public-api'
+import { DashboardRoutes, PopupModalRoutes, Sniffings } from '@masknet/shared-base'
+import { openWindow } from '@masknet/shared-base-ui'
+import { makeStyles } from '@masknet/theme'
+import { Box, List, ListItem, ListItemText, Typography, useTheme } from '@mui/material'
 import { memo, useCallback, useMemo } from 'react'
 import { Trans } from 'react-i18next'
-import { Box, List, ListItem, ListItemText, Typography, useTheme } from '@mui/material'
+import { UserContext, useAppearance, useLanguage } from '../../../../../shared-ui/index.js'
 import { useMaskSharedTrans } from '../../../../utils/i18n-next-ui.js'
-import { useTitle } from '../../hooks/useTitle.js'
-import { makeStyles } from '@masknet/theme'
-import { Icons } from '@masknet/icons'
 import { NormalHeader, useModalNavigate } from '../../components/index.js'
-import { env } from '@masknet/flags'
-import { UserContext, useAppearance, useLanguage } from '../../../../../shared-ui/index.js'
-import { Appearance, LanguageOptions } from '@masknet/public-api'
-import { openWindow } from '@masknet/shared-base-ui'
-import { DashboardRoutes, PopupModalRoutes, Sniffings } from '@masknet/shared-base'
 import { useSupportedSites } from '../../hooks/useSupportedSites.js'
-import Services from '#services'
+import { useTitle } from '../../hooks/useTitle.js'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
         padding: theme.spacing(2),
         flex: 1,
+        paddingBottom: 80,
         overflow: 'auto',
         display: 'flex',
         flexDirection: 'column',

diff --git a/packages/plugins/NextID/src/components/Actions/index.tsx b/packages/plugins/NextID/src/components/Actions/index.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { makeStyles } from '@masknet/theme'
-import { Button, Stack, Typography } from '@mui/material'
+import { Button, Stack, Typography, useTheme } from '@mui/material'
 import { Icons } from '@masknet/icons'
 import { useNextID_Trans } from '../../locales/index.js'
 import { PersonaSelectPanel } from '@masknet/shared'
@@ -64,11 +64,11 @@ interface AddWalletPersonaActionProps {
 
 export const AddWalletPersonaAction = memo<AddWalletPersonaActionProps>(({ onAddWallet }) => {
     const t = useNextID_Trans()
-    const { classes } = useStyles()
+    const { classes, theme } = useStyles()
     return (
         <>
             <Stack flex={1} px={1.25} justifyContent="flex-start" width="100%" boxSizing="border-box">
-                <Typography fontWeight={400} fontSize={14}>
+                <Typography fontWeight={400} fontSize={14} color={theme.palette.maskColor.second}>
                     {t.add_wallet_intro()}
                 </Typography>
             </Stack>
@@ -84,9 +84,10 @@ export const AddWalletPersonaAction = memo<AddWalletPersonaActionProps>(({ onAdd
 
 export const OtherLackWalletAction = memo(() => {
     const t = useNextID_Trans()
+    const theme = useTheme()
     return (
         <Stack justifyContent="center" alignItems="center" flex={1}>
-            <Typography fontWeight={400} fontSize={14}>
+            <Typography fontWeight={400} fontSize={14} color={theme.palette.maskColor.second}>
                 {t.others_lack_wallet()}
             </Typography>
         </Stack>

diff --git a/packages/plugins/NextID/src/components/NextIdPage.tsx b/packages/plugins/NextID/src/components/NextIdPage.tsx
@@ -81,11 +81,11 @@ export const NextIdPage = memo(function NextIdPage() {
 
     return (
         <>
-            <PluginCardFrameMini>
-                <ThemeProvider theme={MaskLightTheme}>
+            <ThemeProvider theme={MaskLightTheme}>
+                <PluginCardFrameMini>
                     <PluginEnableBoundary pluginID={PluginID.Web3Profile}>{ActionComponent}</PluginEnableBoundary>
-                </ThemeProvider>
-            </PluginCardFrameMini>
+                </PluginCardFrameMini>
+            </ThemeProvider>
             {openBindDialog && currentPersona && isOwn ? (
                 <BindDialog
                     open={openBindDialog}

diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
@@ -1,17 +1,24 @@
-import { useContext } from 'react'
-import Color from 'color'
-import { Box, Tab, Avatar, Typography, Chip } from '@mui/material'
-import { makeStyles, MaskTabList, ShadowRootTooltip, TextOverflowTooltip, useTabs } from '@masknet/theme'
-import { SnapshotContext } from '../context.js'
-import { useProposal } from './hooks/useProposal.js'
-import { ProposalTab } from './ProposalTab.js'
-import { ProgressTab } from './ProgressTab.js'
 import { ChainBoundary } from '@masknet/shared'
-import { useChainContext } from '@masknet/web3-hooks-base'
 import { NetworkPluginID } from '@masknet/shared-base'
+import {
+    MaskLightTheme,
+    MaskTabList,
+    ShadowRootTooltip,
+    TextOverflowTooltip,
+    makeStyles,
+    useTabs,
+} from '@masknet/theme'
+import { useChainContext } from '@masknet/web3-hooks-base'
 import { resolveIPFS_URL } from '@masknet/web3-shared-base'
 import { TabContext, TabPanel } from '@mui/lab'
+import { Avatar, Box, Chip, Tab, ThemeProvider, Typography } from '@mui/material'
+import Color from 'color'
+import { useContext } from 'react'
+import { SnapshotContext } from '../context.js'
 import { useSnapshotTrans } from '../locales/index.js'
+import { ProgressTab } from './ProgressTab.js'
+import { ProposalTab } from './ProposalTab.js'
+import { useProposal } from './hooks/useProposal.js'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -101,57 +108,63 @@ export function Snapshot() {
         <TabContext value={currentTab}>
             <Box className={classes.header}>
                 <Avatar src={resolveIPFS_URL(proposal.space.avatar)} className={classes.avatar} />
-                <Box className={classes.title}>
-                    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                        <TextOverflowTooltip
-                            as={ShadowRootTooltip}
+                <ThemeProvider theme={MaskLightTheme}>
+                    <Box className={classes.title}>
+                        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                            <TextOverflowTooltip
+                                as={ShadowRootTooltip}
+                                PopperProps={{
+                                    disablePortal: true,
+                                }}
+                                title={
+                                    <Typography fontSize={18} fontWeight="bold">
+                                        {proposal.space.name}
+                                    </Typography>
+                                }
+                                placement="top"
+                                classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
+                                arrow>
+                                <Typography
+                                    fontSize={18}
+                                    fontWeight="bold"
+                                    color={theme.palette.maskColor.publicMain}
+                                    sx={{
+                                        width: 150,
+                                        whiteSpace: 'nowrap',
+                                        textOverflow: 'ellipsis',
+                                        overflow: 'hidden',
+                                    }}>
+                                    {proposal.space.name}
+                                </Typography>
+                            </TextOverflowTooltip>
+                            <Box sx={{ display: 'flex' }} color={theme.palette.maskColor.publicSecond}>
+                                <Typography fontSize={14} sx={{ paddingRight: 1 }}>
+                                    by
+                                </Typography>
+                                <Typography fontSize={14} fontWeight="700">
+                                    {proposal.space.id}
+                                </Typography>
+                            </Box>
+                        </Box>
+
+                        <ShadowRootTooltip
                             PopperProps={{
                                 disablePortal: true,
                             }}
-                            title={
-                                <Typography fontSize={18} fontWeight="bold">
-                                    {proposal.space.name}
-                                </Typography>
-                            }
+                            title={<Typography className={classes.shadowRootTooltip}>{proposal.title}</Typography>}
                             placement="top"
                             classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
                             arrow>
-                            <Typography
-                                fontSize={18}
-                                fontWeight="bold"
-                                sx={{ width: 150, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>
-                                {proposal.space.name}
-                            </Typography>
-                        </TextOverflowTooltip>
-                        <Box sx={{ display: 'flex' }}>
                             <Typography
                                 fontSize={14}
-                                sx={{ paddingRight: 1 }}
-                                color={theme.palette.maskColor.publicSecond}>
-                                by
-                            </Typography>
-                            <Typography fontSize={14} fontWeight="700">
-                                {proposal.space.id}
+                                fontWeight="700"
+                                color={theme.palette.maskColor.publicSecond}
+                                sx={{ width: 300, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>
+                                {proposal.title}
                             </Typography>
-                        </Box>
+                        </ShadowRootTooltip>
                     </Box>
-
-                    <ShadowRootTooltip
-                        PopperProps={{
-                            disablePortal: true,
-                        }}
-                        title={<Typography className={classes.shadowRootTooltip}>{proposal.title}</Typography>}
-                        placement="top"
-                        classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
-                        arrow>
-                        <Typography
-                            fontSize={14}
-                            fontWeight="700"
-                            sx={{ width: 300, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>
-                            {proposal.title}
-                        </Typography>
-                    </ShadowRootTooltip>
-                </Box>
+                </ThemeProvider>
                 <Box>
                     <Chip
                         className={proposal.status === 'Active' ? classes.active : classes.default}

diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx
@@ -104,7 +104,7 @@ function Content() {
                 </Badge>
             }>
             <List className={classes.list}>
-                {votes.map(function voteItemIter(v) {
+                {votes?.map(function voteItemIter(v) {
                     const isAverageWeight = v.choices?.every((c) => c.weight === 1)
                     const fullChoiceText =
                         v.totalWeight && v.choices

diff --git a/packages/shared/src/UI/components/PluginCardFrame/index.tsx b/packages/shared/src/UI/components/PluginCardFrame/index.tsx
@@ -10,6 +10,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        color: theme.palette.maskColor.main,
     },
     container: {
         background:

diff --git a/packages/shared/src/UI/components/ProfileTabContent/ProfileTab/WalletSettingEntry.tsx b/packages/shared/src/UI/components/ProfileTabContent/ProfileTab/WalletSettingEntry.tsx
@@ -22,12 +22,12 @@ function openWeb3ProfileSettingDialog() {
 }
 export const WalletSettingEntry = memo(function WalletSettingEntry() {
     const t = useSharedTrans()
-    const { classes } = useStyles()
+    const { classes, theme } = useStyles()
 
     return (
         <>
             <Stack flex={1}>
-                <Typography fontWeight={400} fontSize={14}>
+                <Typography fontWeight={400} fontSize={14} color={theme.palette.maskColor.second}>
                     {t.show_wallet_setting_intro()}
                 </Typography>
             </Stack>