From cfa2592d78b31ea3c5d056bf1344cfd5d5353f16 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sun, 25 Mar 2018 22:19:42 -0700 Subject: Update button styles --- ui/app/css/itcss/components/add-token.scss | 9 +-- ui/app/css/itcss/components/buttons.scss | 84 ++++++++++++++++++---- ui/app/css/itcss/components/hero-balance.scss | 3 +- ui/app/css/itcss/components/modal.scss | 13 +--- ui/app/css/itcss/components/new-account.scss | 27 +------ ui/app/css/itcss/components/request-signature.scss | 34 ++------- ui/app/css/itcss/components/send.scss | 8 +-- ui/app/css/itcss/components/settings.scss | 38 ++++++---- 8 files changed, 110 insertions(+), 106 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index 13020f62f..bdf9da385 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -172,11 +172,8 @@ justify-content: center; } - &__button { - flex: 1 0 141px; - margin: 0 12px; - padding: 10px 22px; - height: 54px; + &__cancel-button { + margin-right: 1.2rem; } &__token-icons-container { @@ -334,7 +331,7 @@ } &__buttons { - padding: 12px 0; + padding: 1rem; margin: 0; border-top: 1px solid $gallery; width: 100%; diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 8df8829f2..04e1ed96e 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -2,6 +2,76 @@ Buttons */ +.btn-primary, +.btn-primary--lg, +.btn-secondary, +.btn-secondary--lg { + background: $white; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + border-radius: 4px; + font-size: 14px; + font-weight: 500; + transition: border-color .3s ease; + padding: 0 20px; + min-width: 140px; + text-transform: uppercase; +} + +.btn-primary, +.btn-primary--lg { + color: $curious-blue; + border: 2px solid $spindle; + + &:active { + background: $zumthor; + border-color: $curious-blue; + } + + &:hover { + border-color: $curious-blue; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +.btn-secondary, +.btn-secondary--lg { + color: $scorpion; + border: 2px solid $dusty-gray; + + &:active { + background: $gallery; + border-color: $dusty-gray; + } + + &:hover { + border-color: $scorpion; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +.btn-primary, .btn-secondary { + height: 44px; +} + +.btn-primary--lg, .btn-secondary--lg { + height: 54px; +} + .btn-green { background-color: #02c9b1; // TODO: reusable color in colors.css } @@ -130,20 +200,6 @@ button.btn-thin { font-size: 13px; } -.btn-secondary { - border: 1px solid #979797; - border-radius: 2px; - background-color: $white; - font-size: 16px; - line-height: 24px; - padding: 16px 42px; - - &[disabled] { - background-color: $white !important; - opacity: .5; - } -} - .btn-tertiary { border: 1px solid transparent; border-radius: 2px; diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index a3f051361..69cde8a0f 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -103,10 +103,11 @@ } .hero-balance-button { + min-width: initial; width: 6rem; @media #{$sub-mid-size-breakpoint-range} { - padding: 0.4rem; + padding: .4rem; width: 4rem; display: flex; flex: 1; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index a8d5e8dc2..9ae3ea7fa 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -261,7 +261,7 @@ .account-modal__button { margin-top: 17px; padding: 10px 22px; - width: 235px; + width: 286px; } } @@ -341,9 +341,8 @@ .export-private-key__button { margin-top: 17px; - padding: 10px 22px; width: 141px; - height: 54px; + min-width: initial; } .export-private-key__button--cancel { @@ -765,15 +764,7 @@ } &__deposit-button, .shapeshift-form__shapeshift-buy-btn { - height: 54px; width: 257px; - border: 1px solid $curious-blue; - border-radius: 4px; - display: flex; - justify-content: center; - font-size: 16px; - color: $curious-blue; - background-color: $white; } .shapeshift-form-wrapper { diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index c2cefe4ad..aa7fed956 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -192,29 +192,8 @@ justify-content: space-between; } - &__button-cancel, - &__button-create { - height: 55px; + &__button { width: 150px; - border-radius: 2px; - background-color: #FFFFFF; - } - - &__button-cancel { - border: 1px solid $dusty-gray; - color: $dusty-gray; - font-family: Roboto; - font-size: 16px; - line-height: 21px; - text-align: center; + min-width: initial; } - - &__button-create { - border: 1px solid $curious-blue; - color: $curious-blue; - font-family: Roboto; - font-size: 16px; - line-height: 21px; - text-align: center; - } -} \ No newline at end of file +} diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index d81099bfa..a4728afef 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -190,41 +190,19 @@ width: 100%; display: flex; align-items: center; - justify-content: space-evenly; + justify-content: center; font-size: 22px; position: relative; flex: 0 0 auto; border-top: 1px solid $geyser; + padding: 1.6rem; - &__cancel-button, - &__sign-button { - display: flex; - align-items: center; - justify-content: center; - flex: 1 0 auto; - font-family: Roboto; - font-size: 16px; - font-weight: 300; - height: 55px; - line-height: 32px; - cursor: pointer; - border-radius: 2px; - box-shadow: none; - max-width: 162px; - margin: 12px; + button { + width: 165px; } &__cancel-button { - background: none; - border: 1px solid $dusty-gray; - margin-right: 6px; - } - - &__sign-button { - background-color: $caribbean-green; - border-width: 0; - color: $white; - margin-left: 6px; + margin-right: 1.2rem; } } -} \ No newline at end of file +} diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 263b362ca..89d2be891 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -782,7 +782,6 @@ &__buttons { display: flex; justify-content: space-between; - width: 181.75px; margin-right: 21.25px; } @@ -800,13 +799,8 @@ } &__cancel, &__save, &__save__error { - height: 34.64px; width: 85.74px; - border: 1px solid $dusty-gray; - border-radius: 2px; - font-family: 'DIN OT'; - font-size: 12px; - color: $dusty-gray; + min-width: initial; } &__save__error { diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss index d60ebd934..dcc9b98d5 100644 --- a/ui/app/css/itcss/components/settings.scss +++ b/ui/app/css/itcss/components/settings.scss @@ -130,24 +130,32 @@ cursor: pointer; } -.settings__clear-button { - font-size: 16px; - border: 1px solid $curious-blue; - color: $curious-blue; - border-radius: 2px; - padding: 18px; - background-color: $white; - text-transform: uppercase; -} - -.settings__clear-button--red { - border: 1px solid $monzo; +.settings__button--red { + border-color: lighten($monzo, 10%); color: $monzo; + + &:active { + background: lighten($monzo, 55%); + border-color: $monzo; + } + + &:hover { + border-color: $monzo; + } } -.settings__clear-button--orange { - border: 1px solid rgba(247, 134, 28, 1); - color: rgba(247, 134, 28, 1); +.settings__button--orange { + border-color: lighten($ecstasy, 20%); + color: $ecstasy; + + &:active { + background: lighten($ecstasy, 40%); + border-color: $ecstasy; + } + + &:hover { + border-color: $ecstasy; + } } .settings__info-logo-wrapper { -- cgit