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 @@ >

props.theme.wallet.text.secondary}; width: 100%; font-size: 16px; margin-bottom: 60px; @@ -27,7 +26,7 @@ export const WelcomeLink = styled.a` text-decoration: underline; - color: #ff8d00; + color: ${props => props.theme.primary}; `; export const OnBoarding = ({ history }) => { @@ -115,40 +114,38 @@ Import Wallet {seedInput && ( - - -
- - } - placeholder="mnemonic (seed phrase)" - name="mnemonic" - autoComplete="off" - onChange={e => handleChange(e)} - required - /> - + +
+ + } + placeholder="mnemonic (seed phrase)" + name="mnemonic" + autoComplete="off" + onChange={e => handleChange(e)} + required + /> + - submit()} - > - Import - -
- -
+ submit()} + > + Import + + + )} ); 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 @@ -27,14 +27,14 @@ export const BalanceHeader = styled.div` p { - color: #777; + color: ${props => props.theme.wallet.text.secondary} width: 100%; font-size: 14px; margin-bottom: 0px; } h3 { - color: #444; + color: ${props => props.theme.wallet.text.primary}; width: 100%; font-size: 26px; font-weight: bold; @@ -43,7 +43,7 @@ `; export const BalanceHeaderFiat = styled.div` - color: #444; + color: ${props => props.theme.wallet.text.secondary}; width: 100%; font-size: 18px; margin-bottom: 20px; @@ -54,14 +54,14 @@ `; export const ZeroBalanceHeader = styled.div` - color: #444; + color: ${props => props.theme.wallet.text.secondary}; width: 100%; font-size: 14px; margin-bottom: 20px; `; const ConvertAmount = styled.div` - color: #777; + color: ${props => props.theme.wallet.text.secondary}; width: 100%; font-size: 14px; margin-bottom: 10px; diff --git a/web/cashtab/src/components/Wallet/TokenList.js b/web/cashtab/src/components/Wallet/TokenList.js --- a/web/cashtab/src/components/Wallet/TokenList.js +++ b/web/cashtab/src/components/Wallet/TokenList.js @@ -1,13 +1,18 @@ import React from 'react'; +import styled from 'styled-components'; import TokenListItem from './TokenListItem'; import { Link } from 'react-router-dom'; import { currency } from '@components/Common/Ticker.js'; import { formatBalance } from '@utils/cashMethods'; +export const TokenTitle = styled.h2` + color: ${props => props.theme.wallet.text.secondary}; +`; + const TokenList = ({ tokens }) => { return (
-

{currency.tokenTicker} Tokens

+ {currency.tokenTicker} Tokens {tokens.map(token => ( props.theme.tokenListItem.background}; margin-bottom: 3px; - 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; - border: 1px solid #e9eaed; + box-shadow: ${props => props.theme.tokenListItem.boxShadow}; + border: 1px solid ${props => props.theme.tokenListItem.border}; :hover { - border-color: #5ebd6d; + border-color: ${props => props.theme.tokenListItem.hoverBorder}; } `; diff --git a/web/cashtab/src/components/Wallet/Wallet.js b/web/cashtab/src/components/Wallet/Wallet.js --- a/web/cashtab/src/components/Wallet/Wallet.js +++ b/web/cashtab/src/components/Wallet/Wallet.js @@ -21,12 +21,12 @@ svg { width: 50px; height: 50px; - fill: #ff8d00; + fill: ${props => props.theme.primary}; } `; export const BalanceHeader = styled.div` - color: #444; + color: ${props => props.theme.wallet.text.primary}; width: 100%; font-size: 30px; font-weight: bold; @@ -36,7 +36,7 @@ `; export const BalanceHeaderFiat = styled.div` - color: #444; + color: ${props => props.theme.wallet.text.secondary}; width: 100%; font-size: 18px; margin-bottom: 20px; @@ -47,7 +47,7 @@ `; export const ZeroBalanceHeader = styled.div` - color: #444; + color: ${props => props.theme.wallet.text.primary}; width: 100%; font-size: 14px; margin-bottom: 5px; @@ -60,13 +60,16 @@ align-content: space-between; margin-bottom: 15px; .nonactiveBtn { - color: #444; - background: linear-gradient(145deg, #eeeeee, #c8c8c8) !important; + color: ${props => props.theme.wallet.text.secondary}; + background: ${props => + props.theme.wallet.switch.inactive.background} !important; box-shadow: none !important; } .slpActive { - background: #5ebd6d !important; - box-shadow: inset 5px 5px 11px #4e9d5a, inset -5px -5px 11px #6edd80 !important; + background: ${props => + props.theme.wallet.switch.activeToken.background} !important; + box-shadow: ${props => + props.theme.wallet.switch.activeToken.shadow} !important; } `; @@ -74,14 +77,14 @@ font-weight: bold; display: inline-block; cursor: pointer; - color: #ffffff; + color: ${props => props.theme.contrast}; font-size: 14px; padding: 6px 0; width: 100px; margin: 0 1px; text-decoration: none; - background: #ff8d00; - box-shadow: inset 8px 8px 16px #d67600, inset -8px -8px 16px #ffa400; + background: ${props => props.theme.primary}; + box-shadow: ${props => props.theme.wallet.switch.activeCash.shadow}; user-select: none; :first-child { border-radius: 100px 0 0 100px; @@ -92,23 +95,23 @@ `; export const Links = styled(Link)` - color: #444; + color: ${props => props.theme.wallet.text.secondary}; width: 100%; font-size: 16px; margin: 10px 0 20px 0; - border: 1px solid #444; + border: 1px solid ${props => props.theme.wallet.text.secondary}; padding: 14px 0; display: inline-block; border-radius: 3px; transition: all 200ms ease-in-out; svg { - fill: #444; + fill: ${props => props.theme.wallet.text.secondary}; } :hover { - color: #ff8d00; - border-color: #ff8d00; + color: ${props => props.theme.primary}; + border-color: ${props => props.theme.primary}; svg { - fill: #444; + fill: ${props => props.theme.primary}; } } @media (max-width: 768px) { @@ -118,24 +121,24 @@ `; export const ExternalLink = styled.a` - color: #444; + color: ${props => props.theme.wallet.text.secondary}; width: 100%; font-size: 16px; margin: 0 0 20px 0; - border: 1px solid #444; + border: 1px solid ${props => props.theme.wallet.text.secondary}; padding: 14px 0; display: inline-block; border-radius: 3px; transition: all 200ms ease-in-out; svg { - fill: #444; + fill: ${props => props.theme.wallet.text.secondary}; transition: all 200ms ease-in-out; } :hover { - color: #ff8d00; - border-color: #ff8d00; + color: ${props => props.theme.primary}; + border-color: ${props => props.theme.primary}; svg { - fill: #ff8d00; + fill: ${props => props.theme.primary}; } } @media (max-width: 768px) { diff --git a/web/cashtab/src/components/Wallet/__tests__/Wallet.test.js b/web/cashtab/src/components/Wallet/__tests__/Wallet.test.js --- a/web/cashtab/src/components/Wallet/__tests__/Wallet.test.js +++ b/web/cashtab/src/components/Wallet/__tests__/Wallet.test.js @@ -1,5 +1,7 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { ThemeProvider } from 'styled-components'; +import { theme } from '@assets/styles/theme'; import Wallet from '../Wallet'; import { walletWithBalancesAndTokens, @@ -23,9 +25,11 @@ test('Wallet without BCH balance', () => { useContextMock.mockReturnValue(walletWithoutBalancesMock); const component = renderer.create( - - - , + + + + + , ); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -34,9 +38,11 @@ test('Wallet with BCH balances', () => { useContextMock.mockReturnValue(walletWithBalancesMock); const component = renderer.create( - - - , + + + + + , ); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -45,9 +51,11 @@ test('Wallet with BCH balances and tokens', () => { useContextMock.mockReturnValue(walletWithBalancesAndTokens); const component = renderer.create( - - - , + + + + + , ); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -59,9 +67,11 @@ balances: { totalBalance: 0 }, }); const component = renderer.create( - - - , + + + + + , ); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); 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 @@ -3,14 +3,14 @@ exports[`Wallet with BCH balances 1`] = ` Array [
0.06047469 BCHA
,