status-im/MyCrypto
2
0
Fork 0
mirror of https://github.com/status-im/MyCrypto.git synced 2025-02-26 09:45:18 +00:00
Code Issues Projects Releases Wiki Activity

Fix input validation styles (#1778)

Browse Source 
* Fix input validation styles

* Remove green borders
This commit is contained in:
James Prado 2018-05-13 21:39:54 -04:00 committed by Daniel Ternyak
parent 58949dd44e
commit a77aa3a02c
11 changed files with 11 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/components/NonceField.scss
View File

@ -34,7 +34,7 @@
&-refresh {
position: absolute;
right: 0;
bottom: 0rem;
bottom: 1rem;
padding: 0.75rem 1rem;
}
}

6
common/components/WalletDecrypt/components/DeterministicWalletsModal.scss
View File

@ -37,12 +37,6 @@
padding-right: $space;
border: none;
}
.form-control {
display: inline-block;
width: auto;
margin: 0 0 0 10px;
}
}
&-addresses {

8
common/components/ui/Input.scss
View File

@ -85,13 +85,13 @@
border-color: $brand-danger;
box-shadow: inset 0px 0px 0px 1px $brand-danger;
}
&:focus {
border-color: #4295bc;
box-shadow: inset 0px 0px 0px 1px #4295bc;
&.valid {
&.valid.has-value {
border-color: #8dd17b;
box-shadow: inset 0px 0px 0px 1px #8dd17b;
}
&:focus {
border-color: #4295bc;
box-shadow: inset 0px 0px 0px 1px #4295bc;
}
}
}

5
common/components/ui/Input.tsx
View File

@ -28,10 +28,7 @@ class Input extends React.Component<OwnProps, State> {
const classname = classnames(
this.props.className,
'input-group-input',
'form-control',
this.state.isStateless
? ''
: isValid ? (showValidAsPlain ? '' : `is-valid valid`) : `is-invalid invalid`,
this.state.isStateless ? '' : isValid ? (showValidAsPlain ? '' : '') : `invalid`,
this.state.hasBlurred && 'has-blurred',
hasValue && 'has-value'
);

9
common/components/ui/OldDropdown.tsx
View File

@ -70,14 +70,7 @@ export default class DropdownComponent<T> extends PureComponent<Props<T>, State>
return (
<ul className={menuClass} style={searchable ? searchableStyle : undefined}>
{searchable && (
<input
className="form-control"
placeholder={'Search'}
onChange={onSearchChange}
value={search}
/>
)}
{searchable && <input placeholder={'Search'} onChange={onSearchChange} value={search} />}
{options
.filter(option => {

27
common/components/ui/SimpleSelect.tsx
View File

@ -1,27 +0,0 @@
import React, { PureComponent } from 'react';
interface Props {
value?: string;
options: string[];
onChange(event: React.FormEvent<HTMLSpanElement>): void;
}
export default class SimpleSelect extends PureComponent<Props, {}> {
public render() {
return (
<select
value={this.props.value || this.props.options[0]}
className="form-control"
onChange={this.props.onChange}
>
{this.props.options.map((obj, i) => {
return (
<option value={obj} key={i}>
{obj}
</option>
);
})}
</select>
);
}
}

5
common/components/ui/TextArea.tsx
View File

@ -27,10 +27,7 @@ class TextArea extends React.Component<OwnProps, State> {
const classname = classnames(
this.props.className,
'input-group-input',
'form-control',
this.state.isStateless
? ''
: isValid ? (showValidAsPlain ? '' : `is-valid valid`) : `is-invalid invalid`,
this.state.isStateless ? '' : isValid ? (showValidAsPlain ? '' : '') : `invalid`,
this.state.hasBlurred && 'has-blurred'
);

4
common/containers/Tabs/Swap/components/CurrencySwap.tsx
View File

@ -316,7 +316,7 @@ export default class CurrencySwap extends PureComponent<Props, State> {
<div className="input-group input-group-inline">
<Input
id="origin-swap-input"
isValid={this.isMinMaxValid(origin.amount, origin.label, destination.label)}
isValid={!originErr}
type="number"
placeholder={translateRaw('SEND_AMOUNT_SHORT')}
value={isNaN(origin.amount) ? '' : origin.amount}
@ -336,7 +336,7 @@ export default class CurrencySwap extends PureComponent<Props, State> {
<div className="input-group-header">{translate('SWAP_RECEIVE_INPUT_LABEL')}</div>
<Input
id="destination-swap-input"
isValid={this.isMinMaxValid(origin.amount, origin.label, destination.label)}
isValid={!destinationErr}
type="number"
placeholder={translateRaw('SEND_AMOUNT_SHORT')}
value={isNaN(destination.amount) ? '' : destination.amount}

2
common/containers/Tabs/Swap/components/SupportFooter.tsx
View File

@ -87,7 +87,7 @@ Rate: ${rates[pair].rate} ${origin.label}/${destination.label}`;
isValid={true}
showValidAsPlain={true}
defaultValue={fallbackBody}
className="form-control input-sm"
className="input-sm"
rows={9}
/>
) : null}

1
common/sass/mixins.scss
View File

@ -6,7 +6,6 @@
padding: 0;
background: none;
border: none;
z-index: 999;
cursor: pointer;
}

49
common/sass/styles/overrides/forms.scss
View File

@ -12,12 +12,6 @@ label {
}
}
label + .form-control,
label + input,
label + textarea {
margin-top: 0;
}
input[type='radio'],
input[type='checkbox'] {
margin: 3px 0 0;
@ -29,24 +23,6 @@ input[readonly] {
cursor: text !important;
}
.form-control {
margin-bottom: $space-sm;
transition: $transition;
padding: $input-padding;
@include mono;
&:focus {
border-color: $input-border-focus;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 1px rgba($brand-primary, 0.5);
}
}
input.form-control,
select.form-control {
padding-top: 0;
padding-bottom: 0;
}
.form-group {
display: block;
margin-bottom: $form-group-margin-bottom;
@ -58,31 +34,6 @@ select.form-control {
font-weight: 500;
}
// Custom feedback classes
@mixin form-control-state($color) {
border-color: lighten($color, 20%);
@include input-shadow($color);
&:focus {
border-color: lighten($color, 5%);
@include input-focus-shadow($color);
}
}
.form-control {
&.is-valid {
@include form-control-state($brand-success);
}
&.is-invalid {
@include form-control-state($brand-danger);
}
&.is-semivalid {
@include form-control-state($brand-warning);
}
}
.help-block {
&.is-valid {
color: $brand-success;