redesign bottom bar

src/assets/scss/ProgressBar.scss

@@ -4,7 +4,7 @@ input[type="range"] {
   width: calc(100% - 2px);
   height: 0.3rem;
   border-radius: 5px;
-  background: $gray linear-gradient(90deg, $accent, $accent) no-repeat;
+  background: $gray4 linear-gradient(90deg, $accent, $darkestblue) no-repeat;
   background-size: 100% 100%;
 
   &::-webkit-slider-thumb {
@@ -13,7 +13,7 @@ input[type="range"] {
     height: 0;
     width: 0.8rem;
     border-radius: 50%;
-    background: $accent;
+    background: $darkestblue;
   }
 
   &::-moz-range-thumb {
@@ -21,7 +21,7 @@ input[type="range"] {
 
     height: 0;
     border-radius: 50%;
-    background: $accent;
+    background: $darkestblue;
     border: none;
   }
 
@@ -31,7 +31,7 @@ input[type="range"] {
     height: 0;
     width: 0.8rem;
     border-radius: 50%;
-    background: $accent;
+    background: $darkestblue;
     border: none;
   }
 }

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>
+    <button @click.prevent="q.playPrev">
-    <div
+      <PrevSvg />
-      class="image ctrl-btn play-pause"
+    </button>
-      @click="q.playPause"
+    <button @click.prevent="q.playPause">
-      :class="{ isPlaying: q.playing }"
+      <PauseSvg v-if="q.playing" />
-    ></div>
+      <PlaySvg v-else />
-    <div class="image ctrl-btn" id="next" @click="q.playNext"></div>
+    </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);
+  grid-template-columns: repeat(3, 2rem);
-  gap: $small;
+  gap: 1rem;
-  height: 2.5rem;
-  align-items: center;
-  justify-content: center;
-  place-content: flex-end;
   width: 100%;
-  background-color: $gray2;
 
-  .ctrl-btn {
+  button {
-    height: 2.5rem;
+    height: 2rem;
-    width: 100%;
+    padding: 0;
-    background-size: 1.5rem !important;
+    background: none;
 
     &:hover {
-      background-color: $darkestblue;
+      background: $darkestblue;
     }
   }
 
-  #previous {
+  button:first-child {
-    background-image: url(../../../assets/icons/previous.svg);
+    svg {
-  }
+      transform: rotate(180deg);
-
+    }
-  .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);
   }
 }
 </style>

src/components/RightSideBar/NowPlayingRight.vue

@@ -2,21 +2,25 @@
   <div class="b-bar">
     <div class="centered">
       <div class="inner">
-        <RouterLink
+        <div class="with-icons rounded-sm border">
-          title="go to album"
+          <!-- <button><PlusSvg /></button> -->
-          :to="{
+          <RouterLink
-            name: Routes.album,
+            title="go to album"
-            params: {
+            :to="{
-              hash: queue.currenttrack.albumhash,
+              name: Routes.album,
-            },
+              params: {
-          }"
+                hash: queue.currenttrack.albumhash,
-        >
+              },
-          <img
+            }"
-            class="rounded-sm"
+          >
-            :src="paths.images.thumb.small + queue.currenttrack.image"
+            <img
-            alt=""
+              class="rounded-sm"
-          />
+              :src="paths.images.thumb.small + queue.currenttrack.image"
-        </RouterLink>
+              alt=""
+            />
+          </RouterLink>
+          <button><HeartSvg /></button>
+        </div>
 
         <div class="info">
           <div class="with-title">
@@ -48,7 +52,7 @@
 
           <Progress />
         </div>
-        <div class="buttons">
+        <div class="buttons rounded-sm border">
           <HotKeys />
         </div>
       </div>
@@ -69,6 +73,9 @@ import ArtistName from "../shared/ArtistName.vue";
 import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
 import Progress from "../LeftSidebar/NP/Progress.vue";
 
+import HeartSvg from "../../assets/icons/heart.svg";
+import PlusSvg from "../../assets/icons/plus.svg";
+
 const queue = useQStore();
 const settings = useSettingsStore();
 </script>
@@ -86,6 +93,9 @@ const settings = useSettingsStore();
     width: 50rem;
     display: grid;
     align-items: center;
+    width: max-content;
+    padding: $small $medium;
+    margin: 0 auto;
 
     .inner {
       display: grid;
@@ -95,10 +105,26 @@ const settings = useSettingsStore();
       align-items: center;
     }
 
-    // background-color: $gray5;
+    .with-icons {
-    width: max-content;
+      background-color: rgba(255, 255, 255, 0.048);
-    padding: $small $medium;
+      display: grid;
-    margin: 0 auto;
+      gap: $small;
+      grid-template-columns: repeat(3, max-content);
+      align-items: center;
+      padding: 0 5px;
+      margin-top: -$smaller;
+
+      button {
+        height: 2rem;
+        width: 2rem;
+        background: transparent;
+        padding: 0;
+
+        &:last-child:hover {
+          background: $red;
+        }
+      }
+    }
 
     img {
       height: 2.75rem;
@@ -106,6 +132,7 @@ const settings = useSettingsStore();
       aspect-ratio: 1;
       object-fit: cover;
       cursor: pointer;
+      margin-top: $smaller;
     }
 
     .info {
@@ -154,9 +181,20 @@ const settings = useSettingsStore();
     }
 
     .buttons {
-      width: 9rem;
+      // width: 10rem;
+      height: 3.25rem;
+      margin-top: -$smaller;
+      background-color: rgba(255, 255, 255, 0.048);
+      display: grid;
+      place-items: center;
+      padding: 0 $small;
     }
   }
+
+  .right {
+    display: grid;
+    place-content: end;
+  }
   // width: 100%;
 
   // .time {

src/components/RightSideBar/Queue/upNext.vue

@@ -1,20 +1,14 @@
 <template>
-  <div
+  <div class="bottom-left">
-    class="next-track bg-primary rounded"
+    <div class="upNext rounded-sm border" title="play next song">
-    :class="{ contexton: context_on }"
+      <img
-    @click="playNext"
+        :src="paths.images.thumb.small + queue.next?.image"
-    @contextmenu.prevent="showMenu"
+        class="rounded-sm"
-  >
+      />
-    <div class="nextup abs">next up</div>
+      <div class="text">
-    <img :src="paths.images.thumb + track?.image" class="rounded-sm" />
+        <div class="title"><b>Stiff necked fools</b></div>
-    <div class="tags">
+        <div class="from">Next up</div>
-      <div class="title ellip">{{ track?.title || "Don't click here" }}</div>
-      <div class="artist ellip" v-if="track">
-        <span v-for="artist in putCommas(track.artist)" :key="artist">{{
-          artist
-        }}</span>
       </div>
-      <span v-else class="artist">nothing will happen</span>
     </div>
   </div>
 </template>
@@ -23,67 +17,51 @@
 import { paths } from "@/config";
 import { Track } from "@/interfaces";
 import { putCommas } from "@/utils";
+import useQueueStore from "@/stores/queue";
 
 import { showTrackContextMenu as showContext } from "@/composables/context";
 import { ref } from "vue";
 
-const props = defineProps<{
-  track: Track | null;
-  playNext: () => void;
-}>();
-
 const context_on = ref(false);
-
+const queue = useQueueStore();
-function showMenu(e: Event) {
-  if (props.track) {
-    showContext(e, props.track, context_on);
-  }
-}
 </script>
 
 <style lang="scss">
-.next-track {
+.bottom-left {
-  position: relative;
+  overflow: hidden;
-
   display: grid;
-  grid-template-columns: max-content 1fr;
+  padding-top: 2px;
-  gap: 1rem;
+  // place-content: end;
-  padding: 1rem;
-  width: 100%;
 
-  &:hover {
+  .upNext {
-    background-color: $gray4;
-
-    .h {
-      background-color: $black;
-    }
-  }
-
-  .nextup {
-    right: $small;
-    top: 0;
-    font-size: 0.8rem;
     padding: $smaller;
-    border-radius: 0.25rem;
+    grid-template-columns: max-content 1fr;
-    font-style: oblique;
-    opacity: 0.5;
-  }
-
-  img {
-    width: 4.5rem;
-    aspect-ratio: 1;
-    object-fit: contain;
-  }
-
-  .tags {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
     gap: $small;
+    display: grid;
+    width: 20rem;
+    background-color: rgba(255, 255, 255, 0.048);
+    cursor: pointer;
 
-    .artist {
+    &:hover {
+      transition: all 0.25s ease;
+      background-color: $gray4;
+    }
+
+    img {
+      height: 2.75rem;
+    }
+
+    .text {
       font-size: small;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+
+      .from {
+        opacity: 0.75;
+        font-size: $medium;
+        margin-top: $smaller;
+      }
     }
   }
 }