🔷 some refactors

src/components/AlbumView/Header.vue

@@ -1,25 +1,24 @@
 <template>
   <div class="album-h">
     <div class="a-header rounded">
-      <div
-        class="image art shadow-lg rounded"
-        :style="{
-          backgroundImage: `url(&quot;${props.album.image}&quot;)`,
-        }"
-      ></div>
+      <div class="art">
+        <div
+          class="image shadow-lg"
+          :style="{
+            backgroundImage: `url(&quot;${props.album.image}&quot;)`,
+          }"
+        ></div>
+      </div>
       <div class="info">
         <div class="top">
           <div class="h">Album</div>
-          <div class="separator no-border"></div>
-          <div class="title">{{ props.album.album }}</div>
-          <div class="artist">{{ props.album.artist }}</div>
+          <div class="title ellip">{{ props.album.album }}</div>
         </div>
-        <div class="separator no-border"></div>
         <div class="bottom">
-          <div class="stats shadow-sm">
+          <div class="stats">
             {{ props.album.count }} Tracks •
             {{ perks.formatSeconds(props.album.duration, "long") }} •
-            {{ props.album.date }}
+            {{ props.album.date }} • {{ props.album.artist }}
           </div>
           <PlayBtnRect :source="playSources.album" />
         </div>
@@ -40,56 +39,51 @@ const props = defineProps<{
 
 <style lang="scss">
 .album-h {
-  height: 14rem;
+  height: 16rem;
 }
 
 .a-header {
-  position: relative;
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 13rem 1fr;
   padding: 1rem;
   height: 100%;
   background-color: $gray4;
-  background-image: linear-gradient(
-    to bottom,
-    $gray3 0%,
-    $gray3 25%,
-    $gray3 35%,
-    $gray4 50%,
-    $gray 75%,
-    $black 100%
-  );
+  background-image: linear-gradient(37deg, $black 20%, $gray5, $black 90%);
 
   .art {
-    position: absolute;
-    width: 12rem;
-    height: 12rem;
+    width: 100%;
+    height: 100%;
     left: 1rem;
+    display: flex;
+    align-items: flex-end;
+
+    .image {
+      width: 12rem;
+      height: 12rem;
+    }
   }
 
   .info {
     width: 100%;
-    height: calc(100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    margin-left: 13rem;
 
     .top {
       .h {
         color: #ffffffcb;
       }
+
       .title {
-        font-size: 2rem;
+        font-size: 2.5rem;
         font-weight: 1000;
         color: white;
         text-transform: capitalize;
       }
 
       .artist {
-        margin-top: $small;
-        font-size: 1.5rem;
-        color: #fffffff1;
+        font-size: 1.15rem;
+        color: #ffffffe0;
       }
     }
 
@@ -98,16 +92,13 @@ const props = defineProps<{
     }
 
     .bottom {
-      position: relative;
+      margin-top: $smaller;
 
       .stats {
-        background-color: $red;
-        padding: $small;
         border-radius: $small;
-        position: absolute;
-        right: 0;
-        bottom: 0;
         font-weight: bold;
+        font-size: 0.8rem;
+        margin-bottom: 0.75rem;
       }
 
       .play {

src/components/FolderView/SongList.vue

@@ -84,6 +84,9 @@ function updateQueue(track: Track) {
   overflow-y: auto;
 
   .current {
+    a {
+      color: inherit;
+    }
     color: $red;
   }
 

src/components/RightSideBar/Queue.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <PlayingFrom :from="queue.from" />
       <UpNext :next="queue.next" :playNext="queue.playNext" />
       <div class="scrollable-r border rounded">
         <TrackItem
@@ -13,6 +12,7 @@
           :isPlaying="queue.playing"
         />
       </div>
+      <PlayingFrom :from="queue.from" />
     </div>
   </div>
 </template>
@@ -33,7 +33,7 @@ function playThis(track: Track) {
 
 <style lang="scss">
 .up-next {
-  padding: $small $small $small 0;
+  padding: $small $small 0 0;
   overflow: hidden;
   height: 100%;
 
@@ -46,13 +46,13 @@ function playThis(track: Track) {
     position: relative;
     height: 100%;
     display: grid;
-    grid-template-rows: max-content max-content 1fr;
+    grid-template-rows: max-content 1fr max-content;
+    gap: $small;
 
     .scrollable-r {
       height: 100%;
       padding: $small;
       overflow: auto;
-      // background-color: $card-dark;
       scrollbar-color: grey transparent;
     }
   }

src/components/RightSideBar/queue/playingFrom.vue

@@ -103,7 +103,6 @@ function goTo() {
   background: linear-gradient(-200deg, $gray4 40%, $red, $gray4);
   background-size: 120%;
   padding: 0.75rem;
-  margin-bottom: $small;
   cursor: pointer;
   position: relative;
   transition: all .2s ease;
@@ -115,7 +114,7 @@ function goTo() {
   .abs {
     position: absolute;
     right: $small;
-    top: $small;
+    bottom: $small;
     font-size: .9rem;
     background-color: $gray;
     padding: $smaller;

src/components/RightSideBar/queue/upNext.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main-item border" @click="playNext">
-    <div class="h">#Up_Next</div>
+    <div class="h">Up Next</div>
     <div class="itemx  shadow">
       <div
         class="album-art image"
@@ -34,7 +34,6 @@ const props = defineProps<{
 <style lang="scss">
 .main-item {
   border-radius: 0.5rem;
-  margin-bottom: 0.5rem;
   position: relative;
 
   &:hover {
@@ -49,7 +48,7 @@ const props = defineProps<{
   .h {
     position: absolute;
     right: $small;
-    top: $small;
+    bottom: $small;
     font-size: 0.9rem;
     background-color: $accent;
     padding: $smaller;