fix: cyberconnect ui (#8284)

DimensionDev · Dec 15, 2022 · 9b9fa1c · 9b9fa1c
1 parent 7a2a2df
commit 9b9fa1c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/packages/plugins/CyberConnect/src/SNSAdaptor/ConnectButton.tsx b/packages/plugins/CyberConnect/src/SNSAdaptor/ConnectButton.tsx
@@ -1,11 +1,10 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useAsync } from 'react-use'
-import { makeStyles } from '@masknet/theme'
+import { ActionButton, makeStyles } from '@masknet/theme'
 import { isSameAddress } from '@masknet/web3-shared-base'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { useChainContext, useWeb3, useNetworkContext } from '@masknet/web3-hooks-base'
 import CyberConnect, { Env } from '@cyberlab/cyberconnect'
-import { Button } from '@mui/material'
 import { PluginCyberConnectRPC } from '../messages.js'
 import { WalletConnectedBoundary } from '@masknet/shared'
 import { useI18N } from '../locales/i18n_generated.js'
@@ -16,6 +15,12 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         fontSize: 12,
         padding: '8px 12px',
+        backgroundColor: theme.palette.maskColor.publicMain,
+        color: theme.palette.maskColor.white,
+        '&:hover': {
+            backgroundColor: theme.palette.maskColor.publicMain,
+            color: theme.palette.maskColor.white,
+        },
     },
     wallet: {
         padding: '8px 12px',
@@ -39,13 +44,7 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export default function ConnectButton({
-    address,
-    refreshFollowList,
-}: {
-    address: string
-    refreshFollowList: () => void
-}) {
+export default function ConnectButton({ address }: { address: string }) {
     const t = useI18N()
     const { classes, cx } = useStyles()
     const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
@@ -79,14 +78,12 @@ export default function ConnectButton({
             cc.connect(address)
                 .then(() => {
                     setFollowing(true)
-                    refreshFollowList()
                 })
                 .finally(() => setLoading(false))
         } else {
             cc.disconnect(address)
                 .then(() => {
                     setFollowing(false)
-                    refreshFollowList()
                 })
                 .finally(() => setLoading(false))
         }
@@ -98,12 +95,13 @@ export default function ConnectButton({
                 hideRiskWarningConfirmed
                 ActionButtonProps={{ variant: 'roundedDark' }}
                 classes={{ button: classes.wallet }}>
-                <Button
+                <ActionButton
+                    loading={isLoading}
                     className={cx(classes.button, { [classes.isFollowing]: isFollowing })}
                     onClick={handleClick}
                     variant="roundedContained">
                     {!isFollowing ? t.follow_now() : t.unfollow()}
-                </Button>
+                </ActionButton>
             </WalletConnectedBoundary>
         )
     }

diff --git a/packages/plugins/CyberConnect/src/SNSAdaptor/Profile.tsx b/packages/plugins/CyberConnect/src/SNSAdaptor/Profile.tsx
@@ -152,7 +152,7 @@ const Profile = ({ url }: { url: string }) => {
                             <LoadingBase />
                         ) : (
                             <Stack className={classes.address}>
-                                <Typography>
+                                <Typography color={(theme) => theme.palette.maskColor.publicMain} lineHeight="18px">
                                     <FormattedAddress
                                         address={identity?.address}
                                         formatter={formatEthereumAddress}
@@ -173,7 +173,7 @@ const Profile = ({ url }: { url: string }) => {
                     </Stack>
 
                     <Stack alignItems="center" justifyContent="center">
-                        <ConnectButton address={identity?.address ?? ''} refreshFollowList={retry} />
+                        <ConnectButton address={identity?.address ?? ''} />
                     </Stack>
                 </Stack>
 

diff --git a/packages/plugins/CyberConnect/src/SNSAdaptor/index.tsx b/packages/plugins/CyberConnect/src/SNSAdaptor/index.tsx
@@ -47,6 +47,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
     wrapperProps: {
         icon: (
             <Icons.CyberConnect
+                variant="light"
                 style={{ width: 24, height: 24, filter: 'drop-shadow(0px 6px 12px rgba(27, 144, 238, 0.2))' }}
             />
         ),