refactor colors

src/assets/css/BottomBar/BottomBar.scss

@@ -3,7 +3,7 @@
   padding: $small;
 
   .grid {
-    background-color: $gray;
+    background-color: $primary;
     display: grid;
     height: 100%;
     padding-right: $small;

src/assets/css/ProgressBar.scss

@@ -5,36 +5,44 @@ input[type="range"] {
   height: 0.3rem;
   border-radius: 5px;
   background-size: 0 100%;
-  background: $black linear-gradient($blue, $blue) no-repeat;
+  background: $gray linear-gradient($accent, $accent) no-repeat;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+
+    height: 0.9rem;
+    width: 0.9rem;
+    border-radius: 0 50% 50% 0;
+    background: $accent;
+  }
+
+  &::-moz-range-thumb {
+    -webkit-appearance: none;
+    height: 0rem;
+    border-radius: 50%;
+    background: $accent;
+    border: none;
+  }
+
+  &:hover {
+    &::-moz-range-thumb {
+      height: .8rem;
+    }
+  }
+
+  &::-ms-thumb {
+    -webkit-appearance: none;
+    display: none;
+
+    height: 0.9rem;
+    width: 0.9rem;
+    border-radius: 0 50% 50% 0;
+    background: $accent;
+    border: none;
+  }
 }
 
 /* Input Thumb */
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  height: 0.8rem;
-  width: 0.8rem;
-  border-radius: 50%;
-  background: $blue;
-}
-
-input[type="range"]::-moz-range-thumb {
-  -webkit-appearance: none;
-  height: 0.8rem;
-  width: 0.8rem;
-  border-radius: 50%;
-  background: $blue;
-  border: none;
-}
-
-input[type="range"]::-ms-thumb {
-  -webkit-appearance: none;
-  height: 0.8rem;
-  width: 0.8rem;
-  border-radius: 50%;
-  background: $blue;
-  border: none;
-}
-
 input[type="range"]::-webkit-slider-thumb:hover {
   background: $pink;
 }

src/assets/css/Search/Search.scss

@@ -1,48 +0,0 @@
-.right-search {
-  position: relative;
-  display: grid;
-  grid-template-rows: min-content 1fr;
-  overflow: hidden;
-  width: auto;
-  height: 100%;
-  padding: $small $small 0 0;
-
-  .no-res {
-    text-align: center;
-    display: grid;
-    height: calc(100% - $small);
-    place-items: center;
-    font-size: 2rem;
-    transition: all 0.3s ease;
-    line-height: 4rem !important;
-
-    .highlight {
-      padding: $small;
-      background-color: rgb(29, 26, 26);
-    }
-  }
-
-  .heading {
-    padding: $medium;
-    border-radius: $small;
-    margin-bottom: $small;
-    text-align: center !important;
-    font-size: 2rem;
-    color: $white;
-  }
-
-  .input {
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-}
-
-.right-search .scrollable {
-  overflow-y: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}

src/assets/css/_variables.scss

@@ -36,9 +36,12 @@ $indigo: rgb(94, 92, 230);
 $teal: rgb(64, 200, 224);
 
 // 60 30 10
-$primary: $blue;
+$primary: $gray4;
 $accent: $indigo;
-$cta: $red;
+$cta: $blue;
+$danger: $red;
+$track-hover: $gray4;
+$context: $gray4;
 
 // media query mixins
 @mixin phone-only {

src/assets/css/global.scss

@@ -11,7 +11,7 @@
 
 body {
   margin: 0;
-  background-color: #171c28;
+  background-color: #0f1218;
   
   color: #fff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,