fix: mf-6352 adjust check security dialog (#11926)

* fix: mf-6352 adjust check security dialog

* fix: mf-5983 add missing i18n

packages/mask/dashboard/pages/CreateMaskWallet/Recovery/index.tsx

@@ -236,9 +236,13 @@ export const Component = memo(function Recovery() {
                     <TabContext value={currentTab}>
                         <div className={classes.tabList}>
                             <MaskTabList variant="base" onChange={onTabChange} aria-label="Recovery Methods">
-                                <Tab className={classes.tab} label="Mnemonic" value={tabs.mnemonic} />
-                                <Tab className={classes.tab} label="Private Key" value={tabs.privateKey} />
-                                <Tab className={classes.tab} label="Keystore" value={tabs.local} />
+                                <Tab className={classes.tab} label={<Trans>Mnemonic</Trans>} value={tabs.mnemonic} />
+                                <Tab
+                                    className={classes.tab}
+                                    label={<Trans>Private Key</Trans>}
+                                    value={tabs.privateKey}
+                                />
+                                <Tab className={classes.tab} label={<Trans>Keystore</Trans>} value={tabs.local} />
                             </MaskTabList>
                         </div>
                         <div className={classes.panelContainer}>

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

@@ -27,6 +27,8 @@ const useStyles = makeStyles()((theme) => ({
         flexDirection: 'column',
     },
     footer: {
+        height: 56,
+        boxSizing: 'border-box',
         boxShadow:
             theme.palette.mode === 'light' ?
                 '0px 0px 20px rgba(0, 0, 0, 0.05)'

packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/Footer.tsx

@@ -1,7 +1,7 @@
+import { Trans } from '@lingui/macro'
 import { Box, Link, Stack, Typography } from '@mui/material'
-import { GoPlusLabLogo } from '../icons/Logo.js'
 import { PLUGIN_OFFICIAL_WEBSITE } from '../../constants.js'
-import { Trans } from '@lingui/macro'
+import { GoPlusLabLogo } from '../icons/Logo.js'
 
 export function Footer() {
     return (

packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx

@@ -1,12 +1,11 @@
 import { Trans, t } from '@lingui/macro'
-import { Icons } from '@masknet/icons'
 import { WalletIcon, useMenuConfig } from '@masknet/shared'
 import { MaskTextField, makeStyles } from '@masknet/theme'
 import { EVMChainResolver } from '@masknet/web3-providers'
 import type { SecurityAPI } from '@masknet/web3-providers/types'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material'
-import { Box, Button, InputAdornment, MenuItem, Stack, Typography } from '@mui/material'
+import { Box, Button, MenuItem, Stack, Typography } from '@mui/material'
 import { memo, useState } from 'react'
 import { useSupportedChains } from '../hooks/useSupportedChains.js'
 
@@ -53,7 +52,7 @@ function getChainName(chain?: SecurityAPI.SupportedChain<ChainId>) {
     return EVMChainResolver.chainName(chain.chainId) ?? chain.name
 }
 
-export const SearchBox = memo<SearchBoxProps>(({ onSearch }) => {
+export const SearchBox = memo<SearchBoxProps>(function SearchBox({ onSearch }) {
     const { classes } = useStyles()
     const [selectedChain, setSelectedChain] = useState<
         SecurityAPI.SupportedChain<ChainId> & {
@@ -120,11 +119,6 @@ export const SearchBox = memo<SearchBoxProps>(({ onSearch }) => {
                         onChange={(e) => setSearchSearchContent(e.target.value)}
                         InputProps={{
                             classes: { root: classes.search },
-                            startAdornment: (
-                                <InputAdornment position="start">
-                                    <Icons.Search />
-                                </InputAdornment>
-                            ),
                         }}
                     />
                 </Box>

packages/shared/src/UI/modals/ConfirmDialog/index.tsx

@@ -4,6 +4,7 @@ import { useState, type ReactNode, memo } from 'react'
 import type { SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
+import { Trans } from '@lingui/macro'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
@@ -55,8 +56,8 @@ interface ConfirmDialogProps extends Omit<DialogProps, 'title' | 'onSubmit' | 'o
     title?: ReactNode
     message?: ReactNode | string
     description?: ReactNode | string
-    confirmLabel?: string
-    cancelLabel?: string
+    confirmLabel?: ReactNode
+    cancelLabel?: ReactNode
     /** Change color of confirm button */
     confirmVariant?: 'error' | 'warning'
     onConfirm(): void
@@ -68,8 +69,8 @@ const Dialog = memo(function Dialog({
     title,
     message,
     description,
-    confirmLabel = 'Confirm',
-    cancelLabel = 'Cancel',
+    confirmLabel,
+    cancelLabel,
     confirmVariant = 'error',
     onConfirm,
     onClose,
@@ -91,14 +92,14 @@ const Dialog = memo(function Dialog({
                 </Typography>
                 <Box className={classes.buttonGroup}>
                     <ActionButton fullWidth variant="roundedOutlined" onClick={() => onClose?.()}>
-                        {cancelLabel}
+                        {cancelLabel ?? <Trans>Cancel</Trans>}
                     </ActionButton>
                     <ActionButton
                         fullWidth
                         variant="roundedContained"
                         color={confirmVariant}
                         onClick={() => onConfirm()}>
-                        {confirmLabel}
+                        {confirmLabel ?? <Trans>Confirm</Trans>}
                     </ActionButton>
                 </Box>
             </DialogContent>