fix: ui

* share dialog style * token symbol
DimensionDev · Jun 18, 2021 · 6101980 · 6101980
1 parent 33a0451
commit 6101980
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 14 deletions.
diff --git a/packages/maskbook/src/plugins/ITO/UI/ITO.tsx b/packages/maskbook/src/plugins/ITO/UI/ITO.tsx
@@ -10,6 +10,10 @@ import {
     useChainId,
     useChainIdValid,
     useAccount,
+    useConstant,
+    CONSTANTS,
+    isSameAddress,
+    getChainDetailed,
 } from '@dimensiondev/web3-shared'
 import { WalletMessages } from '../../Wallet/messages'
 import { ITO_Status, JSON_PayloadInMask } from '../types'
@@ -180,11 +184,17 @@ interface TokenItemProps {
 
 const TokenItem = ({ price, token, exchangeToken }: TokenItemProps) => {
     const classes = useStyles({})
+    const NATIVE_TOKEN_ADDRESS = useConstant(CONSTANTS, 'NATIVE_TOKEN_ADDRESS')
+
     return (
         <>
             <TokenIcon classes={{ icon: classes.tokenIcon }} address={exchangeToken.address} />
             <Typography component="span">
-                <strong>{price}</strong> {exchangeToken.symbol} / {token.symbol}
+                <strong>{price}</strong>{' '}
+                {isSameAddress(exchangeToken.address, NATIVE_TOKEN_ADDRESS)
+                    ? getChainDetailed(exchangeToken.chainId)?.nativeCurrency.symbol
+                    : exchangeToken.symbol}{' '}
+                / {token.symbol}
             </Typography>
         </>
     )

diff --git a/packages/maskbook/src/plugins/ITO/UI/RemindDialog.tsx b/packages/maskbook/src/plugins/ITO/UI/RemindDialog.tsx
@@ -36,6 +36,9 @@ 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',
@@ -45,6 +48,7 @@ const useStyles = makeStyles((theme) => ({
         display: 'flex',
         alignItems: 'center',
         marginTop: theme.spacing(2),
+        padding: theme.spacing(2.5, 0, 3.5, 2),
     },
     tokenIcon: {
         display: 'flex',
@@ -124,7 +128,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')}
@@ -179,6 +183,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,7 +13,6 @@ const useStyles = makeStyles((theme) => ({
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-        margin: theme.spacing(2, 0),
     },
     shareAmount: {
         fontSize: 36,

diff --git a/packages/maskbook/src/plugins/ITO/UI/SwapDialog.tsx b/packages/maskbook/src/plugins/ITO/UI/SwapDialog.tsx
@@ -41,6 +41,9 @@ 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,
@@ -250,7 +253,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}
@@ -327,6 +330,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,7 +21,10 @@ const useStyles = makeStyles((theme) => ({
     content: {
         display: 'flex',
         flexDirection: 'column',
-        padding: theme.spacing(2, 3),
+        padding: theme.spacing(0, 3),
+    },
+    unlockWrapper: {
+        padding: theme.spacing(2, 0),
     },
 }))
 
@@ -81,13 +84,15 @@ export function SwapGuide(props: SwapGuideProps) {
                             return <RemindDialog token={payload.token} chainId={chainId} setStatus={onUpdate} />
                         case SwapStatus.Unlock:
                             return (
-                                <UnlockDialog
-                                    tokens={
-                                        payload.exchange_tokens.filter(
-                                            (x) => x.type === EthereumTokenType.ERC20,
-                                        ) as ERC20TokenDetailed[]
-                                    }
-                                />
+                                <div className={classes.unlockWrapper}>
+                                    <UnlockDialog
+                                        tokens={
+                                            payload.exchange_tokens.filter(
+                                                (x) => x.type === EthereumTokenType.ERC20,
+                                            ) as ERC20TokenDetailed[]
+                                        }
+                                    />
+                                </div>
                             )
                         case SwapStatus.Swap:
                             return (