fix: dashboard cloud backup ui changes

packages/dashboard/src/components/LoadingButton/index.tsx

@@ -1,36 +1,34 @@
 import { getMaskColor, makeStyles, MaskLoadingButton } from '@masknet/theme'
 import { memo } from 'react'
-import { ButtonProps, Stack } from '@mui/material'
 import { LoadingAnimation } from '@masknet/shared'
+import classNames from 'classnames'
+import type { LoadingButtonProps } from '@mui/lab'
 
-interface LoadingButtonProps extends ButtonProps {
+interface DashboardLoadingButtonProps extends LoadingButtonProps {
     onClick(event: React.MouseEvent<HTMLButtonElement>): Promise<unknown>
 }
 const useStyles = makeStyles()((theme) => ({
     icon: {
         color: getMaskColor(theme).white,
         width: '100%',
     },
+    loadingButtonOverride: {
+        opacity: '1 !important',
+    },
 }))
 
-export const LoadingButton = memo<LoadingButtonProps>((props) => {
+export const LoadingButton = memo<DashboardLoadingButtonProps>((props) => {
     const { onClick, children, ...rest } = props
     const { classes } = useStyles()
     return (
         <MaskLoadingButton
-            classes={{
-                loadingIndicator: classes.icon,
-            }}
+            className={classNames(classes.icon, props.loading ? classes.loadingButtonOverride : '')}
             variant="contained"
+            loadingPosition="end"
             soloLoading={false}
-            loadingIndicator={
-                <Stack width="100%" direction="row" alignItems="center" gap={1} justifyContent="center">
-                    {children}
-                    <LoadingAnimation sx={{ fontSize: 18 }} />
-                </Stack>
-            }
-            {...rest}
-            onClick={onClick}>
+            loadingIndicator={<LoadingAnimation />}
+            onClick={onClick}
+            {...rest}>
             {children}
         </MaskLoadingButton>
     )

packages/dashboard/src/components/Restore/BackupInfoCard.tsx

@@ -3,12 +3,22 @@ import { Box, Card, Grid, Stack, Typography } from '@mui/material'
 import formatDateTime from 'date-fns/format'
 import fromUnixTime from 'date-fns/fromUnixTime'
 import type { BackupFileInfo } from '../../pages/Settings/type'
+import Tooltip from '@mui/material/Tooltip'
 
 interface BackupInfoProps {
     info: BackupFileInfo
 }
 
 export const BackupInfoCard = memo(({ info }: BackupInfoProps) => {
+    const economizeAbstract = (str: string) => {
+        if (!str.length) return <div>error</div>
+        if (str.length < 30) return <div>{str}</div>
+        return (
+            <Tooltip title={str} placement="top" arrow>
+                <div>{str.substr(0, 30) + '...' + '(' + str.split(',').length + ')'}</div>
+            </Tooltip>
+        )
+    }
     return (
         <Card variant="background">
             <Grid
@@ -20,7 +30,7 @@ export const BackupInfoCard = memo(({ info }: BackupInfoProps) => {
                 sx={{ padding: '8px' }}>
                 <Grid item xs={10}>
                     <Stack spacing={1}>
-                        <Typography variant="body2">{info.abstract}</Typography>
+                        <Typography variant="body2">{economizeAbstract(info.abstract)}</Typography>
                         <Typography variant="body2">
                             {formatDateTime(fromUnixTime(info.uploadedAt), 'yyyy-MM-dd HH:mm')}
                         </Typography>

packages/dashboard/src/locales/en-US.json

@@ -283,8 +283,10 @@
     "settings_dialogs_current_phone_validation": "The current phone number for verification is",
     "settings_dialogs_change_phone_validation": "To change the phone number, you need to verify your current phone number:",
     "settings_dialogs_backup_to_cloud": "Backup to cloud",
-    "settings_dialogs_merge_to_local_data": "Merge Cloud backup to local and backup to cloud",
+    "settings_dialogs_merge_to_local_data": "Merge Cloud backup to local and back up to cloud",
     "settings_dialogs_backup_action_desc": "There is already a cloud backup, please merge the cloud backup to local before you back up, or back up directly.",
+    "settings_dialogs_backup_to_cloud_action": "This option overwrites the existing cloud backup with the local data.",
+    "settings_dialogs_backup_merge_cloud": "This option requires you to enter the password of the existing cloud backup for decryption. The existing cloud backup and local data are combined and then encrypted and uploaded to cloud.",
     "settings_dialogs_backup_merged_tip": "You already obtained the cloud backup to your local. If you want to complete your back up, please click on the backup button to update all your data to cloud.",
     "settings_label_backup_password": "Backup Password",
     "settings_label_new_backup_password": "New Backup Password",

packages/dashboard/src/locales/zh-CN.json

@@ -285,6 +285,8 @@
     "settings_dialogs_backup_to_cloud": "备份至云端",
     "settings_dialogs_merge_to_local_data": "将云端备份合并到本地并再次备份到云端",
     "settings_dialogs_backup_action_desc": "云端备份已存在， 您可以选择在备份之前先合并此云端备份到您的本地数据，或者直接覆盖重新备份。",
+    "settings_dialogs_backup_to_cloud_action": "选择此选项会使用本地文件覆盖云端已存在备份.",
+    "settings_dialogs_backup_merge_cloud": "选择此选项会要求输入已存储云端文件密码进行解密.将云端备份和本地备份合并后加密上传.",
     "settings_dialogs_backup_merged_tip": "您已经合并云端备份到本地. 如果您想要继续完成备份，请点击备份按钮将您的所有数据更新到云端。",
     "settings_label_backup_password": "备份密码",
     "settings_label_new_backup_password": "新备份密码",

packages/dashboard/src/pages/Settings/components/dialogs/BackupDialog.tsx

@@ -6,7 +6,7 @@ import { useDashboardI18N } from '../../../../locales'
 import { MaskDialog, useCustomSnackbar } from '@masknet/theme'
 import { Box } from '@mui/material'
 import { UserContext } from '../../hooks/UserContext'
-import LoadingButton from '@mui/lab/LoadingButton'
+import { LoadingButton } from '../../../../components/LoadingButton'
 import { fetchUploadLink, uploadBackupValue, VerifyCodeRequest } from '../../api'
 import formatDateTime from 'date-fns/format'
 import { LoadingCard } from '../../../../components/Restore/steps/LoadingCard'
@@ -148,12 +148,7 @@ export default function BackupDialog({ local = true, params, open, merged, onClo
                         />
                     ) : null}
 
-                    <LoadingButton
-                        fullWidth
-                        disabled={backupDisabled}
-                        onClick={handleBackup}
-                        loading={loading}
-                        variant="contained">
+                    <LoadingButton fullWidth disabled={backupDisabled} onClick={handleBackup} loading={loading}>
                         {t.settings_button_backup()}
                     </LoadingButton>
                 </Box>

packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupMergeDialog.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { MaskColorVar, MaskDialog, useCustomSnackbar } from '@masknet/theme'
 import { Box, FormControlLabel, formControlLabelClasses, Radio, RadioGroup, styled, Typography } from '@mui/material'
-import LoadingButton from '@mui/lab/LoadingButton'
 import { BackupInfoCard } from '../../../../components/Restore/BackupInfoCard'
 import type { BackupFileInfo } from '../../type'
 import { useDashboardI18N } from '../../../../locales'
@@ -11,11 +10,13 @@ import { useAsyncFn } from 'react-use'
 import { decryptBackup } from '@masknet/backup-format'
 import { decode, encode } from '@msgpack/msgpack'
 import PasswordField from '../../../../components/PasswordField'
+import { makeStyles } from '@masknet/theme'
+import { LoadingButton } from '../../../../components/LoadingButton'
 
 const StyledFormControlLabel = styled(FormControlLabel)({
     [`&.${formControlLabelClasses.root}`]: {
         background: MaskColorVar.lightBackground,
-        margin: '0 0 16px',
+        margin: '0',
         padding: '2px 0',
         borderRadius: 8,
     },
@@ -24,6 +25,14 @@ const StyledFormControlLabel = styled(FormControlLabel)({
     },
 })
 
+const useStyles = makeStyles()(() => ({
+    helpContent: {
+        fontSize: '13px',
+        padding: '12px 0',
+        color: MaskColorVar.textSecondary,
+    },
+}))
+
 export interface CloudBackupMergeDialogProps {
     account: string
     info: BackupFileInfo
@@ -38,7 +47,7 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
     const [incorrectBackupPassword, setIncorrectBackupPassword] = useState(false)
     const t = useDashboardI18N()
     const { showSnackbar } = useCustomSnackbar()
-
+    const { classes } = useStyles()
     const restoreCallback = useCallback(() => {
         onMerged(true)
         showSnackbar(t.settings_alert_merge_success(), { variant: 'success' })
@@ -60,13 +69,14 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
                 }
 
                 restoreCallback()
+                setBackupPassword('')
             }
         } catch (error) {
             setIncorrectBackupPassword(true)
         }
     }, [backupPassword, account, info])
 
-    const onBackup = () => {
+    const onBackup = async () => {
         if (mode === '1') {
             onMerged(false)
         } else {
@@ -86,16 +96,17 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
         <MaskDialog maxWidth="xs" title={t.settings_cloud_backup()} open={open} onClose={onClose}>
             <Box sx={{ padding: '0 24px 24px' }}>
                 <BackupInfoCard info={info} />
-                <Typography sx={{ fontSize: '13px', padding: '24px 0' }}>
-                    {t.settings_dialogs_backup_action_desc()}
-                </Typography>
 
                 <RadioGroup aria-label="mode" name="mode" value={mode} onChange={(e) => setMode(e.target.value)}>
                     <StyledFormControlLabel
                         value="1"
                         control={<Radio size="small" />}
                         label={t.settings_dialogs_backup_to_cloud()}
+                        style={{ marginTop: '24px' }}
                     />
+                    <Typography className={classes.helpContent}>
+                        {t.settings_dialogs_backup_to_cloud_action()}
+                    </Typography>
                     <StyledFormControlLabel
                         sx={{ fontSize: 14 }}
                         value="2"
@@ -106,22 +117,17 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
 
                 {mode === '2' ? (
                     <PasswordField
+                        sx={{ marginTop: '12px' }}
                         fullWidth
                         value={backupPassword}
                         onChange={(event) => setBackupPassword(event.target.value)}
                         placeholder={t.settings_label_backup_password_cloud()}
-                        sx={{ marginBottom: '24px' }}
                         error={incorrectBackupPassword}
                         helperText={incorrectBackupPassword ? t.settings_dialogs_incorrect_password() : ''}
                     />
                 ) : null}
-
-                <LoadingButton
-                    fullWidth
-                    onClick={onBackup}
-                    loading={loading}
-                    disabled={incorrectBackupPassword}
-                    variant="contained">
+                <Typography className={classes.helpContent}>{t.settings_dialogs_backup_merge_cloud()}</Typography>
+                <LoadingButton fullWidth onClick={onBackup} loading={loading} disabled={incorrectBackupPassword}>
                     {t.settings_button_backup()}
                 </LoadingButton>
             </Box>

packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupVerifyDialog.tsx

@@ -5,7 +5,7 @@ import { useState, useContext, useMemo, useEffect } from 'react'
 import { UserContext } from '../../hooks/UserContext'
 import { fetchDownloadLink, sendCode, useLanguage, VerifyCodeRequest } from '../../api'
 import { BackupFileInfo, AccountType, Scenario, Locale } from '../../type'
-import { LoadingButton } from '@mui/lab'
+import { LoadingButton } from '../../../../components/LoadingButton'
 import { useAsyncFn } from 'react-use'
 
 export interface VerifyNextData {
@@ -94,12 +94,7 @@ export function CloudBackupVerifyDialog({ open, onClose, onNext }: CloudBackupVe
                     </CountdownButton>
                 </Box>
 
-                <LoadingButton
-                    fullWidth
-                    sx={{ marginTop: '24px' }}
-                    onClick={handleNext}
-                    loading={loading}
-                    variant="contained">
+                <LoadingButton fullWidth sx={{ marginTop: '24px' }} onClick={handleNext} loading={loading}>
                     {t.next()}
                 </LoadingButton>
             </Box>