fix: add variant: constained to some buttons

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

@@ -21,6 +21,7 @@ export const LoadingButton = memo<LoadingButtonProps>((props) => {
             classes={{
                 loadingIndicator: classes.icon,
             }}
+            variant="contained"
             soloLoading={false}
             loadingIndicator={
                 <Stack width="100%" direction="row" alignItems="center" gap={1} justifyContent="center">

packages/dashboard/src/pages/Personas/components/ContactTableRow/index.tsx

@@ -97,7 +97,7 @@ export interface ContactTableRowUIProps {
     theme: 'light' | 'dark'
 }
 
-const SPACE_CODEPOINT = ' '.codePointAt(0)!
+const SPACE_POINT = ' '.codePointAt(0)!
 export const ContactTableRowUI = memo<ContactTableRowUIProps>(
     ({ contact, index, handleClickStar, handleClickInvite, theme, loading }) => {
         const t = useDashboardI18N()
@@ -130,8 +130,8 @@ export const ContactTableRowUI = memo<ContactTableRowUIProps>(
                                     height: 48,
                                 }}>
                                 {/* To support emoji */}
-                                {String.fromCodePoint(first.codePointAt(0) || SPACE_CODEPOINT)}
-                                {String.fromCodePoint((last || '').codePointAt(0) || SPACE_CODEPOINT)}
+                                {String.fromCodePoint(first.codePointAt(0) || SPACE_POINT)}
+                                {String.fromCodePoint((last || '').codePointAt(0) || SPACE_POINT)}
                             </Avatar>
                             {contact.fingerprint ? <MaskBlueIcon className={classes.maskIcon} /> : null}
                         </Box>
@@ -147,6 +147,7 @@ export const ContactTableRowUI = memo<ContactTableRowUIProps>(
                             loading={loading}
                             color="secondary"
                             size="small"
+                            variant="contained"
                             className={classes.button}
                             onClick={handleClickInvite}>
                             {t.personas_contacts_invite()}

packages/dashboard/src/pages/Personas/components/ContactsTable/index.tsx

@@ -1,10 +1,9 @@
 import { Dispatch, memo, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { useContacts } from '../../hooks/useContacts'
 import type { RelationProfile } from '@masknet/shared'
-import { Table, TableContainer, TableBody, Box, TablePagination, Stack } from '@mui/material'
+import { TableContainer, Box, TablePagination, Stack, Table, TableBody } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { MaskColorVar } from '@masknet/theme'
-import { ContactTableRow } from '../ContactTableRow'
 import { EmptyContactPlaceholder } from '../EmptyContactPlaceholder'
 import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder'
 import { sortBy } from 'lodash-unified'
@@ -14,11 +13,13 @@ import { useContainer } from 'unstated-next'
 import { PersonaContext } from '../../hooks/usePersonaContext'
 import { useUpdateEffect } from 'react-use'
 import { RelationFavor } from '@masknet/shared'
+import { ContactTableRow } from '../ContactTableRow'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
+        height: '100%',
     },
     header: {
         color: MaskColorVar.normalText,

packages/dashboard/src/pages/Personas/components/LogoutPersonaDialog/index.tsx

@@ -8,7 +8,7 @@ import { PersonaContext } from '../../hooks/usePersonaContext'
 import { useNavigate } from 'react-router-dom'
 import { RoutePaths } from '../../../../type'
 import { WarningIcon } from '@masknet/icons'
-import { LoadingButton } from '../../../../components/LoadingButton'
+import { LoadingButton } from '@mui/lab'
 
 const useStyles = makeStyles()((theme) => ({
     svg: {
@@ -30,7 +30,6 @@ export const LogoutPersonaDialog = memo<LogoutPersonaDialogProps>(({ open, onClo
     const { classes } = useStyles()
     const { showSnackbar } = useCustomSnackbar()
     const { changeCurrentPersona } = PersonaContext.useContainer()
-
     const handleLogout = useCallback(async () => {
         await Services.Identity.logoutPersona(identifier)
         const lastCreatedPersona = await Services.Identity.queryLastPersonaCreated()
@@ -61,7 +60,7 @@ export const LogoutPersonaDialog = memo<LogoutPersonaDialogProps>(({ open, onClo
                 <Button color="secondary" onClick={onClose} sx={{ minWidth: 150 }}>
                     {t.personas_cancel()}
                 </Button>
-                <LoadingButton color="error" onClick={handleLogout} sx={{ minWidth: 150 }}>
+                <LoadingButton color="error" onClick={handleLogout} sx={{ minWidth: 150 }} variant="contained">
                     {t.personas_logout()}
                 </LoadingButton>
             </DialogActions>

packages/dashboard/src/pages/Personas/index.tsx

@@ -83,7 +83,7 @@ function Personas() {
                 <Paper variant="rounded" className={classes.personaCard}>
                     <PersonaRowCard />
                 </Paper>
-                <ContentContainer style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+                <ContentContainer style={{ display: 'flex', flexDirection: 'column' }}>
                     <TabContext value={activeTab}>
                         <Tabs value={!!activeTab ? activeTab : false} onChange={(event, tab) => setActiveTab(tab)}>
                             {definedSocialNetworks.map(({ networkIdentifier }) => (

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

@@ -148,7 +148,12 @@ export default function BackupDialog({ local = true, params, open, merged, onClo
                         />
                     ) : null}
 
-                    <LoadingButton fullWidth disabled={backupDisabled} onClick={handleBackup} loading={loading}>
+                    <LoadingButton
+                        fullWidth
+                        disabled={backupDisabled}
+                        onClick={handleBackup}
+                        loading={loading}
+                        variant="contained">
                         {t.settings_button_backup()}
                     </LoadingButton>
                 </Box>

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

@@ -116,7 +116,12 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
                     />
                 ) : null}
 
-                <LoadingButton fullWidth onClick={onBackup} loading={loading} disabled={incorrectBackupPassword}>
+                <LoadingButton
+                    fullWidth
+                    onClick={onBackup}
+                    loading={loading}
+                    disabled={incorrectBackupPassword}
+                    variant="contained">
                     {t.settings_button_backup()}
                 </LoadingButton>
             </Box>

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

@@ -94,7 +94,12 @@ export function CloudBackupVerifyDialog({ open, onClose, onNext }: CloudBackupVe
                     </CountdownButton>
                 </Box>
 
-                <LoadingButton fullWidth sx={{ marginTop: '24px' }} onClick={handleNext} loading={loading}>
+                <LoadingButton
+                    fullWidth
+                    sx={{ marginTop: '24px' }}
+                    onClick={handleNext}
+                    loading={loading}
+                    variant="contained">
                     {t.next()}
                 </LoadingButton>
             </Box>

packages/shared/src/UI/components/LoadingAnimation/index.tsx

@@ -3,8 +3,8 @@ import { makeStyles } from '@masknet/theme'
 import type { SvgIconProps } from '@mui/material'
 import classNames from 'classnames'
 
-const useStyles = makeStyles()((theme) => ({
-    '@global': {
+const useStyles = makeStyles()({
+    animated: {
         '@keyframes loadingAnimation': {
             '0%': {
                 transform: 'rotate(0deg)',
@@ -13,11 +13,9 @@ const useStyles = makeStyles()((theme) => ({
                 transform: 'rotate(360deg)',
             },
         },
-    },
-    animated: {
         animation: `loadingAnimation 1.6s linear infinite`,
     },
-}))
+})
 
 export const LoadingAnimation = (props: SvgIconProps) => {
     const { classes } = useStyles()