redesign bottom bar

src/components/LeftSidebar/NP/HotKeys.vue

@@ -1,59 +1,50 @@
 <template>
-  
   <div class="hotkeys rounded-sm noscroll">
-    <div class="image ctrl-btn" id="previous" @click="q.playPrev"></div>
-    <div
-      class="image ctrl-btn play-pause"
-      @click="q.playPause"
-      :class="{ isPlaying: q.playing }"
-    ></div>
-    <div class="image ctrl-btn" id="next" @click="q.playNext"></div>
+    <button @click.prevent="q.playPrev">
+      <PrevSvg />
+    </button>
+    <button @click.prevent="q.playPause">
+      <PauseSvg v-if="q.playing" />
+      <PlaySvg v-else />
+    </button>
+    <button @click.prevent="q.playNext">
+      <NextSvg />
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
 import useQStore from "@/stores/queue";
 
+import NextSvg from "../../../assets/icons/next.svg";
+import PrevSvg from "../../../assets/icons/next.svg";
+import PauseSvg from "../../../assets/icons/pause.svg";
+import PlaySvg from "../../../assets/icons/play.svg";
+
 const q = useQStore();
 </script>
 
 <style lang="scss">
-
 .hotkeys {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: $small;
-  height: 2.5rem;
-  align-items: center;
-  justify-content: center;
-  place-content: flex-end;
+  grid-template-columns: repeat(3, 2rem);
+  gap: 1rem;
   width: 100%;
-  background-color: $gray2;
 
-  .ctrl-btn {
-    height: 2.5rem;
-    width: 100%;
-    background-size: 1.5rem !important;
+  button {
+    height: 2rem;
+    padding: 0;
+    background: none;
 
     &:hover {
-      background-color: $darkestblue;
+      background: $darkestblue;
     }
   }
 
-  #previous {
-    background-image: url(../../../assets/icons/previous.svg);
-  }
-
-  .play-pause {
-    background-image: url(../../../assets/icons/play.svg);
-  }
-
-  .isPlaying {
-    background-image: url(../../../assets/icons/pause.svg);
-  }
-
-  #next {
-    background-image: url(../../../assets/icons/next.svg);
+  button:first-child {
+    svg {
+      transform: rotate(180deg);
+    }
   }
 }
 </style>