added Sass variables for the most used colors and cleaned up all the scss files

>
>
Co-authored-by: Nkmai <[email protected]>
Co-authored-by: lind-tania <[email protected]>
Co-authored-by: rtviner <[email protected]>
Co-authored-by: caitlinchan23 <[email protected]>
 

Author: Nkmai

src/app/styles/abstracts/_variables.scss

@@ -5,27 +5,38 @@ $text-font-stack: 'Roboto', sans-serif !default;
 
 /// @type Color
 $fiery-rose: #ff6569;
+$blue-brand: #62d6fb;
 
 /// @type Color
 $blue-color-gradient: linear-gradient(145deg, #69e5ff, #58c1e2);
+$red-color-gradient: linear-gradient(145deg, #ff6569, #e65558);
+$grey-color-gradient: linear-gradient(145deg, #5c6068, #4d5157);
 
 /// @type Color:
 $box-shadow-blue: inset 5px 5px 10px #53b6d5, inset -5px -5px 10px #71f6ff;
+$box-shadow-red: inset 5px 5px 10px #d95053, inset -5px -5px 10px #ff6c71;
 
 /// @type Color
 $text-color: #e7e7e7;
 
 /// @type Color
 $brand-color: #242529 !default;
 
+/// @type Color
+$background-color: #333333 !default;
+$medium-background-color: #51565e !default;
+$light-background-color: #585d65 !default;
+
 /// Light grey
 /// @type Color
 $light-grey-one: #474c55 !default;
 
 /// @type Color
 $light-grey-two: #5f6369 !default;
 
-$light-grey-three: rgb(101, 104, 110) !default;
+$light-grey-three: #65686e !default;
+
+$light-grey-four: #4c4c4d !default;
 
 /// @type Color
 $navbar-color: #44484e !default;
@@ -34,7 +45,14 @@ $navbar-color: #44484e !default;
 $head-color: #242529 !default;
 
 /// @type Color
-$border-color: rgb(41, 41, 41) !default;
+$border-color: #292929 !default;
+
+/// @type Color
+$border-slider: #57c5f7 !default;
+
+/// @type Color
+$border-rc: #373737 !default;
+$background-rc-color: #e9e9e9 !default;
 
 /// @type Color
 $highlight-color: rgba(224, 224, 224, 0.5) !default;

src/app/styles/base/_typography.scss

@@ -1,5 +1,4 @@
 body {
-  color: $text-color;
-  font: normal 13px $text-font-stack;
-  // font: normal 125% / 1.4 $text-font-stack;
+	color: $text-color;
+	font: normal 13px $text-font-stack;
 }

src/app/styles/components/_buttons.scss

@@ -14,11 +14,11 @@
 	font: 300 14px 'Roboto', sans-serif;
 	font-size: $button-text-size;
 	width: 120px;
-	background: linear-gradient(145deg, #ff6569, #e65558);
+	background: $red-color-gradient;
 }
 .empty-button:hover {
 	color: black;
-	box-shadow: inset 5px 5px 10px #d95053, inset -5px -5px 10px #ff6c71;
+	box-shadow: $box-shadow-red;
 }
 
 .state-dropdown {
@@ -43,7 +43,7 @@
 	width: 70px;
 	border: none;
 	border-radius: 3px;
-	background: linear-gradient(145deg, #5c6068, #4d5157);
+	background: $grey-color-gradient;
 	font: normal 11px 'Roboto', sans-serif;
 	color: #b0b0b0;
 }
@@ -66,7 +66,6 @@
 .jump-button:hover {
 	// remove the blue border when button is clicked
 	color: white;
-	// color: black;
 	background-color: $fiery-rose;
 
 	cursor: pointer;
@@ -146,7 +145,7 @@
 }
 
 .svg-inline--fa {
-	color: #62d6fb;
+	color: $blue-brand;
 	margin-right: 0.75em;
 	display: inline-block;
 	font-size: inherit;
@@ -165,10 +164,10 @@
 	font: 300 14px 'Roboto', sans-serif;
 	font-size: $button-text-size;
 
-	background: rgb(36, 37, 41);
+	background: $brand-color;
 	border-radius: 5px;
 	position: relative;
-	border: 1px solid rgba(184, 196, 194, 0.25);
+	border: 1px solid #b8c4c240;
 
 	@extend %disable-highlight;
 }