From a58097eeaa479c936e73c0098dfc9c22abd789f6 Mon Sep 17 00:00:00 2001 From: William O'Beirne Date: Mon, 22 Jan 2018 15:44:13 -0500 Subject: [PATCH] Various Browser Quirk Fixes (#881) * Fix large images in onboarding in safari. * Fix shapeshift banner centering, adjusted spacing and logo. * Fix jagged rates. * Fix small password input on Firefox. * Remove top and bottom padding on form inputs that would cause cut off text. * Dont remove top and bottom padding on textareas. * Prevent flickering from rerender of promos. --- common/assets/images/logo-shapeshift.svg | 261 ++++++++---------- common/components/BalanceSidebar/Promos.tsx | 2 +- .../OnboardModal/components/OnboardSlide.scss | 2 +- .../components/Keystore/EnterPassword.scss | 1 + .../Tabs/Swap/components/CurrentRates.scss | 2 +- .../Swap/components/ShapeshiftBanner.scss | 49 ++-- .../Tabs/Swap/components/ShapeshiftBanner.tsx | 11 +- common/sass/styles/overrides/forms.scss | 6 + 8 files changed, 160 insertions(+), 174 deletions(-) diff --git a/common/assets/images/logo-shapeshift.svg b/common/assets/images/logo-shapeshift.svg index 6cdbce03..8c6ecc54 100644 --- a/common/assets/images/logo-shapeshift.svg +++ b/common/assets/images/logo-shapeshift.svg @@ -1,147 +1,116 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + Artboard + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/common/components/BalanceSidebar/Promos.tsx b/common/components/BalanceSidebar/Promos.tsx index 2905d300..9314ff61 100644 --- a/common/components/BalanceSidebar/Promos.tsx +++ b/common/components/BalanceSidebar/Promos.tsx @@ -15,7 +15,7 @@ interface State { activePromo: number; } -export default class Promos extends React.Component<{}, State> { +export default class Promos extends React.PureComponent<{}, State> { public timer: any = null; public state = { diff --git a/common/containers/OnboardModal/components/OnboardSlide.scss b/common/containers/OnboardModal/components/OnboardSlide.scss index 4e0c701e..ebee9571 100644 --- a/common/containers/OnboardModal/components/OnboardSlide.scss +++ b/common/containers/OnboardModal/components/OnboardSlide.scss @@ -39,7 +39,7 @@ display: flex; flex-flow: column; justify-content: center; - min-width: 250px; + width: 250px; &.is-left { padding-right: $space * 1.5; diff --git a/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.scss b/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.scss index 4582ba28..716b0c51 100644 --- a/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.scss +++ b/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.scss @@ -7,6 +7,7 @@ &-password { max-width: 40rem; + width: 100%; margin: 0 auto $space; &-label { diff --git a/common/containers/Tabs/Swap/components/CurrentRates.scss b/common/containers/Tabs/Swap/components/CurrentRates.scss index 413c3b81..ec48f738 100644 --- a/common/containers/Tabs/Swap/components/CurrentRates.scss +++ b/common/containers/Tabs/Swap/components/CurrentRates.scss @@ -43,7 +43,7 @@ &-amount { display: inline-block; - min-width: 190px; + min-width: 200px; opacity: 0.9; text-align: left; } diff --git a/common/containers/Tabs/Swap/components/ShapeshiftBanner.scss b/common/containers/Tabs/Swap/components/ShapeshiftBanner.scss index 32421ece..9336dd1a 100644 --- a/common/containers/Tabs/Swap/components/ShapeshiftBanner.scss +++ b/common/containers/Tabs/Swap/components/ShapeshiftBanner.scss @@ -1,24 +1,31 @@ +@import 'common/sass/variables'; + .ShapeshiftBanner { - display: block; - width: fit-content; - margin: auto; - margin-top: 16px; - margin-bottom: 16px; - padding: 0px 16px; - background-color: #3a526d; - border-radius: 3px; - box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1), inset 0 0 3px 0 rgba(0,0,0,0.1); - p { + margin: $space 0; + text-align: center; + + &-banner { display: inline-block; - color: white; - vertical-align: middle; - margin-bottom: 0px; + text-align: left; + padding: $space-sm $space; + background-color: #3a526d; + border-radius: 3px; + box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1), inset 0 0 3px 0 rgba(0,0,0,0.1); + p { + display: inline-block; + color: white; + vertical-align: middle; + margin-bottom: 0px; + + b { + margin-right: 5px; + } + } + img { + display: inline-block; + height: 32px; + box-sizing: content-box; + margin-left: 8px; + } } - img { - display: inline-block; - height: 32px; - padding: 8px; - box-sizing: content-box; - margin-left: 16px; - } -} \ No newline at end of file +} diff --git a/common/containers/Tabs/Swap/components/ShapeshiftBanner.tsx b/common/containers/Tabs/Swap/components/ShapeshiftBanner.tsx index bd90b798..0a279590 100644 --- a/common/containers/Tabs/Swap/components/ShapeshiftBanner.tsx +++ b/common/containers/Tabs/Swap/components/ShapeshiftBanner.tsx @@ -4,9 +4,12 @@ import shapeshiftSvg from 'assets/images/logo-shapeshift.svg'; export default () => (
-

- New Feature: Exchange coins & tokens -

- +
+

+ New Feature: + Exchange coins & tokens with +

+ +
); diff --git a/common/sass/styles/overrides/forms.scss b/common/sass/styles/overrides/forms.scss index 51e564aa..8cae53ce 100644 --- a/common/sass/styles/overrides/forms.scss +++ b/common/sass/styles/overrides/forms.scss @@ -42,6 +42,12 @@ input[readonly] { } } +input.form-control, +select.form-control { + padding-top: 0; + padding-bottom: 0; +} + .form-group { display: block; margin-top: $form-group-margin-bottom * 2;