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

3 files changed, 3 insertions, 231 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;
   }