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

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

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

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

@ -6,14 +6,16 @@
bottom: 0;
left: 0;
right: 0;
z-index: $zindex-alerts;
}
.Notification {
position: relative;
padding: $space;
margin: $space 0;
padding: 1.25rem 1rem;
margin: 0 0 1px;
font-weight: 300;
font-size: $font-size-bump;
box-shadow: 0 1px rgba(#fff, 0.4);
&:first-child {
margin-top: 0;
@ -112,13 +114,27 @@
right: 0;
width: 9rem;
bottom: 0;
border-left: 1px solid rgba(255, 255, 255, .7);
border-radius: 0;
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');
&:after {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 0;
border-left: 1px solid rgba(0, 0, 0, .1);
transition: $transition;
}
&:hover {
background-color: rgba(#000, 0.1);
border-color: rgba(#fff, .5);
&:after {
opacity: 0;
}
}
&:active {
background-color: rgba(#000, 0.1);
@ -143,24 +159,29 @@
}
}
.NotificationAnimation{
.NotificationAnimation {
&-enter,
&-exit {
transition: opacity 250ms ease, transform 250ms ease;
}
&-enter {
opacity: 0.01;
opacity: 0;
transform: translateY(100%);
&-active {
opacity: 1;
transition: opacity 500ms;
transform: translateY(0%);
}
}
}
.NotificationAnimation{
&-exit {
opacity: 1;
transform: none;
transform: translateY(0%);
&-active {
opacity: 0.01;
opacity: 0;
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 ? (
<div className="form-inline CurrencySwap-inner-wrap">
<div className="CurrencySwap-input-group">
<span className="CurrencySwap-error-message">{originErr}</span>
{originErr && <span className="CurrencySwap-error-message">{originErr}</span>}
<input
id="origin-swap-input"
className={`CurrencySwap-input form-control ${
@ -238,14 +238,15 @@ export default class CurrencySwap extends Component<Props, State> {
options={originKindOptions}
value={origin.id}
onChange={this.onChangeOriginKind}
size="smr"
color="default"
/>
</div>
</div>
<h1 className="CurrencySwap-divider">{translate('SWAP_init_2')}</h1>
<div className="CurrencySwap-input-group">
<span className="CurrencySwap-error-message">{destinationErr}</span>
{destinationErr && (
<span className="CurrencySwap-error-message">{destinationErr}</span>
)}
<input
id="destination-swap-input"
className={`CurrencySwap-input form-control ${
@ -264,7 +265,6 @@ export default class CurrencySwap extends Component<Props, State> {
options={destinationKindOptions}
value={destination.id}
onChange={this.onChangeDestinationKind}
size="smr"
color="default"
/>
</div>
@ -279,7 +279,7 @@ export default class CurrencySwap extends Component<Props, State> {
onClick={this.onClickStartSwap}
text={translate('SWAP_init_CTA')}
disabled={this.state.disabled}
type="info"
type="primary"
/>
</div>
</article>

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

@ -4,54 +4,69 @@
.btn {
@include button-size(
$padding-base-vertical,
$padding-large-horizontal,
$font-size-bump,
$line-height-base,
$border-radius
);
$padding-base-vertical,
$padding-large-horizontal,
$font-size-bump,
$line-height-base,
$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
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
@include button-size(
$padding-large-vertical,
$padding-large-horizontal,
$font-size-bump-more,
$line-height-large,
$border-radius
);
$padding-large-vertical,
$padding-large-horizontal,
$font-size-bump-more,
$line-height-large,
$btn-border-radius-large
);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
@include button-size(
$padding-small-vertical,
$padding-small-horizontal,
$font-size-base,
$line-height-small,
$border-radius
);
$padding-small-vertical,
$padding-small-horizontal,
$font-size-base,
$line-height-small,
$btn-border-radius-small
);
}
.btn-xs {
@include button-size(
$padding-xs-vertical,
$padding-xs-horizontal,
$font-size-small,
$line-height-small,
$border-radius
);
$padding-xs-vertical,
$padding-xs-horizontal,
$font-size-small,
$line-height-small,
$btn-border-radius-small
);
padding: .1rem .6rem .2rem;
}
// This is a "smaller" small, to accomodate overrides done in v3.
.btn-smr {
@include button-size(
.4rem,
1rem,
14px,
$line-height-base,
$border-radius
);
.4rem,
1rem,
14px,
$line-height-base,
$btn-border-radius-small
);
}
// Custom color

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

@ -38,7 +38,7 @@ input[readonly] {
border-color: $input-border-focus;
outline: 0;
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
@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 {
&.is-valid {
border-color: lighten($brand-success, 25%);
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);
}
@include form-control-state($brand-success);
}
&.is-invalid {
border-color: lighten($brand-danger, 25%);
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);
}
@include form-control-state($brand-danger);
}
&.is-semivalid {
border-color: lighten($brand-warning, 25%);
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);
}
@include form-control-state($brand-warning);
}
}

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

@ -6,10 +6,12 @@
&-pane {
background: #fff;
box-shadow: 16px 16px 47px 2px rgba(0, 0, 0, .07);
min-height: 1.5rem;
padding: 1.5rem 2rem;
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 {
background: none;

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

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