Wallet scrollbar fix (MystenLabs#4284)

* fixed scrolbar on page title * fix scroll issues * rm custom scrollbar
tarunmahe · Aug 25, 2022 · c951368 · c951368
1 parent 55989bc
commit c951368
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 116 deletions.
diff --git a/wallet/src/ui/app/components/transactions-card/TransactionsCard.module.scss b/wallet/src/ui/app/components/transactions-card/TransactionsCard.module.scss
@@ -57,12 +57,14 @@
         display: flex;
         flex-flow: column;
         text-align: end;
+        justify-content: center;
 
         .tx-amount {
             @include utils.typography('table/text-sm');
 
             color: colors.$gray-100;
             text-align: right;
+            line-height: 120%;
         }
 
         .tx-image {

diff --git a/wallet/src/ui/app/pages/home/nfts/NFTPage.module.scss b/wallet/src/ui/app/pages/home/nfts/NFTPage.module.scss
@@ -7,7 +7,7 @@
     margin-left: -25px;
     margin-right: -25px;
     height: 450px;
-    overflow-y: scroll;
+    overflow-y: auto;
 
     .nft-gallery {
         display: grid;

diff --git a/wallet/src/ui/app/pages/home/tokens/icon-link/IconLink.module.scss b/wallet/src/ui/app/pages/home/tokens/icon-link/IconLink.module.scss
@@ -55,7 +55,7 @@
     align-items: center;
     justify-content: center;
     color: colors.$cta-blue;
-    padding: 10px;
+    padding: 5px;
     font-size: 16px;
 }
 

diff --git a/wallet/src/ui/app/pages/home/transactions/Transactions.module.scss b/wallet/src/ui/app/pages/home/transactions/Transactions.module.scss
@@ -17,6 +17,6 @@
         margin-left: -25px;
         margin-right: -25px;
         height: 450px;
-        overflow-y: scroll;
+        overflow-y: auto;
     }
 }
diff --git a/wallet/src/ui/app/pages/home/transfer-coin/TransferCoinForm/StepOne.tsx b/wallet/src/ui/app/pages/home/transfer-coin/TransferCoinForm/StepOne.tsx
@@ -5,10 +5,7 @@ import cl from 'classnames';
 import { ErrorMessage, Field, Form, useFormikContext } from 'formik';
 import { useEffect, useRef, memo } from 'react';
 
-import BottomMenuLayout, {
-    Content,
-    Menu,
-} from '_app/shared/bottom-menu-layout';
+import { Content, Menu } from '_app/shared/bottom-menu-layout';
 import Button from '_app/shared/button';
 import ActiveCoinsCard from '_components/active-coins-card';
 import Icon, { SuiIcons } from '_components/icon';
@@ -49,45 +46,43 @@ function StepOne({
             autoComplete="off"
             noValidate={true}
         >
-            <BottomMenuLayout>
-                <Content>
-                    <div className={st.group}>
-                        <label className={st.label}>Amount:</label>
-                        <Field
-                            component={NumberInput}
-                            allowNegative={false}
-                            name="amount"
-                            placeholder={`Total ${coinSymbol.toLocaleUpperCase()} to send`}
-                            className={st.input}
-                        />
+            <Content>
+                <div className={st.group}>
+                    <label className={st.label}>Amount:</label>
+                    <Field
+                        component={NumberInput}
+                        allowNegative={false}
+                        name="amount"
+                        placeholder={`Total ${coinSymbol.toLocaleUpperCase()} to send`}
+                        className={st.input}
+                    />
 
-                        <ErrorMessage
-                            className={st.error}
-                            name="amount"
-                            component="div"
+                    <ErrorMessage
+                        className={st.error}
+                        name="amount"
+                        component="div"
+                    />
+                </div>
+                <div className={st.activeCoinCard}>
+                    <ActiveCoinsCard activeCoinType={coinType} />
+                </div>
+            </Content>
+            <Menu stuckClass={st.shadow}>
+                <div className={cl(st.group, st.cta)}>
+                    <Button
+                        type="submit"
+                        disabled={!isValid}
+                        mode="primary"
+                        className={st.btn}
+                    >
+                        Continue
+                        <Icon
+                            icon={SuiIcons.ArrowLeft}
+                            className={cl(st.arrowLeft)}
                         />
-                    </div>
-                    <div className={st.activeCoinCard}>
-                        <ActiveCoinsCard activeCoinType={coinType} />
-                    </div>
-                </Content>
-                <Menu stuckClass={st.shadow}>
-                    <div className={cl(st.group, st.cta)}>
-                        <Button
-                            type="submit"
-                            disabled={!isValid}
-                            mode="primary"
-                            className={st.btn}
-                        >
-                            Continue
-                            <Icon
-                                icon={SuiIcons.ArrowLeft}
-                                className={cl(st.arrowLeft)}
-                            />
-                        </Button>
-                    </div>
-                </Menu>
-            </BottomMenuLayout>
+                    </Button>
+                </div>
+            </Menu>
         </Form>
     );
 }

