fix: ui

DimensionDev · Jun 19, 2021 · 02fc664 · 02fc664
1 parent 6101980
commit 02fc664
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 49 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)`]: {