major redesign: move to rounded and extra spaceous UI

+ fix `play next` bug
+ add new folder banner image
+ add new now playing component
+ move to gray4 for accent color
+ increase image sizes, for clean UI

src/assets/scss/BottomBar/BottomBar.scss

@@ -1,6 +1,5 @@
 .b-bar {
   height: 100%;
-  padding: $small;
 
   .grid {
     background-color: $primary;

src/assets/scss/Global/app-grid.scss

@@ -6,7 +6,7 @@
     "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
-    "l-sidebar content tabs";
+    "l-sidebar content bottombar";
   max-width: 2720px;
   height: calc(100vh - 1rem);
   margin: 0 auto;
@@ -19,7 +19,11 @@
 
   @include tablet-landscape {
     grid-template-columns: min-content 1fr;
-
+    grid-template-areas:
+      "l-sidebar nav"
+      "l-sidebar content"
+      "l-sidebar content"
+      "l-sidebar bottombar";
     .r-sidebar,
     #tabs,
     #gsearch-input {
@@ -32,7 +36,6 @@
   grid-area: content;
   max-width: 1955px;
   overflow: hidden scroll;
-  margin-top: -$small;
 
   .nav {
     margin: $small;
@@ -48,7 +51,6 @@
 
 .r-sidebar {
   grid-area: r-sidebar;
-  margin-top: -$small;
 }
 
 #gsearch-input {
@@ -66,7 +68,6 @@
   padding: 1rem;
 }
 
-.bottom-bar {
-  grid-area: bottom-bar;
-  height: 4rem;
+.b-bar {
+  grid-area: bottombar;
 }

src/assets/scss/Global/basic.scss

@@ -24,9 +24,17 @@
 }
 
 .rounded {
+  border-radius: 1rem;
+}
+
+.rounded-sm {
   border-radius: $small;
 }
 
+.rounded-md {
+  border-radius: $medium;
+}
+
 .circular {
   border-radius: 20px;
 }
@@ -36,7 +44,7 @@
 }
 
 .bg-black {
-  background-color: $black;
+  background-color: $gray4;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
 }
 
@@ -58,8 +66,8 @@ button {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2rem;
-  background-image: linear-gradient(70deg, $gray3, $gray2);
+  height: 2.25rem;
+  background: linear-gradient(70deg, $gray3, $gray2);
 
   &:hover {
     background-image: linear-gradient(70deg, #234ece, $darkblue);

src/assets/scss/Global/variants.scss

@@ -3,7 +3,7 @@
   padding: $smaller;
 }
 
-.pad-small {
+.pad-sm {
   padding: $small;
 }
 

src/assets/scss/ProgressBar.scss

@@ -4,8 +4,8 @@ input[type="range"] {
   width: calc(100% - 2px);
   height: 0.3rem;
   border-radius: 5px;
-  background-size: 0 100%;
-  background: $gray linear-gradient($accent, $accent) no-repeat;
+  background: $gray linear-gradient(90deg, $accent, $accent) no-repeat;
+  background-size: 100% 100%;
 
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
@@ -38,15 +38,15 @@ input[type="range"] {
 
 /* Input Thumb */
 input[type="range"]::-webkit-slider-thumb:hover {
-  background: $pink;
+  background: $accent;
 }
 
 input[type="range"]::-moz-range-thumb:hover {
-  background: $pink;
+  background: $accent;
 }
 
 input[type="range"]::-ms-thumb:hover {
-  background: $pink;
+  background: $accent;
 }
 
 /* Input Track */

src/assets/scss/_variables.scss

@@ -39,7 +39,7 @@ $indigo: #5e5ce6;
 $teal: rgb(64, 200, 224);
 
 $primary: $gray4;
-$accent: $red;
+$accent: $gray1;
 $secondary: $gray5;
 $cta: $blue;
 $danger: $red;
@@ -48,7 +48,7 @@ $context: $gray;
 
 // SVG COLORS
 $default: $accent;
-$track-btn-svg: $red;
+$track-btn-svg: $accent;
 $side-nav-svg: $red;