diff --git a/wallet/src/ui/app/pages/home/transfer-coin/TransferCoinForm/StepTwo.tsx b/wallet/src/ui/app/pages/home/transfer-coin/TransferCoinForm/StepTwo.tsx
@@ -6,10 +6,7 @@ import { Field, Form, useFormikContext } from 'formik';
 import { useEffect, useRef, memo } from 'react';
 import { useIntl } from 'react-intl';
 
-import BottomMenuLayout, {
-    Content,
-    Menu,
-} from '_app/shared/bottom-menu-layout';
+import { Content, Menu } from '_app/shared/bottom-menu-layout';
 import Button from '_app/shared/button';
 import AddressInput from '_components/address-input';
 import Icon, { SuiIcons } from '_components/icon';
@@ -57,78 +54,69 @@ function StepTwo({
 
     return (
         <Form className={st.container} autoComplete="off" noValidate={true}>
-            <BottomMenuLayout>
-                <Content>
-                    <div className={st.labelDirection}>
-                        Enter or search the address of the recepient below to
-                        start sending coins.
+            <Content>
+                <div className={st.labelDirection}>
+                    Enter or search the address of the recepient below to start
+                    sending coins.
+                </div>
+                <div className={cl(st.group, st.address)}>
+                    <Field
+                        component={AddressInput}
+                        name="to"
+                        className={st.input}
+                    />
+                </div>
+
+                {submitError ? (
+                    <div className={st.error}>{submitError}</div>
+                ) : null}
+
+                <div className={st.responseCard}>
+                    <div className={st.amount}>
+                        {intl.formatNumber(
+                            BigInt(amount || 0),
+                            balanceFormatOptions
+                        )}{' '}
+                        <span>{coinSymbol}</span>
                     </div>
-                    <div className={cl(st.group, st.address)}>
-                        <Field
-                            component={AddressInput}
-                            name="to"
-                            className={st.input}
-                        />
-                    </div>
-
-                    {submitError ? (
-                        <div className={st.error}>{submitError}</div>
-                    ) : null}
-
-                    <div className={st.responseCard}>
-                        <div className={st.amount}>
-                            {intl.formatNumber(
-                                BigInt(amount || 0),
-                                balanceFormatOptions
-                            )}{' '}
-                            <span>{coinSymbol}</span>
-                        </div>
 
-                        <div className={st.details}>
-                            <div className={st.txFees}>
-                                <div className={st.txInfoLabel}>Gas Fee</div>
-                                <div className={st.walletInfoValue}>
-                                    {DEFAULT_GAS_BUDGET_FOR_TRANSFER}{' '}
-                                    {coinSymbol}
-                                </div>
+                    <div className={st.details}>
+                        <div className={st.txFees}>
+                            <div className={st.txInfoLabel}>Gas Fee</div>
+                            <div className={st.walletInfoValue}>
+                                {DEFAULT_GAS_BUDGET_FOR_TRANSFER} {coinSymbol}
                             </div>
+                        </div>
 
-                            <div className={st.txFees}>
-                                <div className={st.txInfoLabel}>
-                                    Total Amount
-                                </div>
-                                <div className={st.walletInfoValue}>
-                                    {intl.formatNumber(
-                                        BigInt(totalAmount || 0),
-                                        balanceFormatOptions
-                                    )}{' '}
-                                    {coinSymbol}
-                                </div>
+                        <div className={st.txFees}>
+                            <div className={st.txInfoLabel}>Total Amount</div>
+                            <div className={st.walletInfoValue}>
+                                {intl.formatNumber(
+                                    BigInt(totalAmount || 0),
+                                    balanceFormatOptions
+                                )}{' '}
+                                {coinSymbol}
                             </div>
                         </div>
                     </div>
-                </Content>
-                <Menu stuckClass={st.shadow}>
-                    <div className={cl(st.group, st.cta)}>
-                        <Button
-                            type="submit"
-                            disabled={validAddressBtn}
-                            mode="primary"
-                            className={st.btn}
-                        >
-                            {isSubmitting ? (
-                                <LoadingIndicator />
-                            ) : (
-                                'Send Coins Now'
-                            )}
-                            <Icon
-                                icon={SuiIcons.ArrowLeft}
-                                className={cl(st.arrowLeft)}
-                            />
-                        </Button>
-                    </div>
-                </Menu>
-            </BottomMenuLayout>
+                </div>
+            </Content>
+            <Menu stuckClass={st.shadow}>
+                <div className={cl(st.group, st.cta)}>
+                    <Button
+                        type="submit"
+                        disabled={validAddressBtn}
+                        mode="primary"
+                        className={st.btn}
+                    >
+                        {isSubmitting ? <LoadingIndicator /> : 'Send Coins Now'}
+                        <Icon
+                            icon={SuiIcons.ArrowLeft}
+                            className={cl(st.arrowLeft)}
+                        />
+                    </Button>
+                </div>
+            </Menu>
         </Form>
     );
 }

diff --git a/wallet/src/ui/app/pages/home/transfer-coin/TransferCoinPage.module.scss b/wallet/src/ui/app/pages/home/transfer-coin/TransferCoinPage.module.scss
@@ -32,4 +32,13 @@
             background-color: colors.$sui-steel-blue;
         }
     }
