From 88ccb36f7d2459ba06e8c92092370d4d6d4d41c4 Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Mon, 11 Jul 2022 13:00:48 +0800
Subject: [PATCH] fix: mf-1409 style of scrollbar

---
 .../components/SelectTokenDialog/index.tsx    | 26 -------------------
 .../components/shared/ApplicationBoard.tsx    |  4 +--
 .../twitter.com/customization/custom.ts       | 18 +++++++++++++
 .../components/SelectFungibleTokenDialog.tsx  |  3 +++
 .../SearchableList/SearchableList.tsx         |  5 +++-
 5 files changed, 27 insertions(+), 29 deletions(-)
 delete mode 100644 packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx

diff --git a/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx b/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx
deleted file mode 100644
index 10528de822ea..000000000000
--- a/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { memo } from 'react'
-import { MaskDialog } from '@masknet/theme'
-import { useDashboardI18N } from '../../../../locales'
-import { FungibleTokenList } from '@masknet/shared'
-import { DialogContent } from '@mui/material'
-import type { FungibleToken } from '@masknet/web3-shared-base'
-import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
-
-export interface SelectTokenDialogProps {
-    open: boolean
-    onClose: () => void
-    onSelect?(token: FungibleToken<ChainId, SchemaType> | null): void
-}
-
-// todo use remote dialog for add token list dialog
-export const SelectTokenDialog = memo<SelectTokenDialogProps>(({ open, onClose, onSelect }) => {
-    const t = useDashboardI18N()
-
-    return (
-        <MaskDialog maxWidth="md" open={open} title={t.wallets_add_token()} onClose={onClose}>
-            <DialogContent>
-                <FungibleTokenList onSelect={onSelect} />
-            </DialogContent>
-        </MaskDialog>
-    )
-})
diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx
index df1df8a44f8d..a00dfbb31f7c 100644
--- a/packages/mask/src/components/shared/ApplicationBoard.tsx
+++ b/packages/mask/src/components/shared/ApplicationBoard.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles<{ shouldScroll: boolean; isCarouselReady: boolean }
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
     return {
         applicationWrapper: {
-            padding: theme.spacing(props.isCarouselReady ? 0 : 1, 0.25, 1),
+            paddingTop: theme.spacing(1),
             display: 'grid',
             gridTemplateColumns: 'repeat(4, 1fr)',
             overflowY: 'auto',
@@ -38,7 +38,7 @@ const useStyles = makeStyles<{ shouldScroll: boolean; isCarouselReady: boolean }
                 width: 20,
             },
             '::-webkit-scrollbar-thumb': {
-                borderRadius: '20px',
+                borderRadius: 20,
                 width: 5,
                 border: '7px solid rgba(0, 0, 0, 0)',
                 backgroundColor: theme.palette.maskColor.secondaryLine,
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
index 6ce8b5973fed..e837f65e9c85 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
@@ -118,6 +118,24 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                     },
                 },
             }
+            theme.components.MuiDialogContent = {
+                styleOverrides: {
+                    root: {
+                        paddingRight: 4,
+                        '::-webkit-scrollbar': {
+                            backgroundColor: 'transparent',
+                            width: 20,
+                        },
+                        '::-webkit-scrollbar-thumb': {
+                            borderRadius: 20,
+                            width: 5,
+                            border: '7px solid rgba(0, 0, 0, 0)',
+                            backgroundColor: theme.palette.maskColor.secondaryLine,
+                            backgroundClip: 'padding-box',
+                        },
+                    },
+                },
+            }
             theme.components.MuiSnackbar = {
                 styleOverrides: {
                     root: {
diff --git a/packages/shared/src/contexts/components/SelectFungibleTokenDialog.tsx b/packages/shared/src/contexts/components/SelectFungibleTokenDialog.tsx
index 3c12d01f9382..b580e4363ba3 100644
--- a/packages/shared/src/contexts/components/SelectFungibleTokenDialog.tsx
+++ b/packages/shared/src/contexts/components/SelectFungibleTokenDialog.tsx
@@ -19,6 +19,9 @@ const useStyles = makeStyles<StyleProps>()((theme, { compact, disablePaddingTop
         ...(compact ? { minWidth: 552 } : {}),
         padding: theme.spacing(3),
         paddingTop: disablePaddingTop ? 0 : theme.spacing(2.8),
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'auto',
     },
     list: {
         scrollbarWidth: 'none',
diff --git a/packages/theme/src/Components/SearchableList/SearchableList.tsx b/packages/theme/src/Components/SearchableList/SearchableList.tsx
index 28f642d090dd..e5f4c91c21db 100644
--- a/packages/theme/src/Components/SearchableList/SearchableList.tsx
+++ b/packages/theme/src/Components/SearchableList/SearchableList.tsx
@@ -136,8 +136,11 @@ export function SearchableList<T extends {}>({
     )
 }
 const useStyles = makeStyles()((theme) => ({
-    container: {},
+    container: {
+        overflow: 'hidden',
+    },
     list: {
+        overflow: 'auto',
         marginTop: theme.spacing(1.5),
         '& > div::-webkit-scrollbar': {
             width: '7px',