status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Minor Visual Touchups (#569) 

* Adjust white block shadows and border radii

* Speed up global transitions.

* Adjust button styles.

* Adjusted notification styles

* Give navigation background.

* Reduce form input glow.

* Adjust input glow

* Adjust input glow.
This commit is contained in:
William O'Beirne 2017-12-14 00:08:45 -05:00 committed by Daniel Ternyak
parent 8508670247
commit 9a073fd1d5
10 changed files with 131 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
common/components/Header/components/CustomNodeModal.tsx
View File

@ -64,6 +64,7 @@ export default class CustomNodeModal extends React.Component<Props, State> {
disabled: !!Object.keys(invalids).length disabled: !!Object.keys(invalids).length
}, },
{ {
type: 'default',
text: translate('x_Cancel'), text: translate('x_Cancel'),
onClick: handleClose onClick: handleClose
} }
@ -79,16 +80,12 @@ export default class CustomNodeModal extends React.Component<Props, State> {
handleClose={handleClose} handleClose={handleClose}
> >
<div> <div>
{isHttps && ( {isHttps && <div className="alert alert-warning small">{translate('NODE_Warning')}</div>}
<div className="alert alert-warning small">
{translate('NODE_Warning')}
</div>
)}
{conflictedNode && ( {conflictedNode && (
<div className="alert alert-warning small"> <div className="alert alert-warning small">
You already have a node called '{conflictedNode.name}' that You already have a node called '{conflictedNode.name}' that matches this one, saving
matches this one, saving this will overwrite it this will overwrite it
</div> </div>
)} )}
@ -309,9 +306,7 @@ export default class CustomNodeModal extends React.Component<Props, State> {
return { return {
name: this.state.customNetworkName, name: this.state.customNetworkName,
unit: this.state.customNetworkUnit, unit: this.state.customNetworkUnit,
chainId: this.state.customNetworkChainId chainId: this.state.customNetworkChainId ? parseInt(this.state.customNetworkChainId, 10) : 0
? parseInt(this.state.customNetworkChainId, 10)
: 0
}; };
} }
@ -322,9 +317,7 @@ export default class CustomNodeModal extends React.Component<Props, State> {
url: this.state.url.trim(), url: this.state.url.trim(),
port: parseInt(this.state.port, 10), port: parseInt(this.state.port, 10),
network: network:
network === CUSTOM network === CUSTOM ? makeCustomNetworkId(this.makeCustomNetworkConfigFromState()) : network
? makeCustomNetworkId(this.makeCustomNetworkConfigFromState())
: network
}; };
if (this.state.hasAuth) { if (this.state.hasAuth) {
@ -344,9 +337,7 @@ export default class CustomNodeModal extends React.Component<Props, State> {
return customNodes.find(conf => makeCustomNodeId(conf) === thisId); return customNodes.find(conf => makeCustomNodeId(conf) === thisId);
} }
private handleChange = ( private handleChange = (ev: React.FormEvent<HTMLInputElement | HTMLSelectElement>) => {
ev: React.FormEvent<HTMLInputElement | HTMLSelectElement>
) => {
const { name, value } = ev.currentTarget; const { name, value } = ev.currentTarget;
this.setState({ [name as any]: value }); this.setState({ [name as any]: value });
}; };

5
common/components/Header/components/Navigation.scss
View File

@ -6,6 +6,8 @@
overflow-y: hidden; overflow-y: hidden;
border-top: .25rem solid $brand-primary; border-top: .25rem solid $brand-primary;
transition: border 300ms ease; transition: border 300ms ease;
background: #fff;
border-bottom: 1px solid #eee;
&-scroll { &-scroll {
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
@ -21,10 +23,9 @@
} }
&-links { &-links {
border-bottom: 2px solid #fff;
display: inline-block; display: inline-block;
font-size: 0; font-size: 0;
margin-bottom: 20px; margin-bottom: 21px;
min-width: 100%; min-width: 100%;
padding: 5px 0 0; padding: 5px 0 0;
vertical-align: middle; vertical-align: middle;

43
common/containers/TabSection/Notifications.scss
View File

@ -6,14 +6,16 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: $zindex-alerts;
} }
.Notification { .Notification {
position: relative; position: relative;
padding: $space; padding: 1.25rem 1rem;
margin: $space 0; margin: 0 0 1px;
font-weight: 300; font-weight: 300;
font-size: $font-size-bump; font-size: $font-size-bump;
box-shadow: 0 1px rgba(#fff, 0.4);
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
@ -112,13 +114,27 @@
right: 0; right: 0;
width: 9rem; width: 9rem;
bottom: 0; bottom: 0;
border-left: 1px solid rgba(255, 255, 255, .7); border-radius: 0;
transition: $transition; transition: $transition;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%20348.333%20348.334%22%3E%3Cpath%20d%3D%22M336.559%2068.611L231.016%20174.165l105.543%20105.549c15.699%2015.705%2015.699%2041.145%200%2056.85-7.844%207.844-18.128%2011.769-28.407%2011.769-10.296%200-20.581-3.919-28.419-11.769L174.167%20231.003%2068.609%20336.563c-7.843%207.844-18.128%2011.769-28.416%2011.769-10.285%200-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139%200-56.85l105.54-105.549L11.774%2068.611c-15.699-15.699-15.699-41.145%200-56.844%2015.696-15.687%2041.127-15.687%2056.829%200l105.563%20105.554L279.721%2011.767c15.705-15.687%2041.139-15.687%2056.832%200%2015.705%2015.699%2015.705%2041.145.006%2056.844z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E'); background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%20348.333%20348.334%22%3E%3Cpath%20d%3D%22M336.559%2068.611L231.016%20174.165l105.543%20105.549c15.699%2015.705%2015.699%2041.145%200%2056.85-7.844%207.844-18.128%2011.769-28.407%2011.769-10.296%200-20.581-3.919-28.419-11.769L174.167%20231.003%2068.609%20336.563c-7.843%207.844-18.128%2011.769-28.416%2011.769-10.285%200-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139%200-56.85l105.54-105.549L11.774%2068.611c-15.699-15.699-15.699-41.145%200-56.844%2015.696-15.687%2041.127-15.687%2056.829%200l105.563%20105.554L279.721%2011.767c15.705-15.687%2041.139-15.687%2056.832%200%2015.705%2015.699%2015.705%2041.145.006%2056.844z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
&:after {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 0;
border-left: 1px solid rgba(0, 0, 0, .1);
transition: $transition;
}
&:hover { &:hover {
background-color: rgba(#000, 0.1); background-color: rgba(#000, 0.1);
border-color: rgba(#fff, .5); border-color: rgba(#fff, .5);
&:after {
opacity: 0;
}
} }
&:active { &:active {
background-color: rgba(#000, 0.1); background-color: rgba(#000, 0.1);
@ -143,24 +159,29 @@
} }
} }
.NotificationAnimation{ .NotificationAnimation {
&-enter,
&-exit {
transition: opacity 250ms ease, transform 250ms ease;
}
&-enter { &-enter {
opacity: 0.01; opacity: 0;
transform: translateY(100%);
&-active { &-active {
opacity: 1; opacity: 1;
transition: opacity 500ms; transform: translateY(0%);
} }
} }
}
.NotificationAnimation{
&-exit { &-exit {
opacity: 1; opacity: 1;
transform: none; transform: translateY(0%);
&-active { &-active {
opacity: 0.01; opacity: 0;
transform: translateY(100%); transform: translateY(100%);
transition: opacity 500ms, transform 500ms;
} }
} }
} }

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

@ -219,7 +219,7 @@ export default class CurrencySwap extends Component<Props, State> {
{bityLoaded ? ( {bityLoaded ? (
<div className="form-inline CurrencySwap-inner-wrap"> <div className="form-inline CurrencySwap-inner-wrap">
<div className="CurrencySwap-input-group"> <div className="CurrencySwap-input-group">
<span className="CurrencySwap-error-message">{originErr}</span> {originErr && <span className="CurrencySwap-error-message">{originErr}</span>}
<input <input
id="origin-swap-input" id="origin-swap-input"
className={`CurrencySwap-input form-control ${ className={`CurrencySwap-input form-control ${
@ -238,14 +238,15 @@ export default class CurrencySwap extends Component<Props, State> {
options={originKindOptions} options={originKindOptions}
value={origin.id} value={origin.id}
onChange={this.onChangeOriginKind} onChange={this.onChangeOriginKind}
size="smr"
color="default" color="default"
/> />
</div> </div>
</div> </div>
<h1 className="CurrencySwap-divider">{translate('SWAP_init_2')}</h1> <h1 className="CurrencySwap-divider">{translate('SWAP_init_2')}</h1>
<div className="CurrencySwap-input-group"> <div className="CurrencySwap-input-group">
<span className="CurrencySwap-error-message">{destinationErr}</span> {destinationErr && (
<span className="CurrencySwap-error-message">{destinationErr}</span>
)}
<input <input
id="destination-swap-input" id="destination-swap-input"
className={`CurrencySwap-input form-control ${ className={`CurrencySwap-input form-control ${
@ -264,7 +265,6 @@ export default class CurrencySwap extends Component<Props, State> {
options={destinationKindOptions} options={destinationKindOptions}
value={destination.id} value={destination.id}
onChange={this.onChangeDestinationKind} onChange={this.onChangeDestinationKind}
size="smr"
color="default" color="default"
/> />
</div> </div>
@ -279,7 +279,7 @@ export default class CurrencySwap extends Component<Props, State> {
onClick={this.onClickStartSwap} onClick={this.onClickStartSwap}
text={translate('SWAP_init_CTA')} text={translate('SWAP_init_CTA')}
disabled={this.state.disabled} disabled={this.state.disabled}
type="info" type="primary"
/> />
</div> </div>
</article> </article>

75
common/sass/styles/overrides/buttons.scss
View File

@ -4,54 +4,69 @@
.btn { .btn {
@include button-size( @include button-size(
$padding-base-vertical, $padding-base-vertical,
$padding-large-horizontal, $padding-large-horizontal,
$font-size-bump, $font-size-bump,
$line-height-base, $line-height-base,
$border-radius $btn-border-radius-base
); );
transform: translateZ(0);
transition: $transition;
&:hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
// Override bootstrap disabled styles
&:disabled,
&.disabled,
fieldset[disabled] & {
opacity: 0.4;
box-shadow: none;
cursor: not-allowed;
}
} }
// Override sizes // Override sizes
.btn-lg { .btn-lg {
// line-height: ensure even-numbered height of button next to large input // line-height: ensure even-numbered height of button next to large input
@include button-size( @include button-size(
$padding-large-vertical, $padding-large-vertical,
$padding-large-horizontal, $padding-large-horizontal,
$font-size-bump-more, $font-size-bump-more,
$line-height-large, $line-height-large,
$border-radius $btn-border-radius-large
); );
} }
.btn-sm { .btn-sm {
// line-height: ensure proper height of button next to small input // line-height: ensure proper height of button next to small input
@include button-size( @include button-size(
$padding-small-vertical, $padding-small-vertical,
$padding-small-horizontal, $padding-small-horizontal,
$font-size-base, $font-size-base,
$line-height-small, $line-height-small,
$border-radius $btn-border-radius-small
); );
} }
.btn-xs { .btn-xs {
@include button-size( @include button-size(
$padding-xs-vertical, $padding-xs-vertical,
$padding-xs-horizontal, $padding-xs-horizontal,
$font-size-small, $font-size-small,
$line-height-small, $line-height-small,
$border-radius $btn-border-radius-small
); );
padding: .1rem .6rem .2rem; padding: .1rem .6rem .2rem;
} }
// This is a "smaller" small, to accomodate overrides done in v3. // This is a "smaller" small, to accomodate overrides done in v3.
.btn-smr { .btn-smr {
@include button-size( @include button-size(
.4rem, .4rem,
1rem, 1rem,
14px, 14px,
$line-height-base, $line-height-base,
$border-radius $btn-border-radius-small
); );
} }
// Custom color // Custom color

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

@ -38,7 +38,7 @@ input[readonly] {
border-color: $input-border-focus; border-color: $input-border-focus;
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 2px fadeout($brand-primary, 50%); 0 0 1px rgba($brand-primary, 0.5);
} }
} }
@ -55,37 +55,28 @@ input[readonly] {
} }
// Custom feedback classes // Custom feedback classes
@mixin form-control-state($color) {
border-color: lighten($color, 20%);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
0 0 1px rgba($color, 0.1);
&:focus {
border-color: lighten($color, 5%);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125),
0 0 1px rgba($color, 0.5);
}
}
.form-control { .form-control {
&.is-valid { &.is-valid {
border-color: lighten($brand-success, 25%); @include form-control-state($brand-success);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 1px rgba($brand-success, 0.5);
&:focus {
border-color: lighten($brand-success, 15%);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 3px rgba($brand-success, 0.5);
}
} }
&.is-invalid { &.is-invalid {
border-color: lighten($brand-danger, 25%); @include form-control-state($brand-danger);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 1px rgba($brand-danger, 0.5);
&:focus {
border-color: lighten($brand-danger, 15%);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 3px rgba($brand-danger, 0.5);
}
} }
&.is-semivalid { &.is-semivalid {
border-color: lighten($brand-warning, 25%); @include form-control-state($brand-warning);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 1px rgba($brand-warning, 0.5);
&:focus {
border-color: lighten($brand-warning, 15%);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 3px rgba($brand-warning, 0.5);
}
} }
} }

4
common/sass/styles/tab.scss
View File

@ -6,10 +6,12 @@
&-pane { &-pane {
background: #fff; background: #fff;
box-shadow: 16px 16px 47px 2px rgba(0, 0, 0, .07);
min-height: 1.5rem; min-height: 1.5rem;
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
margin: 0 auto 1rem; margin: 0 auto 1rem;
box-shadow: 0 1px rgba(0, 0, 0, 0.1),
0 1px 4px rgba(0, 0, 0, 0.12);
border-radius: 2px;
&.is-full-width { &.is-full-width {
background: none; background: none;

14
common/sass/variables/buttons.scss
View File

@ -1,8 +1,10 @@
@import "./colors";
$btn-font-weight: normal; $btn-font-weight: normal;
$btn-default-color: #222; $btn-default-color: #333;
$btn-default-bg: #c3c3c3; $btn-default-bg: #fff;
$btn-default-border: #bdbdbd; $btn-default-border: #ccc;
$btn-primary-color: #fff; $btn-primary-color: #fff;
$btn-primary-bg: $brand-primary; $btn-primary-bg: $brand-primary;
@ -26,6 +28,6 @@ $btn-danger-border: $btn-danger-bg;
$btn-link-disabled-color: $gray-light; $btn-link-disabled-color: $gray-light;
$btn-border-radius-base: 0px; $btn-border-radius-base: 2px;
$btn-border-radius-large: 0px; $btn-border-radius-large: 2px;
$btn-border-radius-small: 0px; $btn-border-radius-small: 2px;

2
common/sass/variables/forms.scss
View File

@ -2,7 +2,7 @@ $input-bg: #fff;
$input-bg-disabled: $gray-lightest; $input-bg-disabled: $gray-lightest;
$input-color: #333333; $input-color: #333333;
$input-border: $gray-lighter; $input-border: $gray-lighter;
$input-border-focus: $brand-primary; $input-border-focus: rgba($brand-primary, 0.6);
$input-color-placeholder: darken($gray-lighter, 10%); $input-color-placeholder: darken($gray-lighter, 10%);
$input-height-base: 2.55rem; $input-height-base: 2.55rem;

5
common/sass/variables/transitions.scss
View File

@ -1 +1,4 @@
$transition: 500ms all ease-in-out; $transition: 120ms opacity ease,
120ms color ease,
120ms background-color ease,
120ms border-color ease;