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 ? (
-
-
-
- ) : 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;
+}