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 @@
) : (
<>
<BalanceHeader>
- <p>Available balance</p>
- <h3>
- {formatBalance(balances.totalBalance)}{' '}
- {currency.ticker}
- </h3>
+ {formatBalance(balances.totalBalance)} {currency.ticker}
</BalanceHeader>
{fiatPrice !== null && (
<BalanceHeaderFiat>
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 && (
<>
<BalanceHeader>
- <p>Available balance</p>
- <h3>
- {formatBalance(token.balance)}{' '}
- {token.info.tokenTicker}
- </h3>
+ {formatBalance(token.balance)} {token.info.tokenTicker}
</BalanceHeader>
<Row type="flex">
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 [
<div
- className="sc-jTzLTM ftdfiF"
+ className="sc-fjdhpX gMmFTr"
>
- <p>
- Available balance
- </p>
- <h3>
- 0.06047469
-
- BCHA
- </h3>
+ 0.06047469
+
+ BCHA
</div>,
<div
- className="sc-fjdhpX hMeYog"
+ className="sc-jzJRlG fhWiOX"
>
$
NaN
@@ -334,7 +329,7 @@
</div>
</div>
<div
- className="sc-cSHVUG lierlF"
+ className="sc-kgoBCf FIGxW"
>
=
$ NaN USD
@@ -364,19 +359,14 @@
exports[`Wallet with BCH balances and tokens 1`] = `
Array [
<div
- className="sc-jTzLTM ftdfiF"
+ className="sc-fjdhpX gMmFTr"
>
- <p>
- Available balance
- </p>
- <h3>
- 0.06047469
-
- BCHA
- </h3>
+ 0.06047469
+
+ BCHA
</div>,
<div
- className="sc-fjdhpX hMeYog"
+ className="sc-jzJRlG fhWiOX"
>
$
NaN
@@ -695,7 +685,7 @@
</div>
</div>
<div
- className="sc-cSHVUG lierlF"
+ className="sc-kgoBCf FIGxW"
>
=
$ NaN USD
@@ -725,19 +715,14 @@
exports[`Wallet with BCH balances and tokens and state field 1`] = `
Array [
<div
- className="sc-jTzLTM ftdfiF"
+ className="sc-fjdhpX gMmFTr"
>
- <p>
- Available balance
- </p>
- <h3>
- 0.06047469
-
- BCHA
- </h3>
+ 0.06047469
+
+ BCHA
</div>,
<div
- className="sc-fjdhpX hMeYog"
+ className="sc-jzJRlG fhWiOX"
>
$
NaN
@@ -1056,7 +1041,7 @@
</div>
</div>
<div
- className="sc-cSHVUG lierlF"
+ className="sc-kgoBCf FIGxW"
>
=
$ NaN USD
@@ -1086,19 +1071,14 @@
exports[`Wallet with BCH balances and tokens and state field, but no params in state 1`] = `
Array [
<div
- className="sc-jTzLTM ftdfiF"
+ className="sc-fjdhpX gMmFTr"
>
- <p>
- Available balance
- </p>
- <h3>
- 0.06047469
-
- BCHA
- </h3>
+ 0.06047469
+
+ BCHA
</div>,
<div
- className="sc-fjdhpX hMeYog"
+ className="sc-jzJRlG fhWiOX"
>
$
NaN
@@ -1417,7 +1397,7 @@
</div>
</div>
<div
- className="sc-cSHVUG lierlF"
+ className="sc-kgoBCf FIGxW"
>
=
$ NaN USD
@@ -1447,7 +1427,7 @@
exports[`Wallet without BCH balance 1`] = `
Array [
<div
- className="sc-jzJRlG kNGwIp"
+ className="sc-cSHVUG hfhRzx"
>
You currently have 0
BCHA
@@ -1766,7 +1746,7 @@
</div>
</div>
<div
- className="sc-cSHVUG lierlF"
+ className="sc-kgoBCf FIGxW"
>
=
$ NaN USD
@@ -1795,7 +1775,7 @@
exports[`Without wallet defined 1`] = `
Array [
<div
- className="sc-jzJRlG kNGwIp"
+ className="sc-cSHVUG hfhRzx"
>
You currently have 0
BCHA
@@ -2114,7 +2094,7 @@
</div>
</div>
<div
- className="sc-cSHVUG lierlF"
+ className="sc-kgoBCf FIGxW"
>
=
$ 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 [
<div
- className="sc-jTzLTM ftdfiF"
+ className="sc-fjdhpX gMmFTr"
>
- <p>
- Available balance
- </p>
- <h3>
- 6.001
-
- TBS
- </h3>
+ 6.001
+
+ TBS
</div>,
<div
className="ant-row"
@@ -265,16 +260,11 @@
exports[`Wallet with BCH balances and tokens and state field 1`] = `
Array [
<div
- className="sc-jTzLTM ftdfiF"
+ className="sc-fjdhpX gMmFTr"
>
- <p>
- Available balance
- </p>
- <h3>
- 6.001
-
- TBS
- </h3>
+ 6.001
+
+ TBS
</div>,
<div
className="ant-row"
@@ -527,16 +517,11 @@
exports[`Wallet with BCH balances and tokens and state field, but no params in state 1`] = `
Array [
<div
- className="sc-jTzLTM ftdfiF"
+ className="sc-fjdhpX gMmFTr"
>
- <p>
- Available balance
- </p>
- <h3>
- 6.001
-
- TBS
- </h3>
+ 6.001
+
+ TBS
</div>,
<div
className="ant-row"
diff --git a/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap b/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap
--- a/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap
+++ b/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap
@@ -82,16 +82,16 @@
</div>
</div>,
<div
- className="sc-jhAzac vWMwd"
+ className="sc-fBuWsC imWsyn"
>
<div
- className="sc-fBuWsC jGeMc"
+ className="sc-fMiknA hPCOXE"
onClick={[Function]}
>
BCHA
</div>
<div
- className="sc-fBuWsC jGeMc nonactiveBtn"
+ className="sc-fMiknA hPCOXE nonactiveBtn"
onClick={[Function]}
>
SLPA
@@ -182,16 +182,16 @@
</div>
</div>,
<div
- className="sc-jhAzac vWMwd"
+ className="sc-fBuWsC imWsyn"
>
<div
- className="sc-fBuWsC jGeMc"
+ className="sc-fMiknA hPCOXE"
onClick={[Function]}
>
BCHA
</div>
<div
- className="sc-fBuWsC jGeMc nonactiveBtn"
+ className="sc-fMiknA hPCOXE nonactiveBtn"
onClick={[Function]}
>
SLPA
@@ -282,16 +282,16 @@
</div>
</div>,
<div
- className="sc-jhAzac vWMwd"
+ className="sc-fBuWsC imWsyn"
>
<div
- className="sc-fBuWsC jGeMc"
+ className="sc-fMiknA hPCOXE"
onClick={[Function]}
>
BCHA
</div>
<div
- className="sc-fBuWsC jGeMc nonactiveBtn"
+ className="sc-fMiknA hPCOXE nonactiveBtn"
onClick={[Function]}
>
SLPA
@@ -382,16 +382,16 @@
</div>
</div>,
<div
- className="sc-jhAzac vWMwd"
+ className="sc-fBuWsC imWsyn"
>
<div
- className="sc-fBuWsC jGeMc"
+ className="sc-fMiknA hPCOXE"
onClick={[Function]}
>
BCHA
</div>
<div
- className="sc-fBuWsC jGeMc nonactiveBtn"
+ className="sc-fMiknA hPCOXE nonactiveBtn"
onClick={[Function]}
>
SLPA
@@ -499,16 +499,16 @@
</div>
</div>,
<div
- className="sc-jhAzac vWMwd"
+ className="sc-fBuWsC imWsyn"
>
<div
- className="sc-fBuWsC jGeMc"
+ className="sc-fMiknA hPCOXE"
onClick={[Function]}
>
BCHA
</div>
<div
- className="sc-fBuWsC jGeMc nonactiveBtn"
+ className="sc-fMiknA hPCOXE nonactiveBtn"
onClick={[Function]}
>
SLPA