fix(deposit): move max button to footer so it doesnt get cut off on s…

…maller browser windows
blockchain · May 13, 2022 · aa8a834 · aa8a834
1 parent b1b9492
commit aa8a834
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Brokerage/EnterAmount.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Brokerage/EnterAmount.tsx
@@ -36,6 +36,7 @@ import {
 import { checkCrossBorderLimit, minMaxAmount } from 'components/Flyout/validation'
 import AmountFieldInput from 'components/Form/AmountFieldInput'
 import Form from 'components/Form/Form'
+import { Padding } from 'components/Padding'
 import { CheckoutRow } from 'components/Rows'
 import { actions } from 'data'
 import { convertBaseToStandard } from 'data/components/exchange/services'
@@ -360,22 +361,24 @@ const EnterAmount = ({
               }
             />
           </div>
-          <MaxButton
-            type={orderType === BrokerageOrderType.DEPOSIT ? 'Deposit' : 'Withdrawal'}
-            onClick={() => {
-              formActions.change(
-                'brokerageTx',
-                'amount',
-                convertBaseToStandard('FIAT', withdrawableBalance || paymentMethod.limits.max)
-              )
-              // record max click withdrawal
-              if (onMaxButtonClicked) {
-                onMaxButtonClicked()
-              }
-            }}
-          />
         </FlyoutContent>
-        <FlyoutFooter>
+        <FlyoutFooter collapsed>
+          <Padding bottom={24}>
+            <MaxButton
+              type={orderType === BrokerageOrderType.DEPOSIT ? 'Deposit' : 'Withdrawal'}
+              onClick={() => {
+                formActions.change(
+                  'brokerageTx',
+                  'amount',
+                  convertBaseToStandard('FIAT', withdrawableBalance || paymentMethod.limits.max)
+                )
+                // record max click withdrawal
+                if (onMaxButtonClicked) {
+                  onMaxButtonClicked()
+                }
+              }}
+            />
+          </Padding>
           <Account
             handleMethodClick={handleMethodClick}
             invalid={invalid}

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SendCrypto/EnterAmount/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SendCrypto/EnterAmount/index.tsx
@@ -22,6 +22,7 @@ import { StepHeader } from 'components/Flyout/SendRequestCrypto'
 import AmountFieldInput from 'components/Form/AmountFieldInput'
 import Form from 'components/Form/Form'
 import SelectBox from 'components/Form/SelectBox'
+import { Padding } from 'components/Padding'
 import { selectors } from 'data'
 import { convertBaseToStandard } from 'data/components/exchange/services'
 import { SendCryptoStepType } from 'data/components/sendCrypto/types'
@@ -32,7 +33,6 @@ import { hexToRgb } from 'utils/helpers'
 
 import { AlertButton, MaxButton } from '../../components'
 import { TIER_TYPES } from '../../Settings/TradingLimits/model'
-import { Row } from '../../Swap/EnterAmount/Checkout'
 import { Props as OwnProps } from '..'
 import { SEND_FORM } from '../model'
 import { validate } from './validation'
@@ -262,7 +262,9 @@ const SendEnterAmount: React.FC<InjectedFormProps<{}, Props> & Props> = (props)
           ) : null}
         </QuoteActionContainer>
 
-        <MaxButton type='Send' onClick={handleMax} />
+        <Padding top={70}>
+          <MaxButton type='Send' onClick={handleMax} />
+        </Padding>
 
         <Amounts>
           <Text

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/components/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/components/index.tsx
@@ -460,7 +460,6 @@ const MaxButtonWrapper = styled.div`
   flex-direction: row;
   justify-content: center;
   height: 32px;
-  margin-top: 70px;
   width: 100%;
 `