diff --git a/web/cashtab/src/assets/styles/theme.js b/web/cashtab/src/assets/styles/theme.js
--- a/web/cashtab/src/assets/styles/theme.js
+++ b/web/cashtab/src/assets/styles/theme.js
@@ -1,6 +1,79 @@
export const theme = {
- iconOutlined: '#3e3f42',
- formBorders: '#e7edf3',
- formAddonBackground: '#f4f4f4',
- formAddonForeground: '#3e3f42',
+ primary: '#ff8d00',
+ contrast: '#fff',
+ app: {
+ sidebars: 'linear-gradient(270deg, #040c3c, #212c6e)',
+ background: '#fbfbfd',
+ },
+ wallet: {
+ background: '#fff',
+ text: {
+ primary: '#000',
+ secondary: '#3e3f42',
+ },
+ switch: {
+ activeCash: {
+ shadow:
+ 'inset 8px 8px 16px #d67600, inset -8px -8px 16px #ffa400',
+ },
+ activeToken: {
+ background: '#5ebd6d',
+ shadow:
+ 'inset 5px 5px 11px #4e9d5a, inset -5px -5px 11px #6edd80',
+ },
+ inactive: {
+ background: 'linear-gradient(145deg, #eeeeee, #c8c8c8)',
+ },
+ },
+ borders: { color: '#e2e2e2' },
+ shadow: 'rgba(0, 0, 0, 1)',
+ },
+ tokenListItem: {
+ background: '#ffffff',
+ color: '',
+ boxShadow:
+ 'rgba(0, 0, 0, 0.01) 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 8px,rgba(0, 0, 0, 0.04) 0px 16px 24px, rgba(0, 0, 0, 0.01) 0px 24px 32px',
+ border: '#e9eaed',
+ hoverBorder: '#5ebd6d',
+ },
+ footer: {
+ background: '#fff',
+ navIconInactive: '#949494',
+ },
+ forms: {
+ error: '#f04134',
+ border: '#e7edf3',
+ addonBackground: '#f4f4f4',
+ addonForeground: '#3e3f42',
+ selectionBackground: '#fff',
+ },
+ icons: { outlined: '#3e3f42' },
+ modals: {
+ buttons: { background: '#fff' },
+ },
+ settings: { delete: 'red' },
+ qr: {
+ background: '#fff',
+ token: '#5ebd6d',
+ shadow:
+ 'rgba(0, 0, 0, 0.01) 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 8px, rgba(0, 0, 0, 0.04) 0px 16px 24px, rgba(0, 0, 0, 0.01) 0px 24px 32px',
+ },
+ buttons: {
+ primary: {
+ backgroundImage:
+ 'linear-gradient(270deg, #ff8d00 0%, #bb5a00 100%)',
+ color: '#fff',
+ hoverShadow: '0px 3px 10px -5px rgba(0, 0, 0, 0.75)',
+ },
+ secondary: {
+ background: '#e9eaed',
+ color: '#444',
+ hoverShadow: '0px 3px 10px -5px rgba(0, 0, 0, 0.75)',
+ },
+ },
+ collapses: {
+ background: '#fbfcfd',
+ border: '#eaedf3',
+ color: '#3e3f42',
+ },
};
diff --git a/web/cashtab/src/components/App.js b/web/cashtab/src/components/App.js
--- a/web/cashtab/src/components/App.js
+++ b/web/cashtab/src/components/App.js
@@ -33,30 +33,38 @@
const GlobalStyle = createGlobalStyle`
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button {
border-radius: 8px;
- background-color: #fff;
- color: rgb(62, 63, 66);
+ background-color: ${props => props.theme.modals.buttons.background};
+ color: ${props => props.theme.wallet.text.secondary};
font-weight: bold;
}
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover {
- color: #f59332;
+ color: ${props => props.theme.primary};
transition: color 0.3s;
- background-color: white;
+ background-color: ${props => props.theme.modals.buttons.background};
}
-
+ .selectedCurrencyOption {
+ text-align: left;
+ color: ${props => props.theme.wallet.text.secondary} !important;
+ background-color: ${props => props.theme.contrast} !important;
+ }
+ .cashLoadingIcon {
+ color: ${props => props.theme.primary} !important
+ font-size: 48px !important;
+ }
.selectedCurrencyOption:hover {
- color: #fff !important;
- background-color: #ff8d00 !important;
+ color: ${props => props.theme.contrast} !important;
+ background-color: ${props => props.theme.primary} !important;
}
`;
const CustomApp = styled.div`
text-align: center;
font-family: 'Gilroy', sans-serif;
- background-color: #fbfbfd;
+ background-color: ${props => props.theme.app.background};
`;
const Footer = styled.div`
- background-color: #fff;
+ background-color: ${props => props.theme.footer.background};
border-radius: 20px;
position: fixed;
bottom: 0;
@@ -64,7 +72,7 @@
@media (max-width: 768px) {
width: 100%;
}
- border-top: 1px solid #e2e2e2;
+ border-top: 1px solid ${props => props.theme.wallet.borders.color};
`;
export const NavButton = styled.button`
@@ -78,22 +86,22 @@
@media (max-width: 360px) {
margin: 0 12px;
}
- background-color: #fff;
+ background-color: ${props => props.theme.footer.background};
border: none;
font-size: 12px;
font-weight: bold;
.anticon {
display: block;
- color: rgb(148, 148, 148);
+ color: ${props => props.theme.footer.navIconInactive};
font-size: 24px;
margin-bottom: 6px;
}
- ${({ active }) =>
+ ${({ active, ...props }) =>
active &&
`
- color: #ff8d00;
+ color: ${props.theme.primary};
.anticon {
- color: #ff8d00;
+ color: ${props.theme.primary};
}
`}
`;
@@ -104,19 +112,19 @@
justify-content: center;
width: 100%;
min-height: 100vh;
- background: linear-gradient(270deg, #040c3c, #212c6e);
+ background: ${props => props.theme.app.sidebars};
`;
export const WalletCtn = styled.div`
position: relative;
width: 500px;
- background-color: #fff;
+ background-color: ${props => props.theme.footerBackground};
min-height: 100vh;
padding: 10px 30px 120px 30px;
- background: #fff;
- -webkit-box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1);
- -moz-box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1);
- box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1);
+ background: ${props => props.theme.wallet.background};
+ -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
+ -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
+ box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
@media (max-width: 768px) {
width: 100%;
-webkit-box-shadow: none;
@@ -133,13 +141,8 @@
padding: 20px 0 30px;
margin-bottom: 20px;
justify-content: space-between;
- border-bottom: 1px solid #e2e2e2;
- a {
- color: #848484;
- :hover {
- color: #ff8d00;
- }
- }
+ border-bottom: 1px solid ${props => props.theme.wallet.borders.color};
+
@media (max-width: 768px) {
a {
font-size: 12px;
diff --git a/web/cashtab/src/components/Common/CustomIcons.js b/web/cashtab/src/components/Common/CustomIcons.js
--- a/web/cashtab/src/components/Common/CustomIcons.js
+++ b/web/cashtab/src/components/Common/CustomIcons.js
@@ -8,26 +8,19 @@
QrcodeOutlined,
} from '@ant-design/icons';
-export const CashLoadingIcon = (
-
-);
+export const CashLoadingIcon = ;
export const ThemedCopyOutlined = styled(CopyOutlined)`
- color: ${props => props.theme.iconOutlined} !important;
+ color: ${props => props.theme.icons.outlined} !important;
`;
export const ThemedDollarOutlined = styled(DollarOutlined)`
- color: ${props => props.theme.iconOutlined} !important;
+ color: ${props => props.theme.icons.outlined} !important;
`;
export const ThemedWalletOutlined = styled(WalletOutlined)`
- color: ${props => props.theme.iconOutlined} !important;
+ color: ${props => props.theme.icons.outlined} !important;
`;
export const ThemedQrcodeOutlined = styled(QrcodeOutlined)`
- color: ${props => props.theme.iconOutlined} !important;
+ color: ${props => props.theme.icons.outlined} !important;
`;
export const LoadingBlock = styled.div`
@@ -40,7 +33,7 @@
svg {
width: 50px;
height: 50px;
- fill: #ff8d00;
+ fill: ${props => props.theme.primary};
}
`;
diff --git a/web/cashtab/src/components/Common/EnhancedInputs.js b/web/cashtab/src/components/Common/EnhancedInputs.js
--- a/web/cashtab/src/components/Common/EnhancedInputs.js
+++ b/web/cashtab/src/components/Common/EnhancedInputs.js
@@ -12,27 +12,28 @@
export const AntdFormCss = css`
.ant-input-group-addon {
background-color: ${props =>
- props.theme.formAddonBackground} !important;
- border: 1px solid ${props => props.theme.formBorders};
- color: ${props => props.theme.formAddonForeground} !important;
+ props.theme.forms.addonBackground} !important;
+ border: 1px solid ${props => props.theme.forms.border};
+ color: ${props => props.theme.forms.addonForeground} !important;
}
input.ant-input,
.ant-select-selection {
- background-color: #fff !important;
+ background-color: ${props =>
+ props.theme.forms.selectionBackground} !important;
box-shadow: none !important;
border-radius: 4px;
font-weight: bold;
- color: rgb(62, 63, 66);
+ color: ${props => props.theme.wallet.text.secondary};
opacity: 1;
height: 50px;
}
.ant-input-affix-wrapper {
- background-color: #fff;
- border: 1px solid #eaedf3 !important;
+ background-color: ${props => props.theme.forms.selectionBackground};
+ border: 1px solid ${props => props.theme.wallet.borders.color} !important;
}
.ant-select-selector {
height: 60px !important;
- border: 1px solid #eaedf3 !important;
+ border: 1px solid ${props => props.theme.wallet.borders.color} !important;
}
.ant-form-item-has-error
> div
@@ -41,29 +42,29 @@
> span
> span
> span.ant-input-affix-wrapper {
- background-color: #fff;
- border-color: #f04134 !important;
+ background-color: ${props => props.theme.forms.selectionBackground};
+ border-color: ${props => props.theme.forms.error} !important;
}
.ant-form-item-has-error .ant-input,
.ant-form-item-has-error .ant-input-affix-wrapper,
.ant-form-item-has-error .ant-input:hover,
.ant-form-item-has-error .ant-input-affix-wrapper:hover {
- background-color: #fff;
- border-color: #f04134 !important;
+ background-color: ${props => props.theme.forms.selectionBackground};
+ border-color: ${props => props.theme.forms.error} !important;
}
.ant-form-item-has-error
.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input)
.ant-select-selector {
- background-color: #fff;
- border-color: #f04134 !important;
+ background-color: ${props => props.theme.forms.selectionBackground};
+ border-color: ${props => props.theme.forms.error} !important;
}
.ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
line-height: 60px;
text-align: left;
- color: #3e3f42;
+ color: ${props => props.theme.wallet.text.secondary};
font-weight: bold;
}
`;
@@ -86,23 +87,22 @@
`;
export const InputNumberAddonText = styled.span`
- background-color: ${props =>
- props.theme.formAddonBackground} !important;
- border: border: 1px solid ${props => props.theme.formBorders};
- color: ${props => props.theme.formAddonForeground} !important;
- height: 50px;
- line-height: 47px;
+ background-color: ${props => props.theme.forms.addonBackground} !important;
+ border: 1px solid ${props => props.theme.forms.border};
+ color: ${props => props.theme.forms.addonForeground} !important;
+ height: 50px;
+ line-height: 47px;
- * {
- color: ${props => props.theme.formAddonForeground} !important;
- }
- ${props =>
- props.disabled
- ? `
+ * {
+ color: ${props => props.theme.forms.addonForeground} !important;
+ }
+ ${props =>
+ props.disabled
+ ? `
cursor: not-allowed;
`
- : `cursor: pointer;`}
- `;
+ : `cursor: pointer;`}
+`;
export const SendBchInput = ({
onMax,
@@ -124,11 +124,6 @@
key={currency.value}
value={currency.value}
className="selectedCurrencyOption"
- style={{
- textAlign: 'left',
- backgroundColor: 'white',
- color: ' #3e3f42',
- }}
>
{currency.label}
diff --git a/web/cashtab/src/components/Common/PrimaryButton.js b/web/cashtab/src/components/Common/PrimaryButton.js
--- a/web/cashtab/src/components/Common/PrimaryButton.js
+++ b/web/cashtab/src/components/Common/PrimaryButton.js
@@ -2,8 +2,8 @@
const PrimaryButton = styled.button`
border: none;
- color: #fff;
- background-image: linear-gradient(270deg, #ff8d00 0%, #bb5a00 100%);
+ color: ${props => props.theme.buttons.primary.color};
+ background-image: ${props => props.theme.buttons.primary.backgroundImage};
transition: all 0.5s ease;
background-size: 200% auto;
font-size: 18px;
@@ -14,12 +14,12 @@
cursor: pointer;
:hover {
background-position: right center;
- -webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
- -moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
- box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
+ -webkit-box-shadow: ${props => props.theme.buttons.primary.hoverShadow};
+ -moz-box-shadow: ${props => props.theme.buttons.primary.hoverShadow};
+ box-shadow: ${props => props.theme.buttons.primary.hoverShadow};
}
svg {
- fill: #fff;
+ fill: ${props => props.theme.buttons.primary.color};
}
@media (max-width: 768px) {
font-size: 16px;
@@ -29,8 +29,8 @@
const SecondaryButton = styled.button`
border: none;
- color: #444;
- background: #e9eaed;
+ color: ${props => props.theme.buttons.secondary.color};
+ background: ${props => props.theme.buttons.secondary.background};
transition: all 0.5s ease;
font-size: 18px;
width: 100%;
@@ -40,12 +40,13 @@
outline: none;
margin-bottom: 20px;
:hover {
- -webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
- -moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
- box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
+ -webkit-box-shadow: ${props =>
+ props.theme.buttons.secondary.hoverShadow};
+ -moz-box-shadow: ${props => props.theme.buttons.secondary.hoverShadow};
+ box-shadow: ${props => props.theme.buttons.secondary.hoverShadow};
}
svg {
- fill: #444;
+ fill: ${props => props.theme.buttons.secondary.color};
}
@media (max-width: 768px) {
font-size: 16px;
@@ -54,13 +55,34 @@
`;
const SmartButton = styled.button`
- background-image: ${({ disabled = false }) =>
+ ${({ disabled = false, ...props }) =>
disabled === true
- ? 'none'
- : 'linear-gradient(270deg, #ff8d00 0%, #bb5a00 100%);'};
- color: ${({ disabled = false }) => (disabled === true ? '#444;' : '#fff;')};
- background: ${({ disabled = false }) =>
- disabled === true ? '#e9eaed;' : ''};
+ ? `
+ background-image: 'none';
+ color: ${props.theme.buttons.secondary.color};
+ background: ${props.theme.buttons.secondary.background};
+ :hover {
+ -webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
+ -moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
+ box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
+ }
+ svg {
+ fill: ${props.theme.buttons.secondary.color};
+ }
+ `
+ : `
+ background-image: ${props.theme.buttons.primary.backgroundImage};
+ color: ${props.theme.buttons.primary.color};
+ :hover {
+ background-position: right center;
+ -webkit-box-shadow: ${props.theme.buttons.primary.hoverShadow};
+ -moz-box-shadow: ${props.theme.buttons.primary.hoverShadow};
+ box-shadow: ${props.theme.buttons.primary.hoverShadow};
+ svg {
+ fill: ${props.theme.buttons.primary.color};
+ }
+ }`}
+
border: none;
transition: all 0.5s ease;
font-size: 18px;
@@ -70,14 +92,7 @@
cursor: pointer;
outline: none;
margin-bottom: 20px;
- :hover {
- -webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
- -moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
- box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
- }
- svg {
- fill: #444;
- }
+
@media (max-width: 768px) {
font-size: 16px;
padding: 12px 0;
diff --git a/web/cashtab/src/components/Common/QRCode.js b/web/cashtab/src/components/Common/QRCode.js
--- a/web/cashtab/src/components/Common/QRCode.js
+++ b/web/cashtab/src/components/Common/QRCode.js
@@ -8,16 +8,16 @@
export const StyledRawQRCode = styled(RawQRCode)`
cursor: pointer;
border-radius: 23px;
- background: #ffffff;
- box-shadow: rgba(0, 0, 0, 0.01) 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 8px,
- rgba(0, 0, 0, 0.04) 0px 16px 24px, rgba(0, 0, 0, 0.01) 0px 24px 32px;
+ background: ${props => props.theme.qr.background};
+ box-shadow: ${props => props.theme.qr.shadow};
margin-bottom: 10px;
- border: 1px solid #e9eaed;
+ border: 1px solid ${props => props.theme.wallet.borders.color};
path:first-child {
- fill: #fff;
+ fill: ${props => props.theme.qr.background};
}
:hover {
- border-color: ${({ bch = 0 }) => (bch === 1 ? '#ff8d00;' : '#5ebd6d')};
+ border-color: ${({ bch = 0, ...props }) =>
+ bch === 1 ? props.theme.primary : props.theme.qr.token};
}
@media (max-width: 768px) {
border-radius: 18px;
@@ -32,8 +32,9 @@
width: 100%;
text-align: center;
- background-color: ${({ bch = 0 }) => (bch === 1 ? '#f59332;' : '#5ebd6d')};
- color: #fff;
+ background-color: ${({ bch = 0, ...props }) =>
+ bch === 1 ? props.theme.primary : props.theme.qr.token};
+ color: ${props => props.theme.contrast};
position: absolute;
top: 65px;
padding: 30px 0;
@@ -45,7 +46,7 @@
const CustomInput = styled.div`
font-size: 15px;
- color: #8e8e8e;
+ color: ${props => props.theme.wallet.text.secondary};
text-align: center;
cursor: pointer;
margin-bottom: 15px;
@@ -55,7 +56,7 @@
span {
font-weight: bold;
- color: #444;
+ color: ${props => props.theme.wallet.text.primary};
font-size: 16px;
}
input {
@@ -67,7 +68,7 @@
-ms-user-select: none;
user-select: none;
cursor: pointer;
- color: #444;
+ color: ${props => props.theme.wallet.text.primary};
padding: 10px 0;
background: transparent;
margin-bottom: 15px;
@@ -78,7 +79,7 @@
}
input::selection {
background: transparent;
- color: #444;
+ color: ${props => props.theme.wallet.text.primary};
}
@media (max-width: 768px) {
font-size: 11px;
diff --git a/web/cashtab/src/components/Common/StyledCollapse.js b/web/cashtab/src/components/Common/StyledCollapse.js
--- a/web/cashtab/src/components/Common/StyledCollapse.js
+++ b/web/cashtab/src/components/Common/StyledCollapse.js
@@ -2,11 +2,11 @@
import { Collapse } from 'antd';
export const StyledCollapse = styled(Collapse)`
- background: #fbfcfd !important;
- border: 1px solid #eaedf3 !important;
+ background: ${props => props.theme.collapses.background} !important;
+ border: 1px solid ${props => props.theme.collapses.border} !important;
.ant-collapse-content {
- border: 1px solid #eaedf3;
+ border: 1px solid ${props => props.theme.collapses.border};
border-top: none;
}
@@ -15,6 +15,6 @@
}
* {
- color: rgb(62, 63, 66) !important;
+ color: ${props => props.theme.collapses.color} !important;
}
`;
diff --git a/web/cashtab/src/components/Common/StyledOnBoarding.js b/web/cashtab/src/components/Common/StyledOnBoarding.js
deleted file mode 100644
--- a/web/cashtab/src/components/Common/StyledOnBoarding.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import styled from 'styled-components';
-
-const StyledOnBoarding = styled.div`
- .ant-card {
- background: #ffffff;
- box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
- overflow: hidden;
-
- &:hover {
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
- }
-
- * {
- color: rgb(62, 63, 66);
- }
-
- .ant-card-head {
- color: #6e6e6e !important;
- background: #fbfcfd;
- border-bottom: 1px solid #eaedf3;
- }
-
- .ant-alert {
- background: #fbfcfd;
- border: 1px solid #eaedf3;
- }
- }
- .ant-card-body {
- border: none;
- }
- .ant-collapse {
- background: #fbfcfd;
- border: 1px solid #eaedf3;
-
- .ant-collapse-content {
- border: 1px solid #eaedf3;
- border-top: none;
-
- .ant-collapse-content-box {
- padding: 6px;
- .ant-row.ant-form-item {
- margin-bottom: 0px;
- }
- }
- }
-
- .ant-collapse-item {
- border-bottom: 1px solid #eaedf3;
- }
-
- * {
- color: rgb(62, 63, 66) !important;
- }
- }
-`;
-
-export default StyledOnBoarding;
diff --git a/web/cashtab/src/components/Common/StyledPage.js b/web/cashtab/src/components/Common/StyledPage.js
deleted file mode 100644
--- a/web/cashtab/src/components/Common/StyledPage.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import styled from 'styled-components';
-
-const StyledPage = styled.div`
- .ant-card {
- background: #ffffff;
- box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
- overflow: hidden;
-
- &:hover {
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
- }
-
- * {
- color: rgb(62, 63, 66);
- }
-
- .ant-card-head {
- color: #6e6e6e !important;
- background: #fbfcfd;
- border-bottom: 1px solid #eaedf3;
- }
-
- .ant-alert {
- background: #fbfcfd;
- border: 1px solid #eaedf3;
- }
- }
- .ant-card-body {
- border: none;
- }
- .ant-collapse {
- background: #fbfcfd;
- border: 1px solid #eaedf3;
-
- .ant-collapse-content {
- border: 1px solid #eaedf3;
- border-top: none;
- }
-
- .ant-collapse-item {
- border-bottom: 1px solid #eaedf3;
- }
-
- * {
- color: rgb(62, 63, 66) !important;
- }
- }
-`;
-
-export default StyledPage;
diff --git a/web/cashtab/src/components/Common/WalletLabel.js b/web/cashtab/src/components/Common/WalletLabel.js
--- a/web/cashtab/src/components/Common/WalletLabel.js
+++ b/web/cashtab/src/components/Common/WalletLabel.js
@@ -5,7 +5,7 @@
font-size: 20px;
font-weight: bold;
display: inline-block;
- color: #ff8d00;
+ color: ${props => props.theme.primary};
margin-bottom: 0px;
@media (max-width: 400px) {
font-size: 16px;
diff --git a/web/cashtab/src/components/Common/__tests__/QRCode.test.js b/web/cashtab/src/components/Common/__tests__/QRCode.test.js
--- a/web/cashtab/src/components/Common/__tests__/QRCode.test.js
+++ b/web/cashtab/src/components/Common/__tests__/QRCode.test.js
@@ -1,6 +1,8 @@
import React from 'react';
import { render, fireEvent, act } from '@testing-library/react';
import { QRCode } from '../QRCode';
+import { ThemeProvider } from 'styled-components';
+import { theme } from '@assets/styles/theme';
describe('', () => {
jest.useFakeTimers();
@@ -8,11 +10,13 @@
it('QRCode copying cash address', async () => {
const OnClick = jest.fn();
const { container } = render(
- ,
+
+
+ ,
);
const qrCodeElement = container.querySelector('#borderedQRCode');
@@ -28,11 +32,13 @@
it('QRCode copying SLP address', () => {
const OnClick = jest.fn();
const { container } = render(
- ,
+
+
+ ,
);
const qrCodeElement = container.querySelector('#borderedQRCode');
fireEvent.click(qrCodeElement);
@@ -40,7 +46,11 @@
});
it('QRCode without address', () => {
- const { container } = render();
+ const { container } = render(
+
+
+ ,
+ );
const qrCodeElement = container.querySelector('#borderedQRCode');
fireEvent.click(qrCodeElement);
diff --git a/web/cashtab/src/components/Common/__tests__/StyledCollapse.test.js b/web/cashtab/src/components/Common/__tests__/StyledCollapse.test.js
--- a/web/cashtab/src/components/Common/__tests__/StyledCollapse.test.js
+++ b/web/cashtab/src/components/Common/__tests__/StyledCollapse.test.js
@@ -1,9 +1,15 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { StyledCollapse } from '../StyledCollapse';
+import { ThemeProvider } from 'styled-components';
+import { theme } from '@assets/styles/theme';
test('Render StyledCollapse component', () => {
- const component = renderer.create();
+ const component = renderer.create(
+
+
+ ,
+ );
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
diff --git a/web/cashtab/src/components/Common/__tests__/StyledOnBoarding.test.js b/web/cashtab/src/components/Common/__tests__/StyledOnBoarding.test.js
deleted file mode 100644
--- a/web/cashtab/src/components/Common/__tests__/StyledOnBoarding.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import StyledOnBoarding from '../StyledOnBoarding';
-
-test('Render StyledOnBoarding component', () => {
- const component = renderer.create();
- let tree = component.toJSON();
- expect(tree).toMatchSnapshot();
-});
diff --git a/web/cashtab/src/components/Common/__tests__/StyledPage.test.js b/web/cashtab/src/components/Common/__tests__/StyledPage.test.js
deleted file mode 100644
--- a/web/cashtab/src/components/Common/__tests__/StyledPage.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import StyledPage from '../StyledPage';
-
-test('Render StyledPage component', () => {
- const component = renderer.create();
- let tree = component.toJSON();
- expect(tree).toMatchSnapshot();
-});
diff --git a/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap b/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap
--- a/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap
+++ b/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap
@@ -2,7 +2,7 @@
exports[`Render StyledCollapse component 1`] = `
`;
diff --git a/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledOnBoarding.test.js.snap b/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledOnBoarding.test.js.snap
deleted file mode 100644
--- a/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledOnBoarding.test.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render StyledOnBoarding component 1`] = `
-
-`;
diff --git a/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledPage.test.js.snap b/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledPage.test.js.snap
deleted file mode 100644
--- a/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledPage.test.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render StyledPage component 1`] = `
-
-`;
diff --git a/web/cashtab/src/components/Configure/Configure.js b/web/cashtab/src/components/Configure/Configure.js
--- a/web/cashtab/src/components/Configure/Configure.js
+++ b/web/cashtab/src/components/Configure/Configure.js
@@ -29,10 +29,10 @@
const SettingsLink = styled.a`
text-decoration: underline;
- color: #ff8d00;
+ color: ${props => props.theme.primary};
:visited {
text-decoration: underline;
- color: #ff8d00;
+ color: ${props => props.theme.primary};
}
`;
@@ -65,7 +65,7 @@
h3 {
font-size: 16px;
- color: #444;
+ color: ${props => props.theme.wallet.text.secondary};
margin: 0;
text-align: left;
white-space: nowrap;
@@ -93,20 +93,20 @@
}
svg {
- stroke: #444;
- fill: #444;
+ stroke: ${props => props.theme.wallet.text.secondary};
+ fill: ${props => props.theme.wallet.text.secondary};
width: 25px;
height: 25px;
margin-right: 20px;
cursor: pointer;
:first-child:hover {
- stroke: #ff8d00;
- fill: #ff8d00;
+ stroke: ${props => props.theme.primary};
+ fill: ${props => props.theme.primary};
}
:hover {
- stroke: red;
- fill: red;
+ stroke: ${props => props.theme.settings.delete};
+ fill: ${props => props.theme.settings.delete};
}
}
`;
@@ -120,7 +120,7 @@
h3 {
font-size: 16px;
display: inline-block;
- color: #444;
+ color: ${props => props.theme.wallet.text.secondary};
margin: 0;
text-align: left;
font-weight: bold;
@@ -131,7 +131,7 @@
h4 {
font-size: 16px;
display: inline-block;
- color: #ff8d00 !important;
+ color: ${props => props.theme.primary} !important;
margin: 0;
text-align: right;
}
@@ -143,18 +143,18 @@
const StyledConfigure = styled.div`
h2 {
- color: #444;
+ color: ${props => props.theme.wallet.text.secondary};
font-size: 25px;
}
p {
- color: #444;
+ color: ${props => props.theme.wallet.text.secondary};
}
`;
const StyledSpacer = styled.div`
height: 1px;
width: 100%;
- background-color: #e2e2e2;
+ background-color: ${props => props.theme.wallet.borders.color};
margin: 60px 0 50px;
`;
diff --git a/web/cashtab/src/components/Configure/__tests__/Configure.test.js b/web/cashtab/src/components/Configure/__tests__/Configure.test.js
--- a/web/cashtab/src/components/Configure/__tests__/Configure.test.js
+++ b/web/cashtab/src/components/Configure/__tests__/Configure.test.js
@@ -1,6 +1,8 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Configure from '../Configure';
+import { ThemeProvider } from 'styled-components';
+import { theme } from '@assets/styles/theme';
let realUseContext;
let useContextMock;
beforeEach(() => {
@@ -13,14 +15,22 @@
test('Configure without a wallet', () => {
useContextMock.mockReturnValue({ wallet: undefined });
- const component = renderer.create();
+ const component = renderer.create(
+
+
+ ,
+ );
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
test('Configure with a wallet', () => {
useContextMock.mockReturnValue({ wallet: { mnemonic: 'test mnemonic' } });
- const component = renderer.create();
+ const component = renderer.create(
+
+
+ ,
+ );
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
diff --git a/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap b/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
--- a/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
+++ b/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
@@ -10,14 +10,8 @@
>