+
+    .content {
+        padding-left: 25px;
+        padding-right: 25px;
+        margin-left: -25px;
+        margin-right: -25px;
+        overflow-y: auto;
+        height: 100%;
+    }
 }
diff --git a/wallet/src/ui/app/pages/home/transfer-coin/index.tsx b/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
@@ -200,7 +200,7 @@ function TransferCoinPage() {
                 {...(currentStep > 1 && { onClick: handleBackStep })}
             />
 
-            <Content>
+            <Content className={st.content}>
                 <Loading loading={loadingBalance}>
                     <ProgressBar
                         currentStep={currentStep}

diff --git a/wallet/src/ui/app/shared/page-title/PageTitle.module.scss b/wallet/src/ui/app/shared/page-title/PageTitle.module.scss
@@ -58,6 +58,7 @@
         left: 50%;
         transform: translateX(-50%);
         font-size: 16px;
+        overflow: hidden;
     }
 
     .stats {

diff --git a/wallet/src/ui/styles/utils/index.scss b/wallet/src/ui/styles/utils/index.scss
@@ -37,8 +37,7 @@ $main-extra-space: sizing.$main-bottom-space;
     padding-left: 30px;
     word-break: break-all;
     padding-right: 20px;
-    max-height: 280px;
-    overflow-y: scroll;
+    position: relative;
 
     &::before {
         content: '';