diff --git a/web/cashtab/src/components/Common/Atoms.js b/web/cashtab/src/components/Common/Atoms.js --- a/web/cashtab/src/components/Common/Atoms.js +++ b/web/cashtab/src/components/Common/Atoms.js @@ -50,3 +50,14 @@ export const AlertMsg = styled.p` color: ${props => props.theme.forms.error}; `; + +export const ConvertAmount = styled.div` + color: ${props => props.theme.wallet.text.secondary}; + width: 100%; + font-size: 14px; + margin-bottom: 10px; + font-weight: bold; + @media (max-width: 768px) { + font-size: 12px; + } +`; diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js --- a/web/cashtab/src/components/Send/Send.js +++ b/web/cashtab/src/components/Send/Send.js @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react'; -import styled from 'styled-components'; import { WalletContext } from '@utils/context'; import { Form, notification, message, Spin, Modal, Alert } from 'antd'; import { CashLoader, CashLoadingIcon } from '@components/Common/CustomIcons'; @@ -24,52 +23,12 @@ import { Event } from '@utils/GoogleAnalytics'; import { fiatToCrypto, shouldRejectAmountInput } from '@utils/validation'; import { formatBalance } from '@utils/cashMethods'; - -export const BalanceHeader = styled.div` - p { - color: ${props => props.theme.wallet.text.secondary} - width: 100%; - font-size: 14px; - margin-bottom: 0px; - } - - h3 { - color: ${props => props.theme.wallet.text.primary}; - width: 100%; - font-size: 26px; - font-weight: bold; - margin-bottom: 0px; - } -`; - -export const BalanceHeaderFiat = styled.div` - color: ${props => props.theme.wallet.text.secondary}; - width: 100%; - font-size: 18px; - margin-bottom: 20px; - font-weight: bold; - @media (max-width: 768px) { - font-size: 16px; - } -`; - -export const ZeroBalanceHeader = styled.div` - color: ${props => props.theme.wallet.text.secondary}; - width: 100%; - font-size: 14px; - margin-bottom: 20px; -`; - -const ConvertAmount = styled.div` - color: ${props => props.theme.wallet.text.secondary}; - width: 100%; - font-size: 14px; - margin-bottom: 10px; - font-weight: bold; - @media (max-width: 768px) { - font-size: 12px; - } -`; +import { + BalanceHeader, + BalanceHeaderFiat, + ZeroBalanceHeader, + ConvertAmount, +} from '@components/Common/Atoms'; // Note jestBCH is only used for unit tests; BCHJS must be mocked for jest const SendBCH = ({ jestBCH, filledAddress, callbackTxId }) => { @@ -438,11 +397,7 @@ ) : ( <> -

Available balance

-

- {formatBalance(balances.totalBalance)}{' '} - {currency.ticker} -

+ {formatBalance(balances.totalBalance)} {currency.ticker}
{fiatPrice !== null && ( diff --git a/web/cashtab/src/components/Send/SendToken.js b/web/cashtab/src/components/Send/SendToken.js --- a/web/cashtab/src/components/Send/SendToken.js +++ b/web/cashtab/src/components/Send/SendToken.js @@ -11,7 +11,7 @@ FormItemWithQRCodeAddon, } from '@components/Common/EnhancedInputs'; import useBCH from '@hooks/useBCH'; -import { BalanceHeader } from './Send'; +import { BalanceHeader } from '@components/Common/Atoms'; import { Redirect } from 'react-router-dom'; import useWindowDimensions from '@hooks/useWindowDimensions'; import { isMobile, isIOS, isSafari } from 'react-device-detect'; @@ -238,11 +238,7 @@ {token && ( <> -

Available balance

-

- {formatBalance(token.balance)}{' '} - {token.info.tokenTicker} -

+ {formatBalance(token.balance)} {token.info.tokenTicker}
diff --git a/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap b/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap --- a/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap +++ b/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap @@ -3,19 +3,14 @@ exports[`Wallet with BCH balances 1`] = ` Array [
-

- Available balance -

-

- 0.06047469 - - BCHA -

+ 0.06047469 + + BCHA
,
$ NaN @@ -334,7 +329,7 @@
= $ NaN USD @@ -364,19 +359,14 @@ exports[`Wallet with BCH balances and tokens 1`] = ` Array [
-

- Available balance -

-

- 0.06047469 - - BCHA -

+ 0.06047469 + + BCHA
,
$ NaN @@ -695,7 +685,7 @@
= $ NaN USD @@ -725,19 +715,14 @@ exports[`Wallet with BCH balances and tokens and state field 1`] = ` Array [
-

- Available balance -

-

- 0.06047469 - - BCHA -

+ 0.06047469 + + BCHA
,
$ NaN @@ -1056,7 +1041,7 @@
= $ NaN USD @@ -1086,19 +1071,14 @@ exports[`Wallet with BCH balances and tokens and state field, but no params in state 1`] = ` Array [
-

- Available balance -

-

- 0.06047469 - - BCHA -

+ 0.06047469 + + BCHA
,
$ NaN @@ -1417,7 +1397,7 @@
= $ NaN USD @@ -1447,7 +1427,7 @@ exports[`Wallet without BCH balance 1`] = ` Array [
You currently have 0 BCHA @@ -1766,7 +1746,7 @@
= $ NaN USD @@ -1795,7 +1775,7 @@ exports[`Without wallet defined 1`] = ` Array [
You currently have 0 BCHA @@ -2114,7 +2094,7 @@
= $ NaN USD diff --git a/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap b/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap --- a/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap +++ b/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap @@ -3,16 +3,11 @@ exports[`Wallet with BCH balances and tokens 1`] = ` Array [
-

- Available balance -

-

- 6.001 - - TBS -

+ 6.001 + + TBS
,
-

- Available balance -

-

- 6.001 - - TBS -

+ 6.001 + + TBS
,
-

- Available balance -

-

- 6.001 - - TBS -

+ 6.001 + + TBS
,
,
BCHA
SLPA @@ -182,16 +182,16 @@
,
BCHA
SLPA @@ -282,16 +282,16 @@
,
BCHA
SLPA @@ -382,16 +382,16 @@
,
BCHA
SLPA @@ -499,16 +499,16 @@
,
BCHA
SLPA