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/components/nav/NavBar.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="topnav">
     <div class="left">
-      <div class="btn">
-        <NavButtons />
-      </div>
-
+      <NavButtons />
       <div class="info">
         <APTitle v-show="showAPTitle" />
         <Playlists v-show="$route.name == Routes.playlists" />
@@ -15,16 +12,12 @@
     <div class="center rounded">
       <Loader />
     </div>
-    <!-- <div class="right">
-      <Search />
-    </div> -->
   </div>
 </template>
 
 <script setup lang="ts">
 import NavButtons from "./NavButtons.vue";
 import Loader from "../shared/Loader.vue";
-// import Search from "./Search.vue";
 import { useRoute } from "vue-router";
 import { ref, watch } from "vue";
 import { Routes } from "@/composables/enums";
@@ -82,13 +75,11 @@ watch(
   display: grid;
   grid-template-columns: 1fr min-content;
   width: 100%;
-  gap: 1rem;
-  overflow: hidden;
 
   .left {
     display: grid;
     grid-template-columns: max-content 1fr;
-    overflow: hidden;
+    gap: 1rem;
 
     .info {
       overflow: hidden;
@@ -106,11 +97,5 @@ watch(
     place-items: center;
     margin-right: 1rem;
   }
-
-  .right {
-    width: 100%;
-    display: flex;
-    gap: $small;
-  }
 }
 </style>

src/components/nav/NavButtons.vue

@@ -1,40 +1,41 @@
 <template>
-  <div id="back-forward">
-    <div class="back image" @click="$router.back()"></div>
-    <div class="forward image" @click="$router.forward()"></div>
+  <div id="back-forward" class="">
+    <button class="back" @click="$router.back()">
+      <ArrowSvg />
+    </button>
+    <button class="forward" @click="$router.forward()">
+      <ArrowSvg />
+    </button>
   </div>
 </template>
 
+<script setup lang="ts">
+import ArrowSvg from "../../assets/icons/right-arrow.svg";
+</script>
+
 <style lang="scss">
 #back-forward {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
-  padding-right: 1rem;
-  margin-right: $small;
+  padding-right: 1.25rem;
   border-right: 1px solid $gray3;
+  width: 100%;
 
-  & > div {
-    background-color: $gray4;
-    border-radius: $small;
-    height: 2.25rem;
-    width: 2.25rem;
-    cursor: pointer;
-    background-size: 2rem;
-    transition: all .25s ease-in-out;
+  & > * {
+    background-color: $gray3;
+    padding: $small;
+    height: 100%;
+    aspect-ratio: 1;
+    border-radius: $medium;
 
-    &:hover {
-      background-color: $accent;
+    svg {
+      margin: auto;
     }
   }
 
   .back {
-    background-image: url("../../assets/icons/right-arrow.svg");
     transform: rotate(180deg);
   }
-
-  .forward {
-    background-image: url("../../assets/icons/right-arrow.svg");
-  }
 }
 </style>

src/components/nav/Titles/APTitle.vue

@@ -47,5 +47,7 @@ const things = computed(() => {
   display: flex;
   align-items: center;
   gap: $small;
+  outline: solid 1px $gray3;
+  height: 100%;
 }
 </style>