smoothen button icon interactions

src/components/nav/NavButtons.vue

@@ -18,19 +18,27 @@ import ArrowSvg from "../../assets/icons/right-arrow.svg";
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
-  padding-right: 1.25rem;
+  padding-right: 1rem;
   border-right: 1px solid $gray3;
-  width: max-content;
   height: 100%;
 
   & > * {
     width: 2.25rem;
-    background-color: $gray3;
     aspect-ratio: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0;
+    border-radius: 0.65rem;
+
+    svg {
+      transform: scale(1.25);
+      transition: all .2s;
+
+      &:active {
+        transform: scale(1);
+      }
+    }
   }
 
   .back {

src/components/nav/Titles/QueueTitle.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="nav-queue-title">
     <div class="first noscroll">
-      <router-link :to="(getSourceUrlParams())">
+      <router-link :to="(location as RouteLocationRaw)">
         <button>Go to source</button>
       </router-link>
       <div class="playing-from">
         <div class="border rounded-sm pad-sm">
-          <b class="ellip">{{ getSourceName() }}</b>
+          <source-icon />
+          <b class="ellip">{{ name }}</b>
         </div>
       </div>
     </div>
@@ -18,67 +19,74 @@
 import QueueActions from "@/components/RightSideBar/Queue/QueueActions.vue";
 import { FromOptions, Routes } from "@/composables/enums";
 import useQueueStore from "@/stores/queue";
-import { RouteLocationRaw, RouteRecordRaw } from "vue-router";
+
+import FolderSvg from "@/assets/icons/folder.svg";
+import SearchSvg from "@/assets/icons/search.svg";
+import AlbumSvg from "@/assets/icons/album.svg";
+import PlaylistSvg from "@/assets/icons/playlist.svg";
+
+import { RouteLocationRaw } from "vue-router";
 
 const queue = useQueueStore();
 
 const { from: source } = queue;
 
-function getSourceName(): RouteLocationRaw {
-  switch (source.type) {
-    case FromOptions.album:
-      return source.name;
-
-    case FromOptions.folder:
-      return source.name;
-
-    case FromOptions.playlist:
-      return source.name;
-
-    case FromOptions.search:
-      return `Search for: "${source.query}"`;
-
-    default:
-      return "Ghost source";
-  }
-}
-
-function getSourceUrlParams() {
+function getSource() {
   switch (source.type) {
     case FromOptions.album:
       return {
-        name: Routes.album,
-        params: {
-          hash: source.hash,
+        name: source.name,
+        icon: AlbumSvg,
+        location: {
+          name: Routes.album,
+          params: {
+            hash: source.hash,
+          },
         },
       };
+
     case FromOptions.folder:
       return {
-        name: Routes.folder,
-        params: {
-          path: source.path,
+        name: source.name,
+        icon: FolderSvg,
+        location: {
+          name: Routes.folder,
+          params: {
+            path: source.path,
+          },
         },
       };
+
     case FromOptions.playlist:
       return {
-        name: Routes.playlist,
-        params: {
-          pid: source.playlistid,
+        name: source.name,
+        icon: PlaylistSvg,
+        location: {
+          name: Routes.playlist,
+          params: {
+            pid: source.playlistid,
+          },
         },
       };
+
     case FromOptions.search:
       return {
-        name: Routes.search,
-        params: {
-          query: source.query,
+        name: `Search for: "${source.query}"`,
+        icon: SearchSvg,
+        location: {
+          name: Routes.search,
+          params: {
+            query: source.query,
+          },
         },
       };
 
     default:
-      return "/";
+      return { name: "Ghost source" };
   }
 }
 
+const { name, icon: SourceIcon, location } = getSource();
 </script>
 
 <style lang="scss">
@@ -99,6 +107,17 @@ function getSourceUrlParams() {
       align-items: center;
       gap: $small;
       opacity: 0.75;
+
+      .border {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        align-items: center;
+        padding: $smaller $small;
+      }
+
+      svg {
+        transform: scale(0.9);
+      }
     }
 
     button {

src/components/shared/PlayBtn.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="play-btn rounded-md"
+    class="play-btn"
     @click="usePlayFrom(source, useQStore, store)"
   >
     <PlaySvg />
@@ -26,5 +26,6 @@ defineProps<{
 .play-btn {
   aspect-ratio: 1;
   padding: 0;
+  border-radius: 0.65rem;
 }
 </style>