Update buttons & colors to match design system (#6446)

* Refactoring button styles

* renaming buttons

* Add Link and Button styles

* Update new btn styles and storybook

* Fix tests

* Change font weight; Update storybook

* Fix linter

6 files changed, 58 insertions, 232 deletions

diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
deleted file mode 100644
index 3e99d0ac6..000000000
--- a/ui/app/css/itcss/components/buttons.scss
+++ /dev/null
@@ -1,230 +0,0 @@
-/*
-  Buttons
- */
-
-.button {
-  min-height: 44px;
-  background: $white;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 400;
-  transition: border-color .3s ease;
-  padding: 0 16px;
-  min-width: 140px;
-  width: 100%;
-  text-transform: uppercase;
-  outline: none;
-  font-family: Roboto;
-
-  &--disabled,
-  &[disabled] {
-    cursor: auto;
-    opacity: .5;
-    pointer-events: none;
-  }
-}
-
-.btn-primary {
-  color: $curious-blue;
-  border: 2px solid $spindle;
-
-  &:active {
-    background: $zumthor;
-    border-color: $curious-blue;
-  }
-
-  &:hover {
-    border-color: $curious-blue;
-  }
-}
-
-.btn-secondary {
-  color: $monzo;
-  border: 2px solid lighten($monzo, 40%);
-
-  &:active {
-    background: lighten($monzo, 55%);
-    border-color: $monzo;
-  }
-
-  &:hover {
-    border-color: $monzo;
-  }
-}
-
-.btn-default {
-  color: $scorpion;
-  border: 2px solid $dusty-gray;
-
-  &:active {
-    background: $gallery;
-    border-color: $dusty-gray;
-  }
-
-  &:hover {
-    border-color: $scorpion;
-  }
-}
-
-.btn-confirm {
-  color: $white;
-  border: 2px solid $curious-blue;
-  background-color: $curious-blue;
-}
-
-.btn-raised {
-  color: $curious-blue;
-  background-color: $white;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
-  padding: 6px;
-  height: initial;
-  min-height: initial;
-  width: initial;
-  min-width: initial;
-}
-
-.btn--first-time {
-  height: 54px;
-  width: 198px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
-  color: $white;
-  font-size: 1.25rem;
-  font-weight: 500;
-  transition: 200ms ease-in-out;
-  background-color: rgba(247, 134, 28, .9);
-  border-radius: 0;
-}
-
-.btn--large {
-  min-height: 54px;
-}
-
-.btn-green {
-  background-color: #02c9b1; // TODO: reusable color in colors.css
-}
-
-.btn-clear {
-  background: $white;
-  text-align: center;
-  padding: .8rem 1rem;
-  color: $curious-blue;
-  border: 2px solid $spindle;
-  border-radius: 4px;
-  font-size: .85rem;
-  font-weight: 400;
-  transition: border-color .3s ease;
-
-  &:hover {
-    border-color: $curious-blue;
-  }
-
-  &--disabled,
-  &[disabled] {
-    cursor: auto;
-    opacity: .5;
-    pointer-events: none;
-  }
-}
-
-.btn-cancel {
-  background: $white;
-  text-align: center;
-  padding: .9rem 1rem;
-  color: $scorpion;
-  border: 2px solid $dusty-gray;
-  border-radius: 4px;
-  font-size: .85rem;
-  font-weight: 400;
-  transition: border-color .3s ease;
-  width: 100%;
-
-  &:hover {
-    border-color: $scorpion;
-  }
-}
-
-// No longer used in flat design, remove when modal buttons done
-// div.wallet-btn {
-//   border: 1px solid rgb(91, 93, 103);
-//   border-radius: 2px;
-//   height: 30px;
-//   width: 75px;
-//   font-size: 0.8em;
-//   text-align: center;
-//   line-height: 25px;
-// }
-
-// .btn-red {
-//   background: rgba(254, 35, 17, 1);
-//   box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
-// }
-
-button[disabled],
-input[type="submit"][disabled] {
-  cursor: not-allowed;
-  opacity: .5;
-  // background: rgba(197, 197, 197, 1);
-  // box-shadow: 0 3px 6px rgba(197, 197, 197, .36);
-}
-
-// button.spaced {
-//   margin: 2px;
-// }
-
-// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
-//   transform: scale(1.1);
-// }
-// button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
-//   transform: scale(0.95);
-// }
-
-button.primary {
-  padding: 8px 12px;
-  background: #f7861c;
-  box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
-  color: $white;
-  font-size: 1.1em;
-  font-family: Roboto;
-  text-transform: uppercase;
-}
-
-.btn-light {
-  padding: 8px 12px;
-  // background: #FFFFFF; // $bg-white
-  box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
-  color: #585d67; // TODO: make reusable light button color
-  font-size: 1.1em;
-  font-family: Roboto;
-  text-transform: uppercase;
-  text-align: center;
-  line-height: 20px;
-  border-radius: 2px;
-  border: 1px solid #979797; // #TODO: make reusable light border color
-  opacity: .5;
-}
-
-// TODO: cleanup: not used anywhere
-button.btn-thin {
-  border: 1px solid;
-  border-color: #4d4d4d;
-  color: #4d4d4d;
-  background: rgb(255, 174, 41);
-  border-radius: 4px;
-  min-width: 200px;
-  margin: 12px 0;
-  padding: 6px;
-  font-size: 13px;
-}
-
-.btn-tertiary {
-  border: 1px solid transparent;
-  border-radius: 2px;
-  background-color: transparent;
-  font-size: 16px;
-  line-height: 24px;
-  padding: 16px 42px;
-}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index f2f37bfa3..3d426a33c 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -1,4 +1,4 @@
-@import './buttons.scss';
+@import '../../../components/ui/button/buttons';
 
 @import './footer.scss';
 
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 42ef7ae0a..9c0a5cf61 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -538,6 +538,8 @@
   }
 
   &__button {
+    @include paragraph;
+    @extend %button;
     width: 141px;
     margin: 0 5px;
   }
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index d8e62c97a..8b282aa1e 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -18,6 +18,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-size: 16px;
 
   @media screen and (max-width: $break-small) {
     overflow-y: overlay;
diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss
index 18c444c8a..93107a106 100644
--- a/ui/app/css/itcss/settings/typography.scss
+++ b/ui/app/css/itcss/settings/typography.scss
@@ -403,3 +403,40 @@
   font-weight: 400;
   font-style: normal;
 }
