From b8e72246b9bb6bb74f9965834f907abad9c0ea2e Mon Sep 17 00:00:00 2001 From: aleka Date: Fri, 10 Nov 2023 23:56:27 -0500 Subject: [PATCH] add manage funds dialog and transfers form styling (#147) * add manage funds dialog and transfers form styling * add sticky footer backdrop * add testnet deposit toggle --- src/components/SearchSelectMenu.tsx | 19 ++-- src/components/SelectMenu.tsx | 19 ++-- src/components/ToggleButton.tsx | 4 + src/constants/dialogs.ts | 1 + src/layout/DialogManager.tsx | 2 + src/pages/Profile.tsx | 13 +-- src/styles/formMixins.ts | 29 +++++++ src/views/dialogs/DepositDialog.tsx | 48 +---------- .../DepositDialog/DepositDialogContent.tsx | 56 ++++++++++++ src/views/dialogs/ManageFundsDialog.tsx | 86 +++++++++++++++++++ src/views/dialogs/TradeDialog.tsx | 2 - .../AccountManagementForms/DepositForm.tsx | 30 ++++--- .../DepositForm/DepositButtonAndReceipt.tsx | 11 ++- .../TestnetDepositForm.tsx | 26 +++--- .../AccountManagementForms/WithdrawForm.tsx | 30 +++---- .../WithdrawForm/WithdrawButtonAndReceipt.tsx | 30 ++++--- src/views/forms/TradeForm.tsx | 4 +- src/views/forms/TradeForm/TradeSideToggle.tsx | 3 +- src/views/forms/TransferForm.tsx | 24 +++--- .../TransferForm/TransferButtonAndReceipt.tsx | 17 +++- 20 files changed, 311 insertions(+), 143 deletions(-) create mode 100644 src/views/dialogs/DepositDialog/DepositDialogContent.tsx create mode 100644 src/views/dialogs/ManageFundsDialog.tsx diff --git a/src/components/SearchSelectMenu.tsx b/src/components/SearchSelectMenu.tsx index 74a484e..fa368ea 100644 --- a/src/components/SearchSelectMenu.tsx +++ b/src/components/SearchSelectMenu.tsx @@ -12,6 +12,8 @@ import { WithDetailsReceipt } from '@/components/WithDetailsReceipt'; import { WithLabel } from '@/components/WithLabel'; import { layoutMixins } from '@/styles/layoutMixins'; +import { formMixins } from '@/styles/formMixins'; +import breakpoints from '@/styles/breakpoints'; type ElementProps = { asChild?: boolean; @@ -84,27 +86,30 @@ export const SearchSelectMenu = ({ const Styled: Record = {}; +Styled.SearchSelectMenu = styled.div` + ${layoutMixins.column} +`; + Styled.MenuTrigger = styled.div` height: var(--form-input-height); ${layoutMixins.spacedRow} align-items: center; - padding: 0 1rem; + padding: var(--form-input-paddingY) var(--form-input-paddingX); + + @media ${breakpoints.tablet} { + height: var(--form-input-height-mobile); + } `; Styled.WithLabel = styled(WithLabel)` - --label-textColor: var(--color-text-0); - gap: 0.25rem; + ${formMixins.inputLabel} label { font: var(--font-mini-book); } `; -Styled.SearchSelectMenu = styled.div` - ${layoutMixins.column} -`; - Styled.WithDetailsReceipt = styled(WithDetailsReceipt)` --withReceipt-backgroundColor: var(--color-layer-2); diff --git a/src/components/SelectMenu.tsx b/src/components/SelectMenu.tsx index 6fd9486..2ef14ae 100644 --- a/src/components/SelectMenu.tsx +++ b/src/components/SelectMenu.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled, { type AnyStyledComponent } from 'styled-components'; +import styled, { css, type AnyStyledComponent } from 'styled-components'; import { Root, @@ -19,6 +19,7 @@ import { popoverMixins } from '@/styles/popoverMixins'; import { formMixins } from '@/styles/formMixins'; import { WithLabel } from '@/components/WithLabel'; +import { Icon, IconName } from './Icon'; export const SelectMenu = ({ children, @@ -45,7 +46,9 @@ export const SelectMenu = ({ ) : ( )} - {React.Children.toArray(children).length > 1 && } + {React.Children.toArray(children).length > 1 && ( + + )} @@ -91,12 +94,6 @@ Styled.Trigger = styled(Trigger)<{ $withBlur?: boolean }>` } `; -Styled.DropdownIcon = styled(SelectIcon)` - font-size: 0.675em; - color: var(--color-text-1); - margin-left: auto; -`; - Styled.Content = styled(Content)` --select-menu-content-maxWidth: ; max-width: var(--select-menu-content-maxWidth); @@ -119,3 +116,9 @@ Styled.WithLabel = styled(WithLabel)` ${formMixins.inputLabel} border-radius: 0; `; + +Styled.TriggerIcon = styled(Icon)` + width: 0.625rem; + height: 0.375rem; + color: var(--color-text-0); +`; diff --git a/src/components/ToggleButton.tsx b/src/components/ToggleButton.tsx index 80e8a34..f84b316 100644 --- a/src/components/ToggleButton.tsx +++ b/src/components/ToggleButton.tsx @@ -52,15 +52,19 @@ const Styled: Record = {}; Styled.BaseButton = styled(BaseButton)` --button-toggle-off-backgroundColor: var(--color-layer-3); --button-toggle-off-textColor: var(--color-text-0); + --button-toggle-off-border: solid var(--border-width) var(--button-border-color); --button-toggle-on-backgroundColor: var(--color-layer-1); --button-toggle-on-textColor: var(--color-text-2); + --button-toggle-on-border: solid var(--border-width) var(--button-border-color); --button-backgroundColor: var(--button-toggle-off-backgroundColor); --button-textColor: var(--button-toggle-off-textColor); + --button-border: var(--button-toggle-off-border); &[data-state='on'], &[data-state='active'] { --button-backgroundColor: var(--button-toggle-on-backgroundColor); --button-textColor: var(--button-toggle-on-textColor); + --button-border: var(--button-toggle-on-border); } `; diff --git a/src/constants/dialogs.ts b/src/constants/dialogs.ts index 0faa6e4..2cd745c 100644 --- a/src/constants/dialogs.ts +++ b/src/constants/dialogs.ts @@ -18,6 +18,7 @@ export enum DialogTypes { Trade = 'Trade', Transfer = 'Transfer', Withdraw = 'Withdraw', + ManageFunds = 'ManageFunds', } export enum TradeBoxDialogTypes { diff --git a/src/layout/DialogManager.tsx b/src/layout/DialogManager.tsx index b3956d2..eb5debd 100644 --- a/src/layout/DialogManager.tsx +++ b/src/layout/DialogManager.tsx @@ -23,6 +23,7 @@ import { TradeDialog } from '@/views/dialogs/TradeDialog'; import { TransferDialog } from '@/views/dialogs/TransferDialog'; import { RestrictedWalletDialog } from '@/views/dialogs/RestrictedWalletDialog'; import { WithdrawDialog } from '@/views/dialogs/WithdrawDialog'; +import { ManageFundsDialog } from '@/views/dialogs/ManageFundsDialog'; import { OrderDetailsDialog } from '@/views/dialogs/DetailsDialog/OrderDetailsDialog'; import { FillDetailsDialog } from '@/views/dialogs/DetailsDialog/FillDetailsDialog'; @@ -65,5 +66,6 @@ export const DialogManager = () => { [DialogTypes.Trade]: , [DialogTypes.Transfer]: , [DialogTypes.Withdraw]: , + [DialogTypes.ManageFunds]: , }[type]; }; diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 3b0e693..5152ebe 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -51,11 +51,14 @@ const Profile = () => { icon: { iconName: IconName.Gear }, href: AppRoute.Settings, }, - // { - // key: 'tutorials', - // label: stringGetter({ key: STRING_KEYS.TUTORIALS }), - // icon: { iconName: IconName.Comment }, - // }, + isConnected && { + key: 'transfers', + label: stringGetter({ key: STRING_KEYS.MANAGE_FUNDS }), + icon: { iconName: IconName.Transfer }, + onClick: () => { + dispatch(openDialog({ type: DialogTypes.ManageFunds })); + }, + }, isConnected ? { key: 'sign-out', diff --git a/src/styles/formMixins.ts b/src/styles/formMixins.ts index 1dda4db..5e7b2ff 100644 --- a/src/styles/formMixins.ts +++ b/src/styles/formMixins.ts @@ -107,12 +107,17 @@ export const formMixins: Record< `, inputLabel: css` + --label-textColor: var(--color-text-1); position: relative; height: 100%; width: 100%; gap: 0; border-radius: inherit; + + @media ${breakpoints.tablet} { + gap: 0.25rem; + } `, inputToggleGroup: css` @@ -130,4 +135,28 @@ export const formMixins: Record< --button-toggle-off-textColor: var(--color-text-1); } `, + + footer: css` + ${layoutMixins.stickyFooter} + ${layoutMixins.withStickyFooterBackdrop} + + margin-top: auto; + `, + + transfersForm: css` + ${() => formMixins.inputsColumn} + --form-input-gap: 1.25rem; + --form-input-height: 3.5rem; + --form-input-height-mobile: 4rem; + --form-input-paddingY: 0.5rem; + --form-input-paddingX: 1rem; + + label { + --label-textColor: var(--color-text-0); + } + + @media ${breakpoints.tablet} { + --form-input-gap: 1rem; + } + `, }; diff --git a/src/views/dialogs/DepositDialog.tsx b/src/views/dialogs/DepositDialog.tsx index 66f47a7..d9dbba2 100644 --- a/src/views/dialogs/DepositDialog.tsx +++ b/src/views/dialogs/DepositDialog.tsx @@ -1,23 +1,15 @@ -import { useState } from 'react'; -import styled, { type AnyStyledComponent } from 'styled-components'; - -import { isMainnet } from '@/constants/networks'; import { STRING_KEYS } from '@/constants/localization'; import { useBreakpoints, useStringGetter } from '@/hooks'; import { Dialog, DialogPlacement } from '@/components/Dialog'; -import { DepositForm } from '@/views/forms/AccountManagementForms/DepositForm'; -import { TestnetDepositForm } from '@/views/forms/AccountManagementForms/TestnetDepositForm'; - -import { layoutMixins } from '@/styles/layoutMixins'; +import { DepositDialogContent } from './DepositDialog/DepositDialogContent'; type ElementProps = { setIsOpen?: (open: boolean) => void; }; export const DepositDialog = ({ setIsOpen }: ElementProps) => { - const [showFaucet, setShowFaucet] = useState(!isMainnet); const stringGetter = useStringGetter(); const { isMobile } = useBreakpoints(); @@ -28,45 +20,9 @@ export const DepositDialog = ({ setIsOpen }: ElementProps) => { isOpen setIsOpen={setIsOpen} title={stringGetter({ key: STRING_KEYS.DEPOSIT })} - description={showFaucet && 'Test funds will be sent directly to your dYdX account.'} placement={isMobile ? DialogPlacement.FullScreen : DialogPlacement.Default} > - - {isMainnet || !showFaucet ? ( - - ) : ( - - )} - {!isMainnet && ( - setShowFaucet(!showFaucet)}> - {showFaucet ? 'Show deposit form' : 'Show test faucet'} - - )} - + ); }; - -const Styled: Record = {}; - -Styled.TextToggle = styled.div` - ${layoutMixins.stickyFooter} - color: var(--color-accent); - cursor: pointer; - - margin-top: auto; - - &:hover { - text-decoration: underline; - } -`; - -Styled.Content = styled.div` - ${layoutMixins.stickyArea0} - --stickyArea0-bottomHeight: 2rem; - --stickyArea0-bottomGap: 1rem; - --stickyArea0-totalInsetBottom: 0.5rem; - - ${layoutMixins.flexColumn} - gap: 1rem; -`; diff --git a/src/views/dialogs/DepositDialog/DepositDialogContent.tsx b/src/views/dialogs/DepositDialog/DepositDialogContent.tsx new file mode 100644 index 0000000..68367e6 --- /dev/null +++ b/src/views/dialogs/DepositDialog/DepositDialogContent.tsx @@ -0,0 +1,56 @@ +import { useState } from 'react'; +import styled, { type AnyStyledComponent } from 'styled-components'; + +import { isMainnet } from '@/constants/networks'; +import { layoutMixins } from '@/styles/layoutMixins'; + +import { DepositForm } from '@/views/forms/AccountManagementForms/DepositForm'; +import { TestnetDepositForm } from '@/views/forms/AccountManagementForms/TestnetDepositForm'; + +type ElementProps = { + onDeposit?: () => void; +}; + +export const DepositDialogContent = ({ onDeposit }: ElementProps) => { + const [showFaucet, setShowFaucet] = useState(!isMainnet); + + return ( + + {isMainnet || !showFaucet ? ( + + ) : ( + + )} + {!isMainnet && ( + setShowFaucet(!showFaucet)}> + {showFaucet ? 'Show deposit form' : 'Show test faucet'} + + )} + + ); +}; + +const Styled: Record = {}; + +Styled.Content = styled.div` + ${layoutMixins.flexColumn} + gap: 1rem; + + form { + flex: 1; + } +`; + +Styled.TextToggle = styled.div` + ${layoutMixins.stickyFooter} + --stickyArea-bottomHeight: 0; + + color: var(--color-accent); + cursor: pointer; + + margin-top: auto; + + &:hover { + text-decoration: underline; + } +`; diff --git a/src/views/dialogs/ManageFundsDialog.tsx b/src/views/dialogs/ManageFundsDialog.tsx new file mode 100644 index 0000000..862aa5d --- /dev/null +++ b/src/views/dialogs/ManageFundsDialog.tsx @@ -0,0 +1,86 @@ +import { shallowEqual, useSelector } from 'react-redux'; +import styled, { type AnyStyledComponent } from 'styled-components'; + +import { TransferInputField, TransferType } from '@/constants/abacus'; +import { STRING_KEYS } from '@/constants/localization'; +import { ButtonSize } from '@/constants/buttons'; +import { useStringGetter } from '@/hooks'; + +import { Dialog, DialogPlacement } from '@/components/Dialog'; +import { ToggleGroup } from '@/components/ToggleGroup'; +import { TransferForm } from '@/views/forms/TransferForm'; +import { WithdrawForm } from '@/views/forms/AccountManagementForms/WithdrawForm'; + +import { getTransferInputs } from '@/state/inputsSelectors'; + +import abacusStateManager from '@/lib/abacus'; + +import { DepositDialogContent } from './DepositDialog/DepositDialogContent'; + +type ElementProps = { + setIsOpen?: (open: boolean) => void; +}; + +export const ManageFundsDialog = ({ setIsOpen }: ElementProps) => { + const stringGetter = useStringGetter(); + const { type } = useSelector(getTransferInputs, shallowEqual) || {}; + const currentType = type?.rawValue ?? TransferType.deposit.rawValue; + + const closeDialog = () => setIsOpen?.(false); + + const transferTypeConfig = { + [TransferType.deposit.rawValue]: { + value: TransferType.deposit.rawValue, + label: stringGetter({ key: STRING_KEYS.DEPOSIT }), + component: , + }, + [TransferType.withdrawal.rawValue]: { + value: TransferType.withdrawal.rawValue, + label: stringGetter({ key: STRING_KEYS.WITHDRAW }), + component: , + }, + [TransferType.transferOut.rawValue]: { + value: TransferType.transferOut.rawValue, + label: stringGetter({ key: STRING_KEYS.TRANSFER }), + component: , + }, + }; + + return ( + + abacusStateManager.setTransferValue({ + field: TransferInputField.type, + value, + }) + } + /> + } + hasHeaderBorder + > + {transferTypeConfig[currentType].component} + + ); +}; +const Styled: Record = {}; + +Styled.Dialog = styled(Dialog)` + --dialog-content-paddingTop: 1.5rem; +`; + +Styled.ToggleGroup = styled(ToggleGroup)` + overflow-x: auto; + + button { + --button-toggle-off-border: none; + --button-padding: 0 1rem; + } +`; diff --git a/src/views/dialogs/TradeDialog.tsx b/src/views/dialogs/TradeDialog.tsx index 7129325..081bdf2 100644 --- a/src/views/dialogs/TradeDialog.tsx +++ b/src/views/dialogs/TradeDialog.tsx @@ -112,8 +112,6 @@ const Styled: Record = {}; Styled.Dialog = styled(Dialog)<{ currentStep: MobilePlaceOrderSteps }>` --dialog-backgroundColor: var(--color-layer-2); --dialog-header-height: 1rem; - --dialog-header-paddingTop: 1.5rem; - --dialog-header-paddingBottom: 1rem; --dialog-content-paddingTop: 0; --dialog-content-paddingBottom: 0; --dialog-content-paddingLeft: 0; diff --git a/src/views/forms/AccountManagementForms/DepositForm.tsx b/src/views/forms/AccountManagementForms/DepositForm.tsx index 849aa7b..094f154 100644 --- a/src/views/forms/AccountManagementForms/DepositForm.tsx +++ b/src/views/forms/AccountManagementForms/DepositForm.tsx @@ -353,14 +353,17 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => { /> {errorMessage && {errorMessage}} - + + + + ); }; @@ -368,13 +371,12 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => { const Styled: Record = {}; Styled.Form = styled.form` - --form-input-height: 3.5rem; + ${formMixins.transfersForm} +`; - ${layoutMixins.flexColumn} - gap: 1.5rem; - - ${layoutMixins.stickyArea1} - min-height: calc(100% - var(--stickyArea0-bottomHeight)); +Styled.Footer = styled.footer` + ${formMixins.footer} + --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom); `; Styled.WithDetailsReceipt = styled(WithDetailsReceipt)` diff --git a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx index 3be22f4..4072fae 100644 --- a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx +++ b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx @@ -28,7 +28,9 @@ import { Output, OutputType } from '@/components/Output'; import { Tag } from '@/components/Tag'; import { ToggleButton } from '@/components/ToggleButton'; import { WithReceipt } from '@/components/WithReceipt'; +import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton'; +import { calculateCanAccountTrade } from '@/state/accountCalculators'; import { getSubaccountBuyingPower, getSubaccountEquity } from '@/state/accountSelectors'; import { getTransferInputs } from '@/state/inputsSelectors'; @@ -64,6 +66,8 @@ export const DepositButtonAndReceipt = ({ const [isEditingSlippage, setIsEditingSlipapge] = useState(false); const stringGetter = useStringGetter(); + const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual); + const { matchNetwork: switchNetwork, isSwitchingNetwork, @@ -210,7 +214,9 @@ export const DepositButtonAndReceipt = ({ } slotError={slotError} > - {!isMatchingNetwork ? ( + {!canAccountTrade ? ( + + ) : !isMatchingNetwork ? ( + ); }; @@ -85,10 +83,14 @@ export const TestnetDepositForm = ({ onDeposit, onError }: DepositFormProps) => const Styled: Record = {}; Styled.Form = styled.form` - ${layoutMixins.column} - gap: 1rem; + ${formMixins.transfersForm} `; -Styled.SubmitButton = styled(Button)` - ${layoutMixins.stickyFooter} +Styled.Footer = styled.footer` + ${formMixins.footer} + --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom); + + button { + --button-width: 100%; + } `; diff --git a/src/views/forms/AccountManagementForms/WithdrawForm.tsx b/src/views/forms/AccountManagementForms/WithdrawForm.tsx index 0bd2b0b..94f159c 100644 --- a/src/views/forms/AccountManagementForms/WithdrawForm.tsx +++ b/src/views/forms/AccountManagementForms/WithdrawForm.tsx @@ -371,14 +371,16 @@ export const WithdrawForm = () => { /> {errorMessage && {errorMessage}} - + + + ); }; @@ -390,14 +392,12 @@ Styled.DiffOutput = styled(DiffOutput)` `; Styled.Form = styled.form` - --form-input-height: 3.5rem; + ${formMixins.transfersForm} +`; - min-height: calc(100% - var(--stickyArea0-bottomHeight)); - - ${layoutMixins.flexColumn} - gap: 1.25rem; - - ${layoutMixins.stickyArea1} +Styled.Footer = styled.footer` + ${formMixins.footer} + --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom); `; Styled.DestinationRow = styled.div` diff --git a/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx index 20057ae..ff9c3f2 100644 --- a/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx +++ b/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx @@ -24,7 +24,9 @@ import { Output, OutputType } from '@/components/Output'; import { Tag } from '@/components/Tag'; import { ToggleButton } from '@/components/ToggleButton'; import { WithReceipt } from '@/components/WithReceipt'; +import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton'; +import { calculateCanAccountTrade } from '@/state/accountCalculators'; import { getSubaccount } from '@/state/accountSelectors'; import { getTransferInputs } from '@/state/inputsSelectors'; @@ -57,6 +59,7 @@ export const WithdrawButtonAndReceipt = ({ const { leverage } = useSelector(getSubaccount, shallowEqual) || {}; const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {}; + const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual); const toAmount = summary?.toAmount && @@ -192,16 +195,20 @@ export const WithdrawButtonAndReceipt = ({ } > - + {!canAccountTrade ? ( + + ) : ( + + )} ); }; @@ -223,8 +230,7 @@ Styled.WithReceipt = styled(WithReceipt)` Styled.CollapsibleDetails = styled.div` ${layoutMixins.column} - padding: 0.375rem 1rem 0.5rem; - gap: 0.5rem; + padding: var(--form-input-paddingY) var(--form-input-paddingX); `; Styled.Details = styled(Details)` diff --git a/src/views/forms/TradeForm.tsx b/src/views/forms/TradeForm.tsx index 352b4ca..56fd561 100644 --- a/src/views/forms/TradeForm.tsx +++ b/src/views/forms/TradeForm.tsx @@ -460,10 +460,10 @@ Styled.ButtonRow = styled.div` `; Styled.Footer = styled.footer` - ${layoutMixins.stickyFooter} + ${formMixins.footer} + --stickyFooterBackdrop-outsetY: var(--tradeBox-content-paddingBottom); backdrop-filter: none; ${layoutMixins.column} ${layoutMixins.noPointerEvents} - margin-top: auto; `; diff --git a/src/views/forms/TradeForm/TradeSideToggle.tsx b/src/views/forms/TradeForm/TradeSideToggle.tsx index cc5df49..ab269e3 100644 --- a/src/views/forms/TradeForm/TradeSideToggle.tsx +++ b/src/views/forms/TradeForm/TradeSideToggle.tsx @@ -56,7 +56,8 @@ const ToggleContainer = styled(ToggleGroup)<{ value: OrderSide }>` position: relative; > button { - --button-border: none; + --button-toggle-on-border: none; + --button-toggle-off-border: none; --button-toggle-off-backgroundColor: transparent; --button-toggle-on-backgroundColor: transparent; --button-toggle-on-textColor: var(--toggle-color); diff --git a/src/views/forms/TransferForm.tsx b/src/views/forms/TransferForm.tsx index e1411de..75369c0 100644 --- a/src/views/forms/TransferForm.tsx +++ b/src/views/forms/TransferForm.tsx @@ -300,7 +300,7 @@ export const TransferForm = ({ }} > - onChangeAddress(e.target?.value)} label={ @@ -353,8 +353,8 @@ export const TransferForm = ({ ))} - - + onChangeAmount(floatValue)} @@ -371,7 +371,7 @@ export const TransferForm = ({ } disabled={isLoading} /> - + {showNotEnoughGasWarning && ( @@ -399,17 +399,12 @@ export const TransferForm = ({ const Styled: Record = {}; Styled.Form = styled.form` - ${formMixins.inputsColumn} - gap: 1.25rem; -`; - -Styled.FormInput = styled(FormInput)` - --form-input-height: 3.5rem; + ${formMixins.transfersForm} `; Styled.Footer = styled.footer` - ${layoutMixins.stickyFooter} - margin-top: auto; + ${formMixins.footer} + --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom); `; Styled.Row = styled.div` @@ -419,7 +414,6 @@ Styled.Row = styled.div` Styled.SelectMenu = styled(SelectMenu)` ${formMixins.inputSelectMenu} - --form-input-height: 3.5rem; `; Styled.SelectItem = styled(SelectItem)` @@ -430,6 +424,10 @@ Styled.NetworkSelectMenu = styled(Styled.SelectMenu)` pointer-events: none; `; +Styled.WithDetailsReceipt = styled(WithDetailsReceipt)` + --withReceipt-backgroundColor: var(--color-layer-2); +`; + Styled.InlineRow = styled.span` ${layoutMixins.inlineRow} height: 100%; diff --git a/src/views/forms/TransferForm/TransferButtonAndReceipt.tsx b/src/views/forms/TransferForm/TransferButtonAndReceipt.tsx index 3e13ac7..ecf524d 100644 --- a/src/views/forms/TransferForm/TransferButtonAndReceipt.tsx +++ b/src/views/forms/TransferForm/TransferButtonAndReceipt.tsx @@ -1,4 +1,5 @@ import { shallowEqual, useSelector } from 'react-redux'; +import styled, { type AnyStyledComponent } from 'styled-components'; import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons'; import { STRING_KEYS } from '@/constants/localization'; @@ -12,9 +13,9 @@ import { DiffOutput } from '@/components/DiffOutput'; import { Output, OutputType } from '@/components/Output'; import { Tag } from '@/components/Tag'; import { WithDetailsReceipt } from '@/components/WithDetailsReceipt'; -import { calculateCanAccountTrade } from '@/state/accountCalculators'; import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton'; +import { calculateCanAccountTrade } from '@/state/accountCalculators'; import { getSubaccount } from '@/state/accountSelectors'; import { getTransferInputs } from '@/state/inputsSelectors'; @@ -102,7 +103,7 @@ export const TransferButtonAndReceipt = ({ ].filter(isTruthy); return ( - + {!canAccountTrade ? ( ) : ( @@ -114,6 +115,16 @@ export const TransferButtonAndReceipt = ({ {stringGetter({ key: STRING_KEYS.CONFIRM_TRANSFER })} )} - + ); }; + +const Styled: Record = {}; + +Styled.WithDetailsReceipt = styled(WithDetailsReceipt)` + --withReceipt-backgroundColor: var(--color-layer-2); + + dl { + padding: var(--form-input-paddingY) var(--form-input-paddingX); + } +`;