From fbc7cc9bfea05b1d3aac8691e3d7a5cf0060ddf3 Mon Sep 17 00:00:00 2001
From: zhouhanseng <z308114274@gmail.com>
Date: Tue, 24 May 2022 14:38:11 +0800
Subject: [PATCH 1/4] fix(ui): claim button && mind fb tool box hint

---
 .../InjectedComponents/ToolboxUnstyled.tsx    |  5 ++++-
 .../DashboardComponents/ActionButton.tsx      | 21 +++++++++++++++----
 .../plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx |  2 ++
 .../minds.com/customization/custom.ts         |  4 ++++
 .../minds.com/injection/ToolboxHint_UI.tsx    |  5 +++--
 .../minds.com/utils/selector.ts               |  4 +---
 .../src/web3/UI/EthereumChainBoundary.tsx     |  3 +++
 7 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
index 106098381aeb..6a2593c93cca 100644
--- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
+++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
@@ -91,6 +91,7 @@ export function ToolboxHintUnstyled(props: ToolboxHintProps) {
 function ToolboxHintForApplication(props: ToolboxHintProps) {
     const {
         ListItemButton = MuiListItemButton,
+        ListItemIcon = MuiListItemIcon,
         Container = 'div',
         Typography = MuiTypography,
         iconSize = 24,
@@ -104,7 +105,9 @@ function ToolboxHintForApplication(props: ToolboxHintProps) {
         <GuideStep step={1} total={4} tip={t('user_guide_tip_1')}>
             <Container>
                 <ListItemButton onClick={openDialog}>
-                    <MaskIcon style={{ width: iconSize, height: iconSize }} />
+                    <ListItemIcon>
+                        <MaskIcon style={{ width: iconSize, height: iconSize }} />
+                    </ListItemIcon>
                     {mini ? null : (
                         <ListItemText
                             primary={
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
index d01f32ccdfcf..449c69a66a4d 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
@@ -114,8 +114,9 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
     } = props
 
     const [state, setState] = useState<ActionButtonPromiseState>('init')
-    const completeClass = classNames(classes.success, b.className)
-    const failClass = classNames(classes.failed, b.className)
+    const basicClass = classNames(classes.button, b.className)
+    const completeClass = classNames(basicClass, classes.success)
+    const failClass = classNames(basicClass, classes.failed)
 
     const run = () => {
         setState('wait')
@@ -144,7 +145,16 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
     }, [executor, noUpdateEffect])
 
     if (state === 'wait')
-        return <Button {...b} startIcon={circle} disabled={!waitingOnClick} children={waiting} onClick={cancel} />
+        return (
+            <Button
+                {...b}
+                startIcon={circle}
+                disabled={!waitingOnClick}
+                children={waiting}
+                onClick={cancel}
+                className={basicClass}
+            />
+        )
     if (state === 'complete')
         return (
             <Button
@@ -167,7 +177,7 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
                 onClick={failClick}
             />
         )
-    return <Button {...b} children={init} onClick={run} />
+    return <Button {...b} children={init} onClick={run} className={basicClass} />
 }
 const useStyles = makeStyles()({
     success: {
@@ -184,4 +194,7 @@ const useStyles = makeStyles()({
             backgroundColor: red[700],
         },
     },
+    button: {
+        borderRadius: 999,
+    },
 })
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
index f67d9f9cd2e0..1f7095676244 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
@@ -214,6 +214,8 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => {
             margin: theme.spacing(3, 'auto'),
         },
         claimAllButton: {
+            height: 48,
+            borderRadius: 999,
             [smallQuery]: {
                 fontSize: 14,
             },
diff --git a/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
index 06ffa6a859f7..242e83a82ac9 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
+++ b/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
@@ -23,12 +23,16 @@ export function startWatchThemeColor(signal: AbortSignal) {
     function updateThemeColor() {
         const contrastColor = getForegroundColor(themeListItemSelector().evaluate()!)
         const backgroundColor = getBackgroundColor(document.body)
+        console.log({ backgroundColor })
         currentTheme.value = contrastColor === 'rgb(255,255,255)' ? 'dark' : 'light'
         if (contrastColor) primaryColorContrastColorRef.value = contrastColor
         if (backgroundColor)
             backgroundColorRef.value = currentTheme.value === 'light' ? 'rgb(244, 244 ,245)' : 'rgb(26, 32, 37)'
     }
+    // init
+    currentTheme.value = getBackgroundColor(document.body) === 'rgb(255,255,255)' ? 'light' : 'dark'
 
+    // update
     new MutationObserverWatcher(themeListItemSelector())
         .addListener('onAdd', updateThemeColor)
         .addListener('onChange', updateThemeColor)
diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
index de15d87e68eb..389f03ed98f5 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
+++ b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
@@ -1,5 +1,5 @@
 import { ToolboxHintUnstyled } from '../../../components/InjectedComponents/ToolboxUnstyled'
-import { styled, ListItemButton, Typography, ListItemIcon, useMediaQuery } from '@mui/material'
+import { styled, ListItemButton, Typography, ListItemIcon, useMediaQuery, useTheme } from '@mui/material'
 
 const mindsBreakPoint = 1221 /** px */
 
@@ -42,7 +42,8 @@ const Icon = styled(ListItemIcon)`
 
 export function ToolboxHintAtMinds(props: { category: 'wallet' | 'application' }) {
     const mini = useMediaQuery(`(max-width: ${mindsBreakPoint}px)`)
-
+    const mode = useTheme().palette.mode
+    console.log({ mode })
     return (
         <ToolboxHintUnstyled
             mini={mini}
diff --git a/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts
index 47fd391b1f1b..11ba52931f6e 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts
+++ b/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts
@@ -10,9 +10,7 @@ const querySelector = <T extends E, SingleMode extends boolean = true>(selector:
 export const rootSelector: () => LiveSelector<E, true> = () => querySelector<E>('m-app')
 
 export const themeListItemSelector: () => LiveSelector<HTMLAnchorElement, true> = () =>
-    querySelector<HTMLAnchorElement>(
-        'm-usermenu__v3 > div.m-user-menu.m-dropdown > ul > li:nth-child(5) .ng-star-inserted',
-    )
+    querySelector<HTMLAnchorElement>('.m-sidebarMore__dropdown > li:nth-child(7)')
 
 export const composerModalSelector: () => LiveSelector<E, true> = () => querySelector<E>('m-composer__modal')
 
diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
index 9626dece8fd5..b8ce3786dd41 100644
--- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
@@ -48,6 +48,9 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 4,
         padding: 10,
     },
+    switchButton: {
+        borderRadius: 999,
+    },
 }))
 
 export interface EthereumChainBoundaryProps extends withClasses<'switchButton'> {

From 89d4e9c476ca59c5aae52e2696901fa09a6ba88b Mon Sep 17 00:00:00 2001
From: zhouhanseng <z308114274@gmail.com>
Date: Wed, 25 May 2022 11:03:32 +0800
Subject: [PATCH 2/4] chore: remove debug code

---
 .../src/social-network-adaptor/minds.com/customization/custom.ts | 1 -
 .../minds.com/injection/ToolboxHint_UI.tsx                       | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
index 242e83a82ac9..e188b7bcd402 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
+++ b/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
@@ -23,7 +23,6 @@ export function startWatchThemeColor(signal: AbortSignal) {
     function updateThemeColor() {
         const contrastColor = getForegroundColor(themeListItemSelector().evaluate()!)
         const backgroundColor = getBackgroundColor(document.body)
-        console.log({ backgroundColor })
         currentTheme.value = contrastColor === 'rgb(255,255,255)' ? 'dark' : 'light'
         if (contrastColor) primaryColorContrastColorRef.value = contrastColor
         if (backgroundColor)
diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
index 389f03ed98f5..77b4a151d92c 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
+++ b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
@@ -43,7 +43,6 @@ const Icon = styled(ListItemIcon)`
 export function ToolboxHintAtMinds(props: { category: 'wallet' | 'application' }) {
     const mini = useMediaQuery(`(max-width: ${mindsBreakPoint}px)`)
     const mode = useTheme().palette.mode
-    console.log({ mode })
     return (
         <ToolboxHintUnstyled
             mini={mini}

From d77bbfb61bc5e9d058baa58bc45d4d4cd8e3e728 Mon Sep 17 00:00:00 2001
From: zhouhanseng <z308114274@gmail.com>
Date: Wed, 25 May 2022 20:52:05 +0800
Subject: [PATCH 3/4] fix: fb toolbar

---
 cspell.json                                            |  1 +
 .../facebook.com/injection/Toolbar.tsx                 |  3 ++-
 .../facebook.com/injection/ToolbarUI.tsx               | 10 +++++-----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/cspell.json b/cspell.json
index 6c0a67c78ef8..b187270d7f61 100644
--- a/cspell.json
+++ b/cspell.json
@@ -286,6 +286,7 @@
         "redpackets",
         "renfil",
         "shapeclip",
+        "ssrb",
         "steth",
         "swaptoken",
         "testweb",
diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx
index 0271d175348d..7dd832f3934f 100644
--- a/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx
+++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx
@@ -6,7 +6,8 @@ import { ToolboxAtFacebook } from './ToolbarUI'
 export function injectToolboxHintAtFacebook(signal: AbortSignal, category: 'wallet' | 'application') {
     const watcher = new MutationObserverWatcher(toolBoxInSideBarSelector())
     startWatch(watcher, signal)
+    const hasTopNavBar = Boolean(document.querySelector<HTMLElement>('#ssrb_top_nav_start ~ [role="banner"]'))
     createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render(
-        <ToolboxAtFacebook category={category} />,
+        <ToolboxAtFacebook category={category} hasTopNavBar={hasTopNavBar} />,
     )
 }
diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
index da7d3003887c..6122ab501b10 100644
--- a/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
+++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
@@ -3,8 +3,8 @@ import { ToolboxHintUnstyled } from '../../../components/InjectedComponents/Tool
 
 const fbBreakPoint = 700 /** px */
 
-const Container = styled('div')`
-    padding: 0 8px;
+const Container = styled('div')<{ hasTopNavBar: boolean }>`
+    padding: 0 ${(props) => (props.hasTopNavBar ? '8px' : '4px')};
 `
 const Item = styled(ListItemButton)`
     border-radius: 8px;
@@ -23,12 +23,12 @@ const Icon = styled(ListItemIcon)`
     }
 `
 
-export function ToolboxAtFacebook(props: { category: 'wallet' | 'application' }) {
+export function ToolboxAtFacebook(props: { category: 'wallet' | 'application'; hasTopNavBar: boolean }) {
     const isSmall = useMediaQuery(`(max-height: ${fbBreakPoint}px)`)
     return (
         <ToolboxHintUnstyled
-            iconSize={isSmall ? 24 : 32}
-            Container={Container}
+            iconSize={isSmall || !props.hasTopNavBar ? 24 : 32}
+            Container={({ children }) => <Container hasTopNavBar={props.hasTopNavBar}>{children}</Container>}
             ListItemButton={Item}
             Typography={Text}
             ListItemIcon={Icon}

From 997c5ad3a45a20a17c6ec22aa31bbf08e7b3112d Mon Sep 17 00:00:00 2001
From: zhouhanseng <z308114274@gmail.com>
Date: Thu, 26 May 2022 16:31:50 +0800
Subject: [PATCH 4/4] fix: style

---
 .../facebook.com/injection/ToolbarUI.tsx                 | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
index 6122ab501b10..bb5605084996 100644
--- a/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
+++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
@@ -16,10 +16,11 @@ const Text = styled(Typography)`
     color: var(--primary-text);
     font-weight: 500;
 `
-const Icon = styled(ListItemIcon)`
-    min-width: 46px;
+const Icon = styled(ListItemIcon)<{ hasTopNavBar: boolean }>`
+    min-width: ${(props) => (props.hasTopNavBar ? '46px' : 'auto')};
+    margin-right: ${(props) => (props.hasTopNavBar ? '0px' : '12px')};
     @media screen and (max-height: ${fbBreakPoint}px) {
-        min-width: 36px;
+        min-width: ${(props) => (props.hasTopNavBar ? '36px' : 'auto')};
     }
 `
 
@@ -31,7 +32,7 @@ export function ToolboxAtFacebook(props: { category: 'wallet' | 'application'; h
             Container={({ children }) => <Container hasTopNavBar={props.hasTopNavBar}>{children}</Container>}
             ListItemButton={Item}
             Typography={Text}
-            ListItemIcon={Icon}
+            ListItemIcon={({ children }) => <Icon hasTopNavBar={props.hasTopNavBar}>{children}</Icon>}
             category={props.category}
         />
     )