more refactors

src/components/AlbumView/Header.vue

@@ -11,7 +11,7 @@
         <div class="separator no-border"></div>
         <div class="bottom">
           <div class="stats">
-            {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
+            {{ album_info.count }} Tracks • {{ album_info.duration }} • {{album_info.date}}
           </div>
           <div class="play rounded" @click="playAlbum">
             <div class="icon"></div>
@@ -58,7 +58,7 @@ export default {
   overflow: hidden;
   display: flex;
   align-items: center;
-  padding: 1rem;
+  padding: $small;
   height: 100%;
   background-image: url("../../assets/images/abg.webp");
   background-position: 0% 60%;
@@ -74,7 +74,7 @@ export default {
 
     .top {
       .h {
-        color: rgba(255, 255, 255, 0.795);
+        color: #ffffffcb;
       }
       .title {
         font-size: 2rem;
@@ -94,9 +94,16 @@ export default {
     }
 
     .bottom {
+      position: relative;
+
       .stats {
+        background-color: #1f1f1f8e;
+        padding: $small;
+        border-radius: $small;
+        position: absolute;
+        right: 0;
+        bottom: 0;
         font-weight: bold;
-        display: none;
       }
 
       .play {
@@ -106,7 +113,6 @@ export default {
         align-items: center;
         background: $highlight-blue;
         padding: $small;
-        margin: $small 0;
         cursor: pointer;
 
         .icon {

src/components/BottomBar/BottomBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar border">
+  <div class="b-bar">
     <div class="grid">
       <SongCard :collapsed="props.collapsed" />
       <div class="controlsx rounded">

src/components/FolderView/Header.vue

@@ -15,7 +15,7 @@
     <div class="search">
       <input
         type="text"
-        class="search-input"
+        class="search-input border"
         placeholder="Search this folder"
         v-model="query"
       />
@@ -68,11 +68,10 @@ export default {
   .search-input {
     max-width: 20rem;
     width: 100%;
-    border: 1px solid $separator;
     border-radius: 0.5rem;
     padding-left: 1rem;
-    background-color: #46454500;
-    color: #fff;
+    background-color: transparent;
+    color: $white;
     font-size: 1rem;
     line-height: 2.2rem;
     outline: none;

src/components/RightSideBar/Main.vue

@@ -13,7 +13,7 @@
           <UpNext />
         </div>
       </div>
-      <div class="tab-keys border">
+      <div class="tab-keys">
         <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
       </div>
     </div>
@@ -100,9 +100,9 @@ function changeTab(tab) {
       height: 100%;
       position: absolute;
       grid-area: tabs;
-      // padding: $small 0;
       border-radius: 0;
       overflow: hidden;
+      border-left: solid 1px $gray;
     }
   }
 }

src/components/shared/Progress.vue

@@ -1,11 +1,11 @@
 <template>
   <input
-    class="progress-bar"
     id="progress"
     type="range"
     :value="pos"
     min="0"
-    max="1000"
+    max="100"
+    step="0.1"
     @change="seek()"
   />
 </template>