From 2f6584378d25dd251bac3c470a8db3ceefda6d83 Mon Sep 17 00:00:00 2001
From: Tressley Cahill <tressley@gmail.com>
Date: Mon, 22 Jul 2019 13:00:39 -0400
Subject: [PATCH] New colors updates (#11261)

* Update $purple-400

* Update colors.scss

Adds new colors and updates existing variables.
---
 website/client/assets/scss/colors.scss      |  65 ++++----
 website/client/assets/scss/create-task.scss | 172 ++++++++++----------
 website/client/assets/scss/task.scss        |   4 +-
 3 files changed, 124 insertions(+), 117 deletions(-)

diff --git a/website/client/assets/scss/colors.scss b/website/client/assets/scss/colors.scss
index bcd847abb7..ee3864f7c0 100644
--- a/website/client/assets/scss/colors.scss
+++ b/website/client/assets/scss/colors.scss
@@ -5,9 +5,6 @@
 $white: #FFFFFF;
 $black: #1A181D;
 
-$header-color: #D5C8FF;
-$header-dark-background: #271B3D;
-
 $gray-10: #34313A;
 $gray-50: #4E4A57;
 $gray-100: #686274;
@@ -18,13 +15,7 @@ $gray-500: #E1E0E3;
 $gray-600: #EDECEE;
 $gray-700: #F9F9F9;
 
-$purple-50: #36205D;
-$purple-100: #432874;
-$purple-200: #4F2A93;
-$purple-300: #6133B4;
-$purple-400: #925CF3;
-$purple-500: #BDA8FF;
-
+$red-1: #6C0406;
 $red-10: #F23035;
 $red-50: #F74E52;
 $red-100: #FF6165;
@@ -35,39 +26,55 @@ $maroon-50: #C92B2B;
 $maroon-100: #DE3F3F;
 $maroon-500: #F19595;
 
-$yellow-5: #EE9109;
-$yellow-10: #FFA623;
-$yellow-50: #FFB445;
-$yellow-100: #FFBE5D;
-$yellow-500: #FFD9A0;
-
+$orange-1: #7F3300;
 $orange-10: #F47825;
 $orange-50: #FA8537;
 $orange-100: #FF944C;
-$orange-500: #FFBF98;
+$orange-500: #FFC8A7;
 
+$yellow-1: #794B00;
+$yellow-5: #EE9109;
+$yellow-10: #FFA624;
+$yellow-50: #FFB445;
+$yellow-100: #FFBE5D;
+$yellow-500: #FEDEAD;
+
+$green-1: #005737;
+$green-10: #1CA372;
+$green-50: #20B780;
+$green-100: #24CC8F;
+$green-500: #77F4C7;
+
+$teal-1: #005158;
+$teal-10: #26A0AB;
+$teal-50: #34B5C1;
+$teal-100: #3BCAD7;
+$teal-500: #8EEDF6;
+
+$blue-1: #033F5E;
 $blue-10: #2995CD;
 $blue-50: #46A7D9;
 $blue-100: #50B5E9;
 $blue-500: #A9DCF6;
 
-$teal-10: #20B2BF;
-$teal-50: #3BCAD7;
-$teal-100: #5EDDE9;
-$teal-500: #A5F7FF;
+$purple-50: #36205D;
+$purple-100: #432874;
+$purple-200: #4F2A93;
+$purple-300: #6133B4;
+$purple-400: #925CF3;
+$purple-500: #BDA8FF;
+$purple-600: #D5C8FF;
 
-$green-10: #24CC8F;
-$green-50: #3FDAA2;
-$green-100: #5AEAB2;
-$green-500: #A6FFDF;
+$header-color: #D5C8FF;
+$header-dark-background: #271B3D;
 
 $suggested-item-color: #D5C8FF;
 
-$healer-color: #cf8229;
+$healer-color: #FFA624;
 $rogue-color: #4F2A93;
-$warrior-color: #B01515;
-$wizard-color: #1f6ea2;
+$warrior-color: #C92B2B;
+$wizard-color: #2995CD;
 
 $gems-color: #24CC8F;
-$gold-color: #FFA623;
+$gold-color: #FFA624;
 $hourglass-color: #2995CD;
diff --git a/website/client/assets/scss/create-task.scss b/website/client/assets/scss/create-task.scss
index e3997d50ea..a5593b02b5 100644
--- a/website/client/assets/scss/create-task.scss
+++ b/website/client/assets/scss/create-task.scss
@@ -1,86 +1,86 @@
-.create-task-area {
-  position: absolute;
-  right: 24px;
-  top: -24px;
-  z-index: 999;
-  align-items: center;
-}
-
-.slide-tasks-btns-leave-active, .slide-tasks-btns-enter-active {
-  max-width: 320px;
-  transition: all 0.3s cubic-bezier(0, 1, 0.5, 1);
-}
-
-.slide-tasks-btns-enter, .slide-tasks-btns-leave-to {
-  max-width: 0;
-  opacity: 0;
-  overflow-x: hidden;
-}
-
-.diamond-btn {
-  margin-left: 24px;
-  background: $white;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
-  cursor: pointer;
-  color: $gray-200;
-  transform: rotate(45deg);
-
-  &:hover:not(.create-btn) {
-    color: $purple-400;
-    box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
-  }
-
-  .svg-icon {
-    width: 20px;
-    height: 20px;
-    transform: rotate(-45deg);
-
-    &.icon-habit {
-      width: 24px;
-      height: 16px;
-    }
-
-    &.icon-daily {
-      width: 21.6px;
-      height: 18px;
-    }
-
-    &.icon-todo {
-      width: 18px;
-      height: 18px;
-    }
-
-    &.icon-reward {
-      width: 23.4px;
-      height: 18px;
-    }
-  }
-}
-
-.create-btn {
-  color: $white;
-  background-color: $green-10;
-  height: 48px;
-  width: 48px;
-
-  .svg-icon {
-    width: 16px;
-    height: 16px;
-    transform: rotate(-45deg);
-    transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
-  }
-
-  &.open {
-    background: $gray-200 !important;
-
-    .svg-icon {
-      transform: rotate(-90deg);
-    }
-  }
-}
+.create-task-area {
+  position: absolute;
+  right: 24px;
+  top: -24px;
+  z-index: 999;
+  align-items: center;
+}
+
+.slide-tasks-btns-leave-active, .slide-tasks-btns-enter-active {
+  max-width: 320px;
+  transition: all 0.3s cubic-bezier(0, 1, 0.5, 1);
+}
+
+.slide-tasks-btns-enter, .slide-tasks-btns-leave-to {
+  max-width: 0;
+  opacity: 0;
+  overflow-x: hidden;
+}
+
+.diamond-btn {
+  margin-left: 24px;
+  background: $white;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+  cursor: pointer;
+  color: $gray-200;
+  transform: rotate(45deg);
+
+  &:hover:not(.create-btn) {
+    color: $purple-400;
+    box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
+  }
+
+  .svg-icon {
+    width: 20px;
+    height: 20px;
+    transform: rotate(-45deg);
+
+    &.icon-habit {
+      width: 24px;
+      height: 16px;
+    }
+
+    &.icon-daily {
+      width: 21.6px;
+      height: 18px;
+    }
+
+    &.icon-todo {
+      width: 18px;
+      height: 18px;
+    }
+
+    &.icon-reward {
+      width: 23.4px;
+      height: 18px;
+    }
+  }
+}
+
+.create-btn {
+  color: $white;
+  background-color: $green-100;
+  height: 48px;
+  width: 48px;
+
+  .svg-icon {
+    width: 16px;
+    height: 16px;
+    transform: rotate(-45deg);
+    transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
+  }
+
+  &.open {
+    background: $gray-200 !important;
+
+    .svg-icon {
+      transform: rotate(-90deg);
+    }
+  }
+}
diff --git a/website/client/assets/scss/task.scss b/website/client/assets/scss/task.scss
index 35ee425538..2c9d271482 100644
--- a/website/client/assets/scss/task.scss
+++ b/website/client/assets/scss/task.scss
@@ -139,7 +139,7 @@
   &-good { // green
     &-control {
       &-bg { 
-        background: $green-10 !important;
+        background: $green-100 !important;
         &:hover {
           .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
           .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
@@ -151,7 +151,7 @@
     }
 
     &-modal {
-      &-bg { background: $green-10 !important; }
+      &-bg { background: $green-100 !important; }
       &-icon { color: $green-10 !important; }
       &-text { color: #1ca372 !important; }
       &-option-disabled:hover {