move now playing card to left sidebar

- remove title card in featured artists

src/components/AlbumView/Header.vue

@@ -110,7 +110,7 @@ function playAlbum() {
       position: relative;
 
       .stats {
-        background-color: $gray;
+        background-color: $red;
         padding: $small;
         border-radius: $small;
         position: absolute;

src/components/LeftSidebar/AlbumArt.vue

@@ -1,13 +1,22 @@
 <template>
   <div class="l_ rounded" v-if="!props.collapsed">
-    <div
-      class="l-image image rounded"
-      :style="{
-        backgroundImage: `url(&quot;${current.image}&quot;)`,
-      }"
-    ></div>
+    <div class="headin">Now Playing</div>
+    <div class="menu image rounded"></div>
     <div class="separator no-border"></div>
-    <SongCard />
+    <div>
+      <div class="art">
+        <div
+          class="l-image image rounded"
+          :style="{
+            backgroundImage: `url(&quot;${current.image}&quot;)`,
+          }"
+        ></div>
+      </div>
+      <div class="separator no-border"></div>
+      <SongCard />
+      <Progress />
+      <HotKeys />
+    </div>
   </div>
 </template>
 
@@ -15,6 +24,8 @@
 import { ref } from "vue";
 import state from "../../composables/state";
 import SongCard from "./SongCard.vue";
+import HotKeys from "../shared/HotKeys.vue";
+import Progress from "../shared/Progress.vue";
 
 const current = ref(state.current);
 const props = defineProps({
@@ -26,13 +37,52 @@ const props = defineProps({
 </script>
 <style lang="scss">
 .l_ {
-  padding: $small;
+  padding: 1rem;
   background-color: $primary;
   margin: $small;
+  text-align: center;
+  width: 14rem;
+  display: grid;
+  position: relative;
+  text-transform: capitalize;
 
-  .l-image {
-    height: 13rem;
-    width: 13rem;
+  .headin {
+    font-weight: bold;
+    font-size: 0.9rem;
+  }
+
+  .menu {
+    height: 2rem;
+    width: 2rem;
+    right: $small;
+    top: $small;
+    position: absolute;
+    background-image: url("../../assets/icons/right-arrow.svg");
+    background-size: 1.5rem;
+    transform: rotate(90deg);
+
+    &:hover {
+      background-color: $gray2;
+    }
+  }
+
+  br {
+    height: 0rem;
+  }
+
+  .art {
+    width: 100%;
+    display: grid;
+    place-items: center;
+
+    .l-image {
+      height: 12rem;
+      width: 12rem;
+    }
+  }
+
+  .title {
+    font-weight: 900;
   }
 
   .artists {

src/components/PlaylistView/FeaturedArtists.vue

@@ -1,27 +1,32 @@
 <template>
-  <div class="f-artists border">
-    <div class="xcontrols">
-      <div class="prev" @click="scrollLeft"></div>
-      <div class="next" @click="scrollRight"></div>
-    </div>
-    <div class="artists" ref="artists_dom">
-      <div class="xartist c1 image">
-        <div class="blur"></div>
-        <div class="s2"></div>
-        <p>Featured Artists</p>
+  <div class="f-artists">
+    <div class="header">
+      <div class="headin">Featured Artists</div>
+      <div class="xcontrols">
+        <div class="prev" @click="scrollLeft"></div>
+        <div class="next" @click="scrollRight"></div>
       </div>
-      <ArtistCard v-for="artist in artists" :key="artist" :artist="artist"         :color="232452" />
+    </div>
+    <div class="separator no-border"></div>
+    <div class="artists" ref="artists_dom">
+      <ArtistCard
+        v-for="artist in artists"
+        :key="artist"
+        :artist="artist"
+        :color="232452"
+      />
     </div>
   </div>
 </template>
 <script>
 import { ref } from "@vue/reactivity";
 import ArtistCard from "@/components/shared/ArtistCard.vue";
+import { computed, reactive } from "vue";
 
 export default {
   props: ["artists"],
   components: {
-    ArtistCard
+    ArtistCard,
   },
   setup() {
     const artists_dom = ref(null);
@@ -53,12 +58,26 @@ export default {
 
 <style lang="scss">
 .f-artists {
-  position: relative;
-  height: 15em;
+  height: 15.5em;
   width: calc(100%);
   padding: $small;
   border-radius: $small;
   user-select: none;
+  background: linear-gradient(58deg, $gray 0%, rgba(5, 0, 7, 0.5) 100%);
+  position: relative;
+
+  .header {
+    display: flex;
+    height: 2.5rem;
+    align-items: center;
+    position: relative;
+
+    .headin {
+      font-size: 1.5rem;
+      font-weight: 900;
+      display: flex;
+    }
+  }
 }
 
 .f-artists .xcontrols {
@@ -66,8 +85,8 @@ export default {
   width: 5rem;
   height: 2rem;
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
+  top: 0;
+  right: 0;
   display: flex;
   justify-content: space-between;
 
@@ -100,11 +119,7 @@ export default {
   }
 }
 
-.f-artists .artists {
-  position: absolute;
-  bottom: 1em;
-  width: calc(100% - 1em);
-  height: 13em;
+.f-artists > .artists {
   display: flex;
   align-items: flex-end;
   flex-wrap: nowrap;
@@ -116,30 +131,4 @@ export default {
     display: none;
   }
 }
-
-.f-artists .c1 {
-  position: relative;
-  background-size: 400px 11rem;
-  background-position: 100%;
-  width: 8.25rem;
-  background-image: linear-gradient(
-    320deg,
-    #b63939 13%,
-    #232452 50%,
-    #232452 100%
-  );
-
-  transition: all 0.5s ease-in-out;
-
-  &:hover {
-    background-position: 0;
-  }
-
-  p {
-    margin-left: 1rem;
-    font-size: 1.5rem;
-    font-weight: 700;
-    text-shadow: 0 0 80px rgb(0, 0, 0);
-  }
-}
-</style>
+</style>

src/components/PlaylistView/Header.vue

@@ -37,7 +37,7 @@
     bottom: $small;
     right: $small;
     padding: 0.5rem;
-    background-color: rgba(0, 0, 0, 0.699);
+    background-color: $body;
     color: rgb(255, 255, 255);
     font-size: 0.9rem;
     border-radius: $smaller;
@@ -70,7 +70,7 @@
     padding: 1rem 1rem 4rem 1rem;
     box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.658);
     border-radius: .75rem;
-    background-color: $black;
+    background-color: $body;
 
     @include phone-only {
       width: calc(100% - 1rem);

src/components/RightSideBar/Tabs.vue

@@ -23,6 +23,7 @@ const tabs = useTabStore();
 <style lang="scss">
 .tabs {
   padding: $small;
+  height: 4rem;
 
   .cont {
     background-color: $primary;

src/components/nav/NavBar.vue

@@ -5,7 +5,7 @@
         <PlayBtn />
       </div>
       <div class="info">
-        <div class="title">beerbongs & bentleys</div>
+        <div class="title">Alice</div>
       </div>
     </div>
     <div class="center rounded"></div>

src/components/shared/HotKeys.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nav">
+  <div class="hotkeys">
     <div class="image ctrl-btn" id="previous" @click="playPrev"></div>
     <div
       class="image ctrl-btn play-pause"
@@ -21,11 +21,26 @@ const isPlaying = playAudio.playing;
 </script>
 
 <style lang="scss">
-.nav {
+.hotkeys {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   width: 100%;
   gap: $small;
+  height: 3rem;
+  align-items: center;
+  place-content: flex-end;
+
+  .ctrl-btn {
+      height: 2.5rem;
+        width: 100%;
+      background-size: 1.5rem !important;
+      cursor: pointer;
+      border-radius: 0.5rem;
+
+      &:hover {
+        background-color: $red;
+      }
+    }
 
   #previous {
     background-image: url(../../assets/icons/previous.svg);