diff --git a/web/cashtab/extension/src/components/App.js b/web/cashtab/extension/src/components/App.js --- a/web/cashtab/extension/src/components/App.js +++ b/web/cashtab/extension/src/components/App.js @@ -1,17 +1,18 @@ import React, { useState } from 'react'; import 'antd/dist/antd.less'; import { Spin } from 'antd'; -import { CashLoadingIcon } from '@components/Common/CustomIcons'; +import { + CashLoadingIcon, + HomeIcon, + SendIcon, + ReceiveIcon, + SettingsIcon, +} from '@components/Common/CustomIcons'; import '../index.css'; import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'; import { theme } from '@assets/styles/theme'; -import { - FolderOpenFilled, - CaretRightOutlined, - SettingFilled, - AppstoreAddOutlined, -} from '@ant-design/icons'; -import Wallet from '@components/Wallet/Wallet'; +import Home from '@components/Home/Home'; +import Receive from '@components/Receive/Receive'; import Tokens from '@components/Tokens/Tokens'; import Send from '@components/Send/Send'; import SendToken from '@components/Send/SendToken'; @@ -21,7 +22,6 @@ import './App.css'; import { WalletContext } from '@utils/context'; import { isValidStoredWallet } from '@utils/cashMethods'; -import WalletLabel from '@components/Common/WalletLabel.js'; import { Route, Redirect, @@ -33,30 +33,61 @@ import PopOut from '@assets/popout.svg'; const GlobalStyle = createGlobalStyle` + *::placeholder { + color: ${props => props.theme.forms.placeholder} !important; + } + *::selection { + background: ${props => props.theme.eCashBlue} !important; + } + .ant-modal-content, .ant-modal-header, .ant-modal-title { + background-color: ${props => props.theme.modal.background} !important; + color: ${props => props.theme.modal.color} !important; + } + .ant-modal-content svg { + fill: ${props => props.theme.modal.color}; + } + .ant-modal-footer button { + background-color: ${props => + props.theme.modal.buttonBackground} !important; + color: ${props => props.theme.modal.color} !important; + border-color: ${props => props.theme.modal.border} !important; + :hover { + background-color: ${props => props.theme.eCashBlue} !important; + } + } .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, #cropControlsConfirm{ - border-radius: 8px; - background-color: ${props => props.theme.modals.buttons.background}; - color: ${props => props.theme.wallet.text.secondary}; - font-weight: bold; + border-radius: 3px; + border-radius: 3px; + background-color: ${props => + props.theme.modal.buttonBackground} !important; + color: ${props => props.theme.modal.color} !important; + border-color: ${props => props.theme.modal.border} !important; + :hover { + background-color: ${props => props.theme.eCashBlue} !important; + } + text-shadow: none !important; + text-shadow: none !important; } .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, #cropControlsConfirm:hover { - color: ${props => props.theme.primary}; - transition: color 0.3s; - background-color: ${props => props.theme.modals.buttons.background}; + color: ${props => props.theme.contrast}; + transition: all 0.3s; + background-color: ${props => props.theme.eCashBlue}; + border-color: ${props => props.theme.eCashBlue}; } - .selectedCurrencyOption { + .selectedCurrencyOption, .ant-select-dropdown { text-align: left; - color: ${props => props.theme.wallet.text.secondary} !important; - background-color: ${props => props.theme.contrast} !important; + color: ${props => props.theme.contrast} !important; + background-color: ${props => + props.theme.collapses.expandedBackground} !important; } .cashLoadingIcon { - color: ${props => props.theme.primary} !important; + color: ${props => props.theme.eCashBlue} !important; font-size: 48px !important; } .selectedCurrencyOption:hover { color: ${props => props.theme.contrast} !important; - background-color: ${props => props.theme.primary} !important; + background-color: ${props => props.theme.eCashBlue} !important; } #addrSwitch, #cropSwitch { .ant-switch-checked { @@ -72,27 +103,42 @@ background-color: ${props => props.theme.forms.border} !important; } .ant-slider-track { - background-color: ${props => props.theme.primary} !important; + background-color: ${props => props.theme.eCashBlue} !important; + } + .ant-descriptions-bordered .ant-descriptions-row { + background: ${props => props.theme.contrast}; + } + .ant-modal-confirm-content, .ant-modal-confirm-title { + color: ${props => props.theme.contrast} !important; } `; const CustomApp = styled.div` text-align: center; font-family: 'Gilroy', sans-serif; - background-color: ${props => props.theme.app.background}; + font-family: 'Poppins', sans-serif; + background-color: ${props => props.theme.backgroundColor}; + background-size: 100px 171px; + background-image: ${props => props.theme.backgroundImage}; + background-attachment: fixed; `; const Footer = styled.div` z-index: 2; - background-color: ${props => props.theme.footer.background}; - border-radius: 20px; + height: 80px; + border-top: 1px solid rgba(255, 255, 255, 0.5); + background-color: ${props => props.theme.footerBackground}; position: fixed; bottom: 0; width: 500px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 50px; @media (max-width: 768px) { width: 100%; + padding: 0 20px; } - border-top: 1px solid ${props => props.theme.wallet.borders.color}; `; export const NavButton = styled.button` @@ -101,34 +147,22 @@ outline: none; } cursor: pointer; - padding: 24px 12px 12px 12px; - margin: 0 28px; - @media (max-width: 475px) { - margin: 0 20px; - } - @media (max-width: 420px) { - margin: 0 12px; - } - @media (max-width: 350px) { - margin: 0 8px; - } - background-color: ${props => props.theme.footer.background}; + padding: 0; + background: none; border: none; - font-size: 12px; - font-weight: bold; - .anticon { - display: block; - color: ${props => props.theme.footer.navIconInactive}; - font-size: 24px; - margin-bottom: 6px; + font-size: 10px; + svg { + fill: ${props => props.theme.contrast}; + width: 26px; + height: auto; } ${({ active, ...props }) => active && - ` - color: ${props.theme.primary}; - .anticon { - color: ${props.theme.primary}; - } + ` + color: ${props.theme.navActive}; + svg { + fill: ${props.theme.navActive}; + } `} `; @@ -138,20 +172,17 @@ justify-content: center; width: 100%; min-height: 100vh; - background-image: ${props => props.theme.app.sidebars}; - background-attachment: fixed; `; export const WalletCtn = styled.div` position: relative; width: 500px; - background-color: ${props => props.theme.footerBackground}; min-height: 100vh; - padding: 10px 30px 120px 30px; - 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}; + padding: 0 0 100px; + background: ${props => props.theme.walletBackground}; + -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow}; + -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow}; + box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow}; @media (max-width: 768px) { width: 100%; -webkit-box-shadow: none; @@ -163,27 +194,9 @@ export const HeaderCtn = styled.div` display: flex; align-items: center; - justify-content: center; - width: 100%; - padding: 20px 0 30px; - margin-bottom: 20px; justify-content: space-between; - border-bottom: 1px solid ${props => props.theme.wallet.borders.color}; - - a { - color: ${props => props.theme.wallet.text.secondary}; - - :hover { - color: ${props => props.theme.primary}; - } - } - - @media (max-width: 768px) { - a { - font-size: 12px; - } - padding: 10px 0 20px; - } + width: 100%; + padding: 15px; `; export const CashTabLogo = styled.img` @@ -244,10 +257,16 @@ {/*Note that the extension does not support biometric security*/} {/*Hence is not pulled in*/} - - + + + + history.push('/wallet')} > - - Wallet + history.push('/tokens')} + active={selectedKey === 'send'} + onClick={() => history.push('/send')} > - - eTokens + - history.push('/send')} + active={selectedKey === 'receive'} + onClick={() => history.push('receive')} > - - Send + history.push('/configure')} > - - Settings + ) : null} diff --git a/web/cashtab/public/cashtab_bg.png b/web/cashtab/public/cashtab_bg.png index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@Alert Circle \ No newline at end of file diff --git a/web/cashtab/src/assets/cashtab_xec.png b/web/cashtab/src/assets/cashtab_xec.png index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@Cog \ No newline at end of file diff --git a/web/cashtab/src/assets/flask.svg b/web/cashtab/src/assets/flask.svg new file mode 100644 --- /dev/null +++ b/web/cashtab/src/assets/flask.svg @@ -0,0 +1 @@ +Flask \ No newline at end of file diff --git a/web/cashtab/src/assets/fonts/Poppins-Bold.ttf b/web/cashtab/src/assets/fonts/Poppins-Bold.ttf new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + diff --git a/web/cashtab/src/assets/receive.svg b/web/cashtab/src/assets/receive.svg new file mode 100644 --- /dev/null +++ b/web/cashtab/src/assets/receive.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + diff --git a/web/cashtab/src/assets/send.svg b/web/cashtab/src/assets/send.svg new file mode 100644 --- /dev/null +++ b/web/cashtab/src/assets/send.svg @@ -0,0 +1 @@ +Send \ No newline at end of file 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,69 +1,45 @@ export const theme = { - primary: '#00ABE7', - brandSecondary: '#CD0BC3', + eCashBlue: '#00ABE7', + eCashPurple: '#ff21d0', + darkBlue: '#273498', contrast: '#fff', - app: { - sidebars: `url("/cashtab_bg.png")`, - background: '#fbfbfd', - }, - wallet: { - background: '#fff', - encryption: '#DC143C', - text: { - primary: '#273498', - secondary: '#273498', - }, - switch: { - activeCash: { - shadow: 'inset 8px 8px 16px #0074C2, inset -8px -8px 16px #273498', - }, - activeToken: { - background: '#CD0BC3', - shadow: 'inset 5px 5px 11px #FF21D0, inset -5px -5px 11px #CD0BC3', - }, - inactive: { - background: 'linear-gradient(145deg, #eeeeee, #c8c8c8)', - }, - }, - borders: { color: '#e2e2e2' }, - shadow: 'rgba(0, 0, 0, 1)', - }, - tokenListItem: { - background: '#ffffff', - color: '', - boxShadow: - 'rgb(136 172 243 / 25%) 0px 10px 30px,rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px', - border: '#e9eaed', - hoverBorder: '#231F20', - }, - footer: { - background: '#fff', - navIconInactive: '#949494', + backgroundImage: `url("/cashtab_bg.png")`, + backgroundColor: '#d5d5d7', + walletBackground: '#152b45', + walletInfoContainer: '#255173', + footerBackground: '#152b45', + navActive: '#00ABE7', + encryptionRed: '#DC143C', + genesisGreen: '#00e781', + receivedMessage: 'rgba(0,171,231,0.2)', + sentMessage: 'rgba(255, 255, 255, 0.1)', + lightWhite: 'rgba(255,255,255,0.4)', + dropdownText: '#000', + shadow: 'rgba(0, 0, 0, 0.4)', + switchButtonActiveText: '#fff', + advancedCollapse: { + background: '#255173', + color: '#fff', + icon: '#fff', + expandedBackground: 'rgba(0,0,0,0.2)', }, forms: { error: '#FF21D0', - border: '#e7edf3', - text: '#001137', - addonBackground: '#f4f4f4', - addonForeground: '#3e3f42', - selectionBackground: '#fff', - darkLabel: '#0074c2', - lightLabel: '#c0c0c0', - }, - icons: { outlined: '#273498' }, - modals: { - buttons: { background: '#fff' }, + border: '#17171f', + text: '#fff', + addonBackground: '#255173', + addonForeground: '#fff', + selectionBackground: '#255173', + placeholder: 'rgba(255,255,255,0.3)', + highlightBox: '#00ABE7', }, + icons: { outlined: '#fff' }, settings: { delete: '#CD0BC3', - background: '#eee', + background: 'rgba(0,0,0,0.4)', }, qr: { - copyBorderCash: '#00ABE7', - copyBorderToken: '#FF21D0', background: '#fff', - token: '#231F20', - shadow: 'rgb(136 172 243 / 25%) 0px 10px 30px, rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px', }, buttons: { primary: { @@ -74,23 +50,22 @@ disabledOverlay: 'rgba(255, 255, 255, 0.5)', }, secondary: { - background: '#e9eaed', - color: '#444', + background: '#4b67e1', + color: '#fff', hoverShadow: '0px 3px 10px -5px rgba(0, 0, 0, 0.75)', disabledOverlay: 'rgba(255, 255, 255, 0.5)', }, }, collapses: { - background: '#fbfcfd', - expandedBackground: '#fff', - border: '#eaedf3', - color: '#3e3f42', + background: '#255173', + expandedBackground: '#26415a', + border: '#17171f', + color: '#fff', }, - generalSettings: { - item: { - icon: '#949494', - title: '#949494', - }, - background: '#fff', + modal: { + background: '#255173', + border: '#17171f', + color: '#fff', + buttonBackground: '#26415a', }, }; diff --git a/web/cashtab/src/components/App.css b/web/cashtab/src/components/App.css --- a/web/cashtab/src/components/App.css +++ b/web/cashtab/src/components/App.css @@ -2,6 +2,20 @@ @import '~@fortawesome/fontawesome-free/css/all.css'; @import url('https://fonts.googleapis.com/css?family=Khula&display=swap&.css'); +@font-face { + font-family: 'Poppins'; + src: local('Poppins'), + url(../assets/fonts/Poppins-Regular.ttf) format('truetype'); + font-weight: normal; +} + +@font-face { + font-family: 'Poppins'; + src: local('Poppins'), + url(../assets/fonts/Poppins-Bold.ttf) format('truetype'); + font-weight: 700; +} + /* Hide scrollbars but keep functionality*/ /* Hide scrollbar for Chrome, Safari and Opera */ body::-webkit-scrollbar { 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 @@ -1,17 +1,18 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import 'antd/dist/antd.less'; -import { Modal, Spin } from 'antd'; -import { CashLoadingIcon } from '@components/Common/CustomIcons'; +import { Spin } from 'antd'; +import { + CashLoadingIcon, + HomeIcon, + SendIcon, + ReceiveIcon, + SettingsIcon, +} from '@components/Common/CustomIcons'; import '../index.css'; import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'; import { theme } from '@assets/styles/theme'; -import { - FolderOpenFilled, - CaretRightOutlined, - SettingFilled, - AppstoreAddOutlined, -} from '@ant-design/icons'; -import Wallet from '@components/Wallet/Wallet'; +import Home from '@components/Home/Home'; +import Receive from '@components/Receive/Receive'; import Tokens from '@components/Tokens/Tokens'; import Send from '@components/Send/Send'; import SendToken from '@components/Send/SendToken'; @@ -21,7 +22,6 @@ import './App.css'; import { WalletContext } from '@utils/context'; import { isValidStoredWallet } from '@utils/cashMethods'; -import WalletLabel from '@components/Common/WalletLabel.js'; import { Route, Redirect, @@ -31,36 +31,64 @@ } from 'react-router-dom'; // Easter egg imports not used in extension/src/components/App.js import TabCash from '@assets/tabcash.png'; -import ABC from '@assets/logo_topright.png'; import { checkForTokenById } from '@utils/tokenMethods.js'; // Biometric security import not used in extension/src/components/App.js import ProtectableComponentWrapper from './Authentication/ProtectableComponentWrapper'; -const GlobalStyle = createGlobalStyle` +const GlobalStyle = createGlobalStyle` + *::placeholder { + color: ${props => props.theme.forms.placeholder} !important; + } + *::selection { + background: ${props => props.theme.eCashBlue} !important; + } + .ant-modal-content, .ant-modal-header, .ant-modal-title { + background-color: ${props => props.theme.modal.background} !important; + color: ${props => props.theme.modal.color} !important; + } + .ant-modal-content svg { + fill: ${props => props.theme.modal.color}; + } + .ant-modal-footer button { + background-color: ${props => + props.theme.modal.buttonBackground} !important; + color: ${props => props.theme.modal.color} !important; + border-color: ${props => props.theme.modal.border} !important; + :hover { + background-color: ${props => props.theme.eCashBlue} !important; + } + } .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, #cropControlsConfirm { - border-radius: 8px; - background-color: ${props => props.theme.modals.buttons.background}; - color: ${props => props.theme.wallet.text.secondary}; - font-weight: bold; + border-radius: 3px; + background-color: ${props => + props.theme.modal.buttonBackground} !important; + color: ${props => props.theme.modal.color} !important; + border-color: ${props => props.theme.modal.border} !important; + :hover { + background-color: ${props => props.theme.eCashBlue} !important; + } + text-shadow: none !important; } .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, #cropControlsConfirm:hover { - color: ${props => props.theme.primary}; - transition: color 0.3s; - background-color: ${props => props.theme.modals.buttons.background}; + color: ${props => props.theme.contrast}; + transition: all 0.3s; + background-color: ${props => props.theme.eCashBlue}; + border-color: ${props => props.theme.eCashBlue}; } - .selectedCurrencyOption { + .selectedCurrencyOption, .ant-select-dropdown { text-align: left; - color: ${props => props.theme.wallet.text.secondary} !important; - background-color: ${props => props.theme.contrast} !important; + color: ${props => props.theme.contrast} !important; + background-color: ${props => + props.theme.collapses.expandedBackground} !important; } .cashLoadingIcon { - color: ${props => props.theme.primary} !important; + color: ${props => props.theme.eCashBlue} !important; font-size: 48px !important; } .selectedCurrencyOption:hover { color: ${props => props.theme.contrast} !important; - background-color: ${props => props.theme.primary} !important; + background-color: ${props => props.theme.eCashBlue} !important; } #addrSwitch, #cropSwitch { .ant-switch-checked { @@ -76,27 +104,40 @@ background-color: ${props => props.theme.forms.border} !important; } .ant-slider-track { - background-color: ${props => props.theme.primary} !important; + background-color: ${props => props.theme.eCashBlue} !important; + } + .ant-descriptions-bordered .ant-descriptions-row { + background: ${props => props.theme.contrast}; + } + .ant-modal-confirm-content, .ant-modal-confirm-title { + color: ${props => props.theme.contrast} !important; } `; const CustomApp = styled.div` text-align: center; - font-family: 'Gilroy', sans-serif; - background-color: ${props => props.theme.app.background}; + font-family: 'Poppins', sans-serif; + background-color: ${props => props.theme.backgroundColor}; + background-size: 100px 171px; + background-image: ${props => props.theme.backgroundImage}; + background-attachment: fixed; `; const Footer = styled.div` z-index: 2; - background-color: ${props => props.theme.footer.background}; - border-radius: 20px 20px 0 0; + height: 80px; + border-top: 1px solid rgba(255, 255, 255, 0.5); + background-color: ${props => props.theme.footerBackground}; position: fixed; bottom: 0; width: 500px; - box-shadow: rgb(136 172 243 / 25%) 0px 10px 30px, - rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 50px; @media (max-width: 768px) { width: 100%; + padding: 0 20px; } `; @@ -106,33 +147,21 @@ outline: none; } cursor: pointer; - padding: 24px 12px 12px 12px; - margin: 0 28px; - @media (max-width: 475px) { - margin: 0 20px; - } - @media (max-width: 420px) { - margin: 0 12px; - } - @media (max-width: 350px) { - margin: 0 8px; - } - background-color: ${props => props.theme.footer.background}; + padding: 0; + background: none; border: none; - font-size: 10.5px; - font-weight: bold; - .anticon { - display: block; - color: ${props => props.theme.footer.navIconInactive}; - font-size: 24px; - margin-bottom: 6px; + font-size: 10px; + svg { + fill: ${props => props.theme.contrast}; + width: 26px; + height: auto; } ${({ active, ...props }) => active && ` - color: ${props.theme.primary}; - .anticon { - color: ${props.theme.primary}; + color: ${props.theme.navActive}; + svg { + fill: ${props.theme.navActive}; } `} `; @@ -143,20 +172,17 @@ justify-content: center; width: 100%; min-height: 100vh; - background-image: ${props => props.theme.app.sidebars}; - background-attachment: fixed; `; export const WalletCtn = styled.div` position: relative; width: 500px; - background-color: ${props => props.theme.footerBackground}; min-height: 100vh; - padding: 10px 30px 120px 30px; - 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}; + padding: 0 0 100px; + background: ${props => props.theme.walletBackground}; + -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow}; + -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow}; + box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow}; @media (max-width: 768px) { width: 100%; -webkit-box-shadow: none; @@ -170,24 +196,7 @@ align-items: center; justify-content: center; width: 100%; - padding: 20px 0 30px; - margin-bottom: 20px; - justify-content: space-between; - - a { - color: ${props => props.theme.wallet.text.secondary}; - - :hover { - color: ${props => props.theme.primary}; - } - } - - @media (max-width: 768px) { - a { - font-size: 12px; - } - padding: 10px 0 20px; - } + padding: 15px 0; `; export const CashTabLogo = styled.img` @@ -263,21 +272,18 @@ )} {/*End component not included in extension as desktop only*/} - {/*Begin component not included in extension as replaced by open in tab link*/} - - - - {/*Begin component not included in extension as replaced by open in tab link*/} - - + + + + history.push('/wallet')} > - - Wallet + history.push('/tokens')} + active={selectedKey === 'send'} + onClick={() => history.push('/send')} > - - eTokens + - history.push('/send')} + active={selectedKey === 'receive'} + onClick={() => history.push('receive')} > - - Send + history.push('/configure')} > - - Settings + ) : null} diff --git a/web/cashtab/src/components/Authentication/SignIn.js b/web/cashtab/src/components/Authentication/SignIn.js --- a/web/cashtab/src/components/Authentication/SignIn.js +++ b/web/cashtab/src/components/Authentication/SignIn.js @@ -8,11 +8,11 @@ const StyledSignIn = styled.div` h2 { - color: ${props => props.theme.wallet.text.primary}; + color: ${props => props.theme.contrast}; font-size: 25px; } p { - color: ${props => props.theme.wallet.text.secondary}; + color: ${props => props.theme.darkBlue}; } `; diff --git a/web/cashtab/src/components/Authentication/SignUp.js b/web/cashtab/src/components/Authentication/SignUp.js --- a/web/cashtab/src/components/Authentication/SignUp.js +++ b/web/cashtab/src/components/Authentication/SignUp.js @@ -8,12 +8,14 @@ } from '@components/Common/PrimaryButton'; const StyledSignUp = styled.div` + padding: 0px 30px; + margin-top: 20px; h2 { - color: ${props => props.theme.wallet.text.primary}; + color: ${props => props.theme.contrast}; font-size: 25px; } p { - color: ${props => props.theme.wallet.text.secondary}; + color: ${props => props.theme.contrast}; } `; diff --git a/web/cashtab/src/components/Common/Alerts.js b/web/cashtab/src/components/Common/Alerts.js deleted file mode 100644 --- a/web/cashtab/src/components/Common/Alerts.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { Alert } from 'antd'; - -const TokenIconAlert = () => { - return ( - <> -
- -
- - ); -}; - -export default TokenIconAlert; 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 @@ -11,33 +11,55 @@ svg { width: 50px; height: 50px; - fill: ${props => props.theme.primary}; + fill: ${props => props.theme.eCashBlue}; } `; -export const BalanceHeaderWrap = styled.div` - color: ${props => props.theme.wallet.text.primary}; - width: 100%; - font-size: 30px; - font-weight: bold; +export const SidePaddingCtn = styled.div` + padding: 0px 30px; @media (max-width: 768px) { - font-size: 23px; + padding: 0px 15px; } `; +export const FormLabel = styled.label` + font-size: 16px; + margin-bottom: 5px; + text-align: left; + width: 100%; + display: inline-block; + color: ${props => props.theme.contrast}; +`; + +export const WalletInfoCtn = styled.div` + background: ${props => props.theme.walletInfoContainer}; + width: 100%; + padding: 40px 20px; +`; + export const BalanceHeaderFiatWrap = styled.div` - color: ${props => props.theme.wallet.text.secondary}; + color: ${props => props.theme.contrast}; width: 100%; - font-size: 18px; - margin-bottom: 20px; - font-weight: bold; + font-size: 16px; @media (max-width: 768px) { font-size: 16px; } `; +export const BalanceHeaderWrap = styled.div` + color: ${props => props.theme.contrast}; + width: 100%; + font-size: 28px; + margin-bottom: 0px; + font-weight: bold; + line-height: 1.4em; + @media (max-width: 768px) { + font-size: 24px; + } +`; + export const ZeroBalanceHeader = styled.div` - color: ${props => props.theme.wallet.text.primary}; + color: ${props => props.theme.contrast}; width: 100%; font-size: 14px; margin-bottom: 5px; @@ -52,11 +74,10 @@ `; export const ConvertAmount = styled.div` - color: ${props => props.theme.wallet.text.secondary}; + color: ${props => props.theme.contrast}; 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/Common/BalanceHeaderFiat.js b/web/cashtab/src/components/Common/BalanceHeaderFiat.js --- a/web/cashtab/src/components/Common/BalanceHeaderFiat.js +++ b/web/cashtab/src/components/Common/BalanceHeaderFiat.js @@ -7,8 +7,8 @@ return ( {settings - ? `${currency.fiatCurrencies[settings.fiatCurrency].symbol} ` - : '$ '} + ? `${currency.fiatCurrencies[settings.fiatCurrency].symbol}` + : '$'} {parseFloat((balance * fiatPrice).toFixed(2)).toLocaleString()}{' '} {settings ? `${currency.fiatCurrencies[ 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 @@ -11,6 +11,12 @@ } from '@ant-design/icons'; import { Image } from 'antd'; import { currency } from '@components/Common/Ticker'; +import { ReactComponent as Send } from '@assets/send.svg'; +import { ReactComponent as Receive } from '@assets/receive.svg'; +import { ReactComponent as Genesis } from '@assets/flask.svg'; +import { ReactComponent as Unparsed } from '@assets/alert-circle.svg'; +import { ReactComponent as Home } from '@assets/home.svg'; +import { ReactComponent as Settings } from '@assets/cog.svg'; export const CashLoadingIcon = ; @@ -44,7 +50,7 @@ color: ${props => props.theme.icons.outlined} !important; `; export const ThemedQrcodeOutlined = styled(QrcodeOutlined)` - color: ${props => props.theme.icons.outlined} !important; + color: ${props => props.theme.walletBackground} !important; `; export const ThemedSettingOutlined = styled(SettingOutlined)` color: ${props => props.theme.icons.outlined} !important; @@ -63,7 +69,7 @@ svg { width: 50px; height: 50px; - fill: ${props => props.theme.primary}; + fill: ${props => props.theme.eCashBlue}; } `; @@ -72,3 +78,12 @@ ); + +export const ReceiveIcon = () => ; +export const GenesisIcon = () => ; +export const UnparsedIcon = () => ; +export const HomeIcon = () => ; +export const SettingsIcon = () => ; +export const SendIcon = styled(Send)` + transform: rotate(-35deg); +`; 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 @@ -27,7 +27,7 @@ font-weight: bold; color: ${props => props.theme.forms.text}; opacity: 1; - height: 50px; + height: 45px; } textarea.ant-input, .ant-select-selection { @@ -43,11 +43,18 @@ } .ant-input-affix-wrapper { background-color: ${props => props.theme.forms.selectionBackground}; - border: 1px solid ${props => props.theme.wallet.borders.color} !important; + border: 1px solid ${props => props.theme.forms.border} !important; + } + .ant-input-wrapper .anticon-qrcode { + color: ${props => props.theme.forms.addonForeground} !important; + } + input.ant-input::placeholder, + .ant-select-selection::placeholder { + color: ${props => props.theme.forms.placeholder} !important; } .ant-select-selector { - height: 60px !important; - border: 1px solid ${props => props.theme.wallet.borders.color} !important; + height: 55px !important; + border: 1px solid ${props => props.theme.forms.border} !important; background-color: ${props => props.theme.forms.selectionBackground}!important; } @@ -62,6 +69,10 @@ border-color: ${props => props.theme.forms.error} !important; } + .ant-input:hover { + border-color: ${props => props.theme.forms.highlightBox}; + } + .ant-form-item-has-error .ant-input, .ant-form-item-has-error .ant-input-affix-wrapper, .ant-form-item-has-error .ant-input:hover, @@ -78,7 +89,7 @@ } .ant-select-single .ant-select-selector .ant-select-selection-item, .ant-select-single .ant-select-selector .ant-select-selection-placeholder { - line-height: 60px; + line-height: 55px; text-align: left; color: ${props => props.theme.forms.text}; font-weight: bold; @@ -197,8 +208,8 @@