diff --git a/web/cashtab/extension/src/components/App.css b/web/cashtab/extension/src/components/App.css --- a/web/cashtab/extension/src/components/App.css +++ b/web/cashtab/extension/src/components/App.css @@ -36,7 +36,7 @@ html, body { - min-width: 320px; + min-width: 400px; min-height: 600px; max-width: 100%; overflow-x: hidden; @@ -168,38 +168,6 @@ cursor: pointer; } */ -input.ant-input, -.ant-select-selection { - background-color: #fff !important; - box-shadow: none !important; - border: 1px solid #eaedf3 !important; - border-radius: 4px; - font-weight: bold; - color: rgb(62, 63, 66); - opacity: 1; - padding: 11px 5px; - height: 50px; -} - -.ant-select-selection:hover { - border: 1px solid #eaedf3; -} - -.ant-select-selection-selected-value { - color: rgb(62, 63, 66); -} - -.ant-select-dropdown-menu-item { - color: #444; - background-color: #fff; -} - -.ant-select-dropdown-menu-item-active, -.ant-select-dropdown-menu-item:hover { - color: #fff; - background-color: #ff8d00 !important; -} - .ant-checkbox-inner { border: 1px solid #eaedf3 !important; background: white; @@ -409,3 +377,94 @@ font-size: 10px; } } + +/*Custom color for CashSpin*/ +.ant-spin > span > svg { + fill: #ff8d00; +} + +/*Custom Input Fields */ +input.ant-input, +.ant-select-selection { + background-color: #fff !important; + box-shadow: none !important; + border-radius: 4px; + font-weight: bold; + color: rgb(62, 63, 66); + opacity: 1; + height: 50px; +} + +.ant-select-selection:hover { + border: 1px solid #eaedf3; +} + +.ant-select-selection-selected-value { + color: rgb(62, 63, 66); +} + +.ant-select-dropdown-menu-item { + color: #444; + background-color: #fff; +} + +.ant-select-dropdown-menu-item-active, +.ant-select-dropdown-menu-item:hover { + color: #fff; + background-color: #ff8d00 !important; +} +.selectedCurrencyOption:hover { + color: #fff !important; + background-color: #ff8d00 !important; +} +.ant-input-affix-wrapper { + background-color: #fff; + border: 1px solid #eaedf3 !important; +} +input.ant-input, +.ant-select-selection { + border: none; +} +.ant-input::placeholder { + text-align: left; +} +.ant-select-selector { + height: 60px !important; + border: 1px solid #eaedf3 !important; +} + +/*Revs with updated Antd*/ +.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; + font-weight: bold; +} + +/* Handle new antd error formatting */ +.ant-form-item-has-error + > div + > div.ant-form-item-control-input + > div + > span + > span + > span.ant-input-affix-wrapper { + background-color: #fff; + border-color: #f04134 !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; +} + +.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; +} 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 @@ -2,7 +2,12 @@ import 'antd/dist/antd.less'; import '../index.css'; import styled from 'styled-components'; -import { Layout, Tabs, Icon } from 'antd'; +import { Tabs } from 'antd'; +import { + FolderOpenFilled, + CaretRightOutlined, + SettingFilled, +} from '@ant-design/icons'; import Wallet from './Wallet/Wallet'; import Send from './Send/Send'; import SendToken from './Send/SendToken'; @@ -20,45 +25,40 @@ useHistory, } from 'react-router-dom'; -const { Footer } = Layout; -const { TabPane } = Tabs; +import fbt from 'fbt'; -const OpenInTabBtn = styled.button` - background: none; - border: none; -`; -const ExtTabImg = styled.img` - max-width: 20px; -`; +const { TabPane } = Tabs; -const StyledTabsMenu = styled.div` - .ant-layout-footer { - position: absolute; - bottom: 0; +const Footer = styled.div` + background-color: #fff; + border-radius: 20px; + position: fixed; + bottom: 0; + width: 500px; + @media (max-width: 768px) { width: 100%; - padding: 0; - background-color: #fff; - left: 0; - border-radius: 20px; - border-top: 1px solid #e2e2e2; - @media (max-width: 768px) { - position: fixed; - } } - .ant-tabs-nav .ant-tabs-tab { - padding: 30px 0 20px 0; + border-top: 1px solid #e2e2e2; + .ant-tabs-nav-list { } - .ant-tabs-bar.ant-tabs-bottom-bar { - margin-top: 0; - border-top: none; + .ant-tabs-top > .ant-tabs-nav::before, + .ant-tabs-bottom > .ant-tabs-nav::before, + .ant-tabs-top > div > .ant-tabs-nav::before, + .ant-tabs-bottom > div > .ant-tabs-nav::before { + border-bottom: none; } .ant-tabs-tab { + padding: 24px 12px 12px 12px; + margin: 0 24px; + @media (max-width: 360px) { + margin: 0 12px; + } span { font-size: 12px; - display: grid; font-weight: bold; } .anticon { + display: block; color: rgb(148, 148, 148); font-size: 24px; margin-left: 8px; @@ -66,16 +66,13 @@ } } .ant-tabs-tab:hover { - color: #ff8d00 !important; + color: #ff8d00; .anticon { color: #ff8d00; } } - .ant-tabs-tab-active.ant-tabs-tab { + .ant-tabs-tab-active > div > span { color: #ff8d00; - .anticon { - color: #ff8d00; - } } .ant-tabs-tab-active.ant-tabs-tab { color: #ff8d00; @@ -83,9 +80,6 @@ color: #ff8d00; } } - .ant-tabs-tab-active:active { - color: #ff8d00 !important; - } .ant-tabs-ink-bar { display: none !important; } @@ -94,6 +88,14 @@ } `; +const OpenInTabBtn = styled.button` + background: none; + border: none; +`; +const ExtTabImg = styled.img` + max-width: 20px; +`; + export const WalletBody = styled.div` display: flex; align-items: center; @@ -206,70 +208,56 @@ - - {wallet ? ( - -
- - - history.push('/wallet') - } - > - - Wallet - - } - key="wallet" - /> - - history.push('/send') - } - > - - Send - - } - key="send" - disabled={!wallet} - /> - - history.push('/configure') - } - > - - Settings - - } - key="configure" - disabled={!wallet} - /> - -
-
- ) : null} + {wallet ? ( + + ) : null} ); 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 @@ -439,3 +439,30 @@ color: #3e3f42; font-weight: bold; } + +/* Handle new antd error formatting */ +.ant-form-item-has-error + > div + > div.ant-form-item-control-input + > div + > span + > span + > span.ant-input-affix-wrapper { + background-color: #fff; + border-color: #f04134 !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; +} + +.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; +}