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
Daniel Ternyak
parent
8508670247
commit
9a073fd1d5
|
|
@ -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 });
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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">
|
||||
{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>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,23 @@
|
|||
$padding-large-horizontal,
|
||||
$font-size-bump,
|
||||
$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
|
||||
|
|
@ -20,7 +35,7 @@
|
|||
$padding-large-horizontal,
|
||||
$font-size-bump-more,
|
||||
$line-height-large,
|
||||
$border-radius
|
||||
$btn-border-radius-large
|
||||
);
|
||||
}
|
||||
.btn-sm {
|
||||
|
|
@ -30,7 +45,7 @@
|
|||
$padding-small-horizontal,
|
||||
$font-size-base,
|
||||
$line-height-small,
|
||||
$border-radius
|
||||
$btn-border-radius-small
|
||||
);
|
||||
}
|
||||
.btn-xs {
|
||||
|
|
@ -39,7 +54,7 @@
|
|||
$padding-xs-horizontal,
|
||||
$font-size-small,
|
||||
$line-height-small,
|
||||
$border-radius
|
||||
$btn-border-radius-small
|
||||
);
|
||||
padding: .1rem .6rem .2rem;
|
||||
}
|
||||
|
|
@ -50,7 +65,7 @@
|
|||
1rem,
|
||||
14px,
|
||||
$line-height-base,
|
||||
$border-radius
|
||||
$btn-border-radius-small
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,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;
|
||||
|
|
|
|||
|
|
@ -1 +1,4 @@
|
|||
$transition: 500ms all ease-in-out;
|
||||
$transition: 120ms opacity ease,
|
||||
120ms color ease,
|
||||
120ms background-color ease,
|
||||
120ms border-color ease;
|
||||
|
|
|
|||
Loading…
Reference in New Issue