diff --git a/common/components/Header/components/CustomNodeModal.tsx b/common/components/Header/components/CustomNodeModal.tsx index ac58e895..4088e5c0 100644 --- a/common/components/Header/components/CustomNodeModal.tsx +++ b/common/components/Header/components/CustomNodeModal.tsx @@ -64,6 +64,7 @@ export default class CustomNodeModal extends React.Component { disabled: !!Object.keys(invalids).length }, { + type: 'default', text: translate('x_Cancel'), onClick: handleClose } @@ -79,16 +80,12 @@ export default class CustomNodeModal extends React.Component { handleClose={handleClose} >
- {isHttps && ( -
- {translate('NODE_Warning')} -
- )} + {isHttps &&
{translate('NODE_Warning')}
} {conflictedNode && (
- 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
)} @@ -309,9 +306,7 @@ export default class CustomNodeModal extends React.Component { 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 { 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 { return customNodes.find(conf => makeCustomNodeId(conf) === thisId); } - private handleChange = ( - ev: React.FormEvent - ) => { + private handleChange = (ev: React.FormEvent) => { const { name, value } = ev.currentTarget; this.setState({ [name as any]: value }); }; diff --git a/common/components/Header/components/Navigation.scss b/common/components/Header/components/Navigation.scss index 71191f1e..4b8b5ef2 100644 --- a/common/components/Header/components/Navigation.scss +++ b/common/components/Header/components/Navigation.scss @@ -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; diff --git a/common/containers/TabSection/Notifications.scss b/common/containers/TabSection/Notifications.scss index ae5d0459..c5029901 100644 --- a/common/containers/TabSection/Notifications.scss +++ b/common/containers/TabSection/Notifications.scss @@ -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%); + } + } + + &-exit { + opacity: 1; + transform: translateY(0%); + + &-active { + opacity: 0; + transform: translateY(100%); } } } - -.NotificationAnimation{ - &-exit { - opacity: 1; - transform: none; - &-active { - opacity: 0.01; - transform: translateY(100%); - transition: opacity 500ms, transform 500ms; - } - } -} \ No newline at end of file diff --git a/common/containers/Tabs/Swap/components/CurrencySwap.tsx b/common/containers/Tabs/Swap/components/CurrencySwap.tsx index aac226d3..14f6854b 100644 --- a/common/containers/Tabs/Swap/components/CurrencySwap.tsx +++ b/common/containers/Tabs/Swap/components/CurrencySwap.tsx @@ -219,7 +219,7 @@ export default class CurrencySwap extends Component { {bityLoaded ? (
- {originErr} + {originErr && {originErr}} { options={originKindOptions} value={origin.id} onChange={this.onChangeOriginKind} - size="smr" color="default" />

{translate('SWAP_init_2')}

- {destinationErr} + {destinationErr && ( + {destinationErr} + )} { options={destinationKindOptions} value={destination.id} onChange={this.onChangeDestinationKind} - size="smr" color="default" />
@@ -279,7 +279,7 @@ export default class CurrencySwap extends Component { onClick={this.onClickStartSwap} text={translate('SWAP_init_CTA')} disabled={this.state.disabled} - type="info" + type="primary" />
diff --git a/common/sass/styles/overrides/buttons.scss b/common/sass/styles/overrides/buttons.scss index 6df10b0d..8d1a68a1 100644 --- a/common/sass/styles/overrides/buttons.scss +++ b/common/sass/styles/overrides/buttons.scss @@ -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 diff --git a/common/sass/styles/overrides/forms.scss b/common/sass/styles/overrides/forms.scss index 5ed54b54..51e564aa 100644 --- a/common/sass/styles/overrides/forms.scss +++ b/common/sass/styles/overrides/forms.scss @@ -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); } } diff --git a/common/sass/styles/tab.scss b/common/sass/styles/tab.scss index 208a0d31..3635dbe2 100644 --- a/common/sass/styles/tab.scss +++ b/common/sass/styles/tab.scss @@ -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; diff --git a/common/sass/variables/buttons.scss b/common/sass/variables/buttons.scss index a852b1cb..a75d4f7f 100644 --- a/common/sass/variables/buttons.scss +++ b/common/sass/variables/buttons.scss @@ -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; diff --git a/common/sass/variables/forms.scss b/common/sass/variables/forms.scss index a2cec986..023c3a99 100644 --- a/common/sass/variables/forms.scss +++ b/common/sass/variables/forms.scss @@ -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; diff --git a/common/sass/variables/transitions.scss b/common/sass/variables/transitions.scss index cb2f2118..4de4058c 100644 --- a/common/sass/variables/transitions.scss +++ b/common/sass/variables/transitions.scss @@ -1 +1,4 @@ -$transition: 500ms all ease-in-out; +$transition: 120ms opacity ease, + 120ms color ease, + 120ms background-color ease, + 120ms border-color ease;