From 02fc6649b96dc4b4d8ac1550c38eb8a89d7dd05a Mon Sep 17 00:00:00 2001
From: Hancheng Zhou <z308114274@gmail.com>
Date: Sat, 19 Jun 2021 13:46:40 +0800
Subject: [PATCH] fix: ui

---
 .../src/plugins/ITO/UI/RemindDialog.tsx       |  7 +--
 .../src/plugins/ITO/UI/ShareDialog.tsx        | 51 +++++++++----------
 .../src/plugins/ITO/UI/SwapDialog.tsx         |  7 +--
 .../maskbook/src/plugins/ITO/UI/SwapGuide.tsx | 21 +++-----
 .../twitter.com/customization/custom.ts       |  1 +
 5 files changed, 38 insertions(+), 49 deletions(-)

diff --git a/packages/maskbook/src/plugins/ITO/UI/RemindDialog.tsx b/packages/maskbook/src/plugins/ITO/UI/RemindDialog.tsx
index 8422f44226f8..b10224492b5f 100644
--- a/packages/maskbook/src/plugins/ITO/UI/RemindDialog.tsx
+++ b/packages/maskbook/src/plugins/ITO/UI/RemindDialog.tsx
@@ -36,9 +36,6 @@ const useStyles = makeStyles((theme) => ({
         fontWeight: 'bold',
         fontSize: '1.1rem',
     },
-    container: {
-        padding: theme.spacing(2, 0),
-    },
     wrapper: {
         padding: theme.spacing(2),
         background: theme.palette.mode === 'dark' ? '#17191D' : '#F7F9FA',
@@ -128,7 +125,7 @@ export function RemindDialog(props: RemindDialogProps) {
     const [agreeReminder, setAgreeReminder] = useState(false)
 
     return (
-        <div className={classes.container}>
+        <>
             <section className={classes.wrapper}>
                 <Typography variant="body1" className={classNames(classes.reminderText, classes.reminderTextFirst)}>
                     {t('plugin_ito_dialog_claim_reminder_text1')}
@@ -183,6 +180,6 @@ export function RemindDialog(props: RemindDialogProps) {
                 disabled={!agreeReminder}>
                 {t('plugin_ito_continue')}
             </ActionButton>
-        </div>
+        </>
     )
 }
diff --git a/packages/maskbook/src/plugins/ITO/UI/ShareDialog.tsx b/packages/maskbook/src/plugins/ITO/UI/ShareDialog.tsx
index 7b28ab0697fe..de44572991ef 100644
--- a/packages/maskbook/src/plugins/ITO/UI/ShareDialog.tsx
+++ b/packages/maskbook/src/plugins/ITO/UI/ShareDialog.tsx
@@ -13,6 +13,7 @@ const useStyles = makeStyles((theme) => ({
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
+        margin: theme.spacing(2, 0),
     },
     shareAmount: {
         fontSize: 36,
@@ -72,31 +73,29 @@ export function ShareDialog(props: ShareDialogProps) {
     }, [shareSuccessLink, onClose])
 
     return (
-        <>
-            <Box className={classes.shareWrapper}>
-                <div
-                    className={classes.shareImage}
-                    style={{ backgroundImage: `url(${ShareBackground})`, borderRadius: 12 }}>
-                    <Typography variant="body1" className={classes.shareAmount}>
-                        {amount}
-                    </Typography>
-                    <Typography variant="body1" className={classes.shareToken}>
-                        {token.symbol}
-                    </Typography>
-                    <Typography variant="body1" className={classes.shareText}>
-                        {isZero(actualSwapAmount) ? t('plugin_ito_out_of_stock_hit') : t('plugin_ito_congratulations')}
-                    </Typography>
-                    {shareSuccessLink ? (
-                        <ActionButton
-                            onClick={onShareSuccess}
-                            variant="contained"
-                            color="primary"
-                            className={classes.shareButton}>
-                            {t('plugin_ito_dialog_swap_share_title')}
-                        </ActionButton>
-                    ) : null}
-                </div>
-            </Box>
-        </>
+        <Box className={classes.shareWrapper}>
+            <div
+                className={classes.shareImage}
+                style={{ backgroundImage: `url(${ShareBackground})`, borderRadius: 12 }}>
+                <Typography variant="body1" className={classes.shareAmount}>
+                    {amount}
+                </Typography>
+                <Typography variant="body1" className={classes.shareToken}>
+                    {token.symbol}
+                </Typography>
+                <Typography variant="body1" className={classes.shareText}>
+                    {isZero(actualSwapAmount) ? t('plugin_ito_out_of_stock_hit') : t('plugin_ito_congratulations')}
+                </Typography>
+                {shareSuccessLink ? (
+                    <ActionButton
+                        onClick={onShareSuccess}
+                        variant="contained"
+                        color="primary"
+                        className={classes.shareButton}>
+                        {t('plugin_ito_dialog_swap_share_title')}
+                    </ActionButton>
+                ) : null}
+            </div>
+        </Box>
     )
 }
diff --git a/packages/maskbook/src/plugins/ITO/UI/SwapDialog.tsx b/packages/maskbook/src/plugins/ITO/UI/SwapDialog.tsx
index d8ede27b6432..220a3cb2e068 100644
--- a/packages/maskbook/src/plugins/ITO/UI/SwapDialog.tsx
+++ b/packages/maskbook/src/plugins/ITO/UI/SwapDialog.tsx
@@ -41,9 +41,6 @@ const useStyles = makeStyles((theme) => ({
         alignItems: 'center',
         marginTop: theme.spacing(2),
     },
-    wrapper: {
-        padding: theme.spacing(2, 0),
-    },
     swapLimitText: {
         color: theme.palette.mode === 'dark' ? '#fff' : '#15181B',
         fontSize: 14,
@@ -253,7 +250,7 @@ export function SwapDialog(props: SwapDialogProps) {
     }, [swapAmount, tokenBalance, maxSwapAmount, swapToken, ratio])
 
     return (
-        <div className={classes.wrapper}>
+        <>
             <section className={classes.swapLimitWrap}>
                 <Typography variant="body1" className={classes.swapLimitText}>
                     0 {token.symbol}
@@ -330,6 +327,6 @@ export function SwapDialog(props: SwapDialogProps) {
                     </EthereumERC20TokenApprovedBoundary>
                 </EthereumWalletConnectedBoundary>
             </section>
-        </div>
+        </>
     )
 }
diff --git a/packages/maskbook/src/plugins/ITO/UI/SwapGuide.tsx b/packages/maskbook/src/plugins/ITO/UI/SwapGuide.tsx
index 96f2014518b7..f611b58d9b8e 100644
--- a/packages/maskbook/src/plugins/ITO/UI/SwapGuide.tsx
+++ b/packages/maskbook/src/plugins/ITO/UI/SwapGuide.tsx
@@ -21,10 +21,7 @@ const useStyles = makeStyles((theme) => ({
     content: {
         display: 'flex',
         flexDirection: 'column',
-        padding: theme.spacing(0, 3),
-    },
-    unlockWrapper: {
-        padding: theme.spacing(2, 0),
+        padding: theme.spacing(2, 3),
     },
 }))
 
@@ -84,15 +81,13 @@ export function SwapGuide(props: SwapGuideProps) {
                             return <RemindDialog token={payload.token} chainId={chainId} setStatus={onUpdate} />
                         case SwapStatus.Unlock:
                             return (
-                                <div className={classes.unlockWrapper}>
-                                    <UnlockDialog
-                                        tokens={
-                                            payload.exchange_tokens.filter(
-                                                (x) => x.type === EthereumTokenType.ERC20,
-                                            ) as ERC20TokenDetailed[]
-                                        }
-                                    />
-                                </div>
+                                <UnlockDialog
+                                    tokens={
+                                        payload.exchange_tokens.filter(
+                                            (x) => x.type === EthereumTokenType.ERC20,
+                                        ) as ERC20TokenDetailed[]
+                                    }
+                                />
                             )
                         case SwapStatus.Swap:
                             return (
diff --git a/packages/maskbook/src/social-network-adaptor/twitter.com/customization/custom.ts b/packages/maskbook/src/social-network-adaptor/twitter.com/customization/custom.ts
index 19499d8b9f31..7cef591cd215 100644
--- a/packages/maskbook/src/social-network-adaptor/twitter.com/customization/custom.ts
+++ b/packages/maskbook/src/social-network-adaptor/twitter.com/customization/custom.ts
@@ -133,6 +133,7 @@ export const useInjectedDialogClassesOverwriteTwitter = makeStyles((theme) => ({
     },
     paper: {
         width: '600px !important',
+        maxWidth: 'none',
         boxShadow: 'none',
         backgroundImage: 'none',
         [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {