Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Common/EnhancedInputs.js
Show All 21 Lines | export const AntdFormCss = css` | ||||
.ant-select-selection { | .ant-select-selection { | ||||
background-color: ${props => | background-color: ${props => | ||||
props.theme.forms.selectionBackground} !important; | props.theme.forms.selectionBackground} !important; | ||||
box-shadow: none !important; | box-shadow: none !important; | ||||
border-radius: 4px; | border-radius: 4px; | ||||
font-weight: bold; | font-weight: bold; | ||||
color: ${props => props.theme.forms.text}; | color: ${props => props.theme.forms.text}; | ||||
opacity: 1; | opacity: 1; | ||||
height: 50px; | height: 45px; | ||||
} | } | ||||
textarea.ant-input, | textarea.ant-input, | ||||
.ant-select-selection { | .ant-select-selection { | ||||
background-color: ${props => | background-color: ${props => | ||||
props.theme.forms.selectionBackground} !important; | props.theme.forms.selectionBackground} !important; | ||||
box-shadow: none !important; | box-shadow: none !important; | ||||
border-radius: 4px; | border-radius: 4px; | ||||
font-weight: bold; | font-weight: bold; | ||||
color: ${props => props.theme.forms.text}; | color: ${props => props.theme.forms.text}; | ||||
opacity: 1; | opacity: 1; | ||||
height: 50px; | height: 50px; | ||||
min-height: 100px; | min-height: 100px; | ||||
} | } | ||||
.ant-input-affix-wrapper { | .ant-input-affix-wrapper { | ||||
background-color: ${props => props.theme.forms.selectionBackground}; | 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 { | .ant-select-selector { | ||||
height: 60px !important; | height: 55px !important; | ||||
border: 1px solid ${props => props.theme.wallet.borders.color} !important; | border: 1px solid ${props => props.theme.forms.border} !important; | ||||
background-color: ${props => | background-color: ${props => | ||||
props.theme.forms.selectionBackground}!important; | props.theme.forms.selectionBackground}!important; | ||||
} | } | ||||
.ant-form-item-has-error | .ant-form-item-has-error | ||||
> div | > div | ||||
> div.ant-form-item-control-input | > div.ant-form-item-control-input | ||||
> div | > div | ||||
> span | > span | ||||
> span | > span | ||||
> span.ant-input-affix-wrapper { | > span.ant-input-affix-wrapper { | ||||
background-color: ${props => props.theme.forms.selectionBackground}; | background-color: ${props => props.theme.forms.selectionBackground}; | ||||
border-color: ${props => props.theme.forms.error} !important; | 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, | ||||
.ant-form-item-has-error .ant-input-affix-wrapper, | .ant-form-item-has-error .ant-input-affix-wrapper, | ||||
.ant-form-item-has-error .ant-input:hover, | .ant-form-item-has-error .ant-input:hover, | ||||
.ant-form-item-has-error .ant-input-affix-wrapper:hover { | .ant-form-item-has-error .ant-input-affix-wrapper:hover { | ||||
background-color: ${props => props.theme.forms.selectionBackground}; | background-color: ${props => props.theme.forms.selectionBackground}; | ||||
border-color: ${props => props.theme.forms.error} !important; | border-color: ${props => props.theme.forms.error} !important; | ||||
} | } | ||||
.ant-form-item-has-error | .ant-form-item-has-error | ||||
.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) | .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) | ||||
.ant-select-selector { | .ant-select-selector { | ||||
background-color: ${props => props.theme.forms.selectionBackground}; | background-color: ${props => props.theme.forms.selectionBackground}; | ||||
border-color: ${props => props.theme.forms.error} !important; | 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-item, | ||||
.ant-select-single .ant-select-selector .ant-select-selection-placeholder { | .ant-select-single .ant-select-selector .ant-select-selection-placeholder { | ||||
line-height: 60px; | line-height: 55px; | ||||
text-align: left; | text-align: left; | ||||
color: ${props => props.theme.forms.text}; | color: ${props => props.theme.forms.text}; | ||||
font-weight: bold; | font-weight: bold; | ||||
} | } | ||||
.ant-form-item-has-error .ant-input-group-addon { | .ant-form-item-has-error .ant-input-group-addon { | ||||
color: ${props => props.theme.forms.error} !important; | color: ${props => props.theme.forms.error} !important; | ||||
border-color: ${props => props.theme.forms.error} !important; | border-color: ${props => props.theme.forms.error} !important; | ||||
} | } | ||||
▲ Show 20 Lines • Show All 102 Lines • ▼ Show 20 Lines | return ( | ||||
) | ) | ||||
} | } | ||||
{...inputProps} | {...inputProps} | ||||
/> | /> | ||||
{CurrencySelect} | {CurrencySelect} | ||||
<InputNumberAddonText | <InputNumberAddonText | ||||
style={{ | style={{ | ||||
width: '10%', | width: '10%', | ||||
height: '60px', | height: '55px', | ||||
lineHeight: '60px', | lineHeight: '55px', | ||||
}} | }} | ||||
disabled={!!(inputProps || {}).disabled} | disabled={!!(inputProps || {}).disabled} | ||||
onClick={!(inputProps || {}).disabled && onMax} | onClick={!(inputProps || {}).disabled && onMax} | ||||
> | > | ||||
max | max | ||||
</InputNumberAddonText> | </InputNumberAddonText> | ||||
</Input.Group> | </Input.Group> | ||||
</Form.Item> | </Form.Item> | ||||
▲ Show 20 Lines • Show All 74 Lines • ▼ Show 20 Lines | DestinationAddressSingle.propTypes = { | ||||
inputProps: PropTypes.object, | inputProps: PropTypes.object, | ||||
}; | }; | ||||
export const DestinationAddressMulti = ({ inputProps, ...otherProps }) => { | export const DestinationAddressMulti = ({ inputProps, ...otherProps }) => { | ||||
return ( | return ( | ||||
<AntdFormWrapper> | <AntdFormWrapper> | ||||
<Form.Item {...otherProps}> | <Form.Item {...otherProps}> | ||||
<TextArea | <TextArea | ||||
style={{ height: '189px' }} | |||||
prefix={<ThemedWalletOutlined />} | prefix={<ThemedWalletOutlined />} | ||||
autoComplete="off" | autoComplete="off" | ||||
{...inputProps} | {...inputProps} | ||||
/> | /> | ||||
</Form.Item> | </Form.Item> | ||||
</AntdFormWrapper> | </AntdFormWrapper> | ||||
); | ); | ||||
}; | }; | ||||
▲ Show 20 Lines • Show All 64 Lines • Show Last 20 Lines |