+
+@mixin fontScale($weight: 400, $size: 1rem) {
+  font-weight: $weight;
+  font-size: $size;
+}
+
+@mixin h1($weight: 400, $size: 2.5rem){
+  @include fontScale($weight, $size);
+}
+
+@mixin h2($weight: 400, $size: 2rem){
+  @include fontScale($weight, $size);
+}
+
+@mixin h3($weight: 400, $size: 1.5rem){
+  @include fontScale($weight, $size);
+}
+
+@mixin h4($weight: 400, $size: 1.125rem){
+  @include fontScale($weight, $size);
+}
+
+@mixin h5($weight: 400, $size: 1rem){
+  @include fontScale($weight, $size);
+}
+
+@mixin h6($weight: 400, $size: .875rem){
+  @include fontScale($weight, $size);
+}
+
+@mixin h7($weight: 400, $size: .75rem){
+  @include fontScale($weight, $size);
+}
+
+@mixin paragraph($weight: 400, $size: 1rem){
+  @include fontScale($weight, $size);
+}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 89bd8b96a..f7003b1f4 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -26,7 +26,7 @@ $dusty-gray: #9b9b9b;
 $alto: #dedede;
 $alabaster: #fafafa;
 $silver-chalice: #aeaeae;
-$curious-blue: #2f9ae0;
+$curious-blue: #037DD6;
 $concrete: #f3f3f3;
 $tundora: #4d4d4d;
 $nile-blue: #1b344d;
@@ -93,3 +93,19 @@ $break-large: 576px;
 
 $primary-font-type: Roboto;
 
+$Blue-000: #eaf6ff;
+$Blue-400: #1098fc;
+$Blue-500: #037DD6;
+$Blue-600: #0260a4;
+
+$Grey-000: #f2f3f4;
+$Grey-500: #6A737D;
+
+$Red-000: #fcf2f3;
+$Red-500: #D73A49;
+$Red-600: #b92534;
+
+$Orange-000: #fef5ef;
+$Orange-500: #F66A0A;
+
+