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 @@ -54,88 +54,8 @@ font-weight: bold; } -/*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; -} +/*Hover on currency dropdowns */ .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/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 @@ -16,7 +16,58 @@ border: 1px solid ${props => props.theme.formBorders}; color: ${props => props.theme.formAddonForeground} !important; } + 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-input-affix-wrapper { + background-color: #fff; + border: 1px solid #eaedf3 !important; + } + .ant-select-selector { + height: 60px !important; + border: 1px solid #eaedf3 !important; + } + .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; + } + .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; + } `; + export const AntdFormWrapper = styled.div` ${AntdFormCss} `; @@ -95,40 +146,46 @@ ); return ( - - - - ) : ( - - ) - } - {...inputProps} - /> - {CurrencySelect} - - max - - - + + + + + ) : ( + + ) + } + {...inputProps} + /> + {CurrencySelect} + + max + + + + ); }; 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 @@ -10,6 +10,7 @@ } from '@ant-design/icons'; import { WalletContext } from '@utils/context'; import { StyledCollapse } from '@components/Common/StyledCollapse'; +import { AntdFormWrapper } from '@components/Common/EnhancedInputs'; import PrimaryButton, { SecondaryButton, SmartButton, @@ -381,63 +382,69 @@ onOk={changeWalletName} onCancel={() => cancelRenameWallet()} > -
- - } - placeholder="Enter new wallet name" - name="newName" - value={newWalletName} - onChange={e => handleWalletNameInput(e)} - /> - -
+ +
+ + } + placeholder="Enter new wallet name" + name="newName" + value={newWalletName} + onChange={e => handleWalletNameInput(e)} + /> + +
+
)} {walletToBeDeleted !== null && ( cancelDeleteWallet()} > -
- - } - placeholder={`Type "delete ${walletToBeDeleted.name}" to confirm`} - name="walletToBeDeletedInput" - value={confirmationOfWalletToBeDeleted} - onChange={e => handleWalletToDeleteInput(e)} - /> - -
+ +
+ + } + placeholder={`Type "delete ${walletToBeDeleted.name}" to confirm`} + name="walletToBeDeletedInput" + value={confirmationOfWalletToBeDeleted} + onChange={e => + handleWalletToDeleteInput(e) + } + /> + +
+
)}

@@ -489,37 +496,39 @@ Copy and paste your mnemonic seed phrase below to import an existing wallet

-
- - } - placeholder="mnemonic (seed phrase)" - name="mnemonic" - autoComplete="off" - onChange={e => handleChange(e)} - required - /> - - submit()} - > - Import - -
+ +
+ + } + placeholder="mnemonic (seed phrase)" + name="mnemonic" + autoComplete="off" + onChange={e => handleChange(e)} + required + /> + + submit()} + > + Import + +
+
)} 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 @@ -39,12 +39,12 @@ className="ant-spin-container ant-spin-blur" >

,

Cashtab is an

,