add recommended tracks

src/components/FolderView/FolderList.vue

@@ -25,36 +25,36 @@ export default {
 
 <style>
 .f-container {
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
   background: rgba(31, 30, 30, 0.521);
-  padding: 1em;
+  padding: 1rem;
 }
 
 #f-items {
   display: flex;
   flex-wrap: wrap;
   border-top: 1px solid var(--seperator);
-  gap: 1em;
-  padding-top: 1em;
+  gap: 1rem;
+  padding-top: 1rem;
 }
 
 .f-container p {
   text-transform: uppercase;
   font-weight: normal;
   color: rgba(255, 255, 255, 0.438);
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
 }
 
 .f-container .f-item {
-  min-width: 15em;
-  min-height: 5em;
+  min-width: 14.4rem;
+  min-height: 5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   background-image: url(../../assets/icons/folder.svg);
   background-repeat: no-repeat;
-  background-position: 1em;
+  background-position: 1rem;
   background-size: 10% 100%;
   background-color: rgba(80, 80, 80, 0.247);
 }
@@ -65,7 +65,7 @@ export default {
 
 .f-container .f-item-text {
   position: absolute;
-  left: 3em;
+  left: 3rem;
   text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/FolderView/SearchBox.vue

@@ -17,8 +17,8 @@ export default {};
 
 <style>
 .folder-top {
-  padding-bottom: 1em;
-  margin-bottom: 1em;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
   border-bottom: 1px solid var(--seperator);
 }
 
@@ -27,12 +27,12 @@ export default {};
   color: rgba(255, 255, 255, 0.438);
   text-transform: uppercase;
   display: flex;
-  align-items: center;
+  align-itrems: center;
 }
 
 .folder-top .fsearch {
   width: 50%;
-  margin-right: 1em;
+  margin-right: 1rem;
 }
 
 .folder-top .fsearch div {
@@ -42,14 +42,14 @@ export default {};
 }
 
 .folder-top .fsearch input {
-  width: 30em;
+  width: 30rem;
   border: none;
-  border-radius: .5em;
-  padding-left: 1em;
+  border-radius: .5rem;
+  padding-left: 1rem;
   background-color: #4645456c;
   color: rgba(255, 255, 255, 0.521);
-  font-size: 1em;
-  line-height: 3em;
+  font-size: 1rem;
+  line-height: 3rem;
   outline: none;
 }
 
@@ -63,6 +63,6 @@ export default {};
 
 .folder-top .fsearch input:focus {
   color: rgb(255, 255, 255);
-  outline: 0.1em solid #fafafa52;
+  outline: 0.1rem solid #fafafa52;
 }
 </style>

src/components/FolderView/SongList.vue

@@ -87,22 +87,22 @@ export default {
 }
 
 .folder .table table td .album-art {
-  width: 3em;
-  height: 3em;
-  margin-right: 1em;
+  width: 3rem;
+  height: 3rem;
+  margin-right: 1rem;
   background-color: #ccc;
   background-image: url(../../assets/images/Jim_Reeves.png);
 }
 
 .folder .table .flex {
   position: relative;
-  align-items: center;
+  align-itrems: center;
 }
 
 .folder .table .flex > div > span {
   position: absolute;
-  bottom: 1.5em;
-  width: calc(100% - 6em);
+  bottom: 1.5rem;
+  width: calc(100% - 6rem);
 }
 
 td,
@@ -124,12 +124,12 @@ th {
 }
 
 .folder {
-  padding-bottom: 1em;
+  padding-bottom: 1rem;
 }
 
 td .artist {
   color: #b1b1b1fd;
   font-weight: lighter;
-  margin-right: 0.5em;
+  margin-right: 0.5rem;
 }
 </style>

src/components/LeftSidebar/Navigation.vue

@@ -104,7 +104,7 @@ export default {
 .side-nav-container .nav-button .nav-icon {
   height: 24px;
   width: 24px;
-  margin-right: 0.5em;
+  margin-right: 0.5rem;
   margin-left: 10px;
 }
 

src/components/RightSideBar/NowPlaying.vue

@@ -22,10 +22,10 @@ export default {};
 
 <style>
 .now-playing {
-  height: 5em;
-  border-radius: 0.5em;
-  margin-top: 1em;
-  padding: 0.5em;
+  height: 5rem;
+  border-radius: 0.5rem;
+  margin-top: 1rem;
+  padding: 0.5rem;
   background-color: #131313b2;
 
   display: grid;
@@ -38,21 +38,21 @@ export default {};
 }
 
 .now-playing .art-tags .album-art {
-  width: 4.5em;
-  height: 4.5em;
-  border-radius: 0.5em;
-  margin-right: 0.5em;
+  width: 4.5rem;
+  height: 4.5rem;
+  border-radius: 0.5rem;
+  margin-right: 0.5rem;
   background-color: #ad1717a8;
   background-image: url(../../assets/images/tk.jpg);
 }
 
 .now-playing .art-tags hr {
   border: none;
-  margin: 0.3em;
+  margin: 0.3rem;
 }
 .now-playing .art-tags #title {
   margin: 0;
-  width: 14em;
+  width: 14rem;
   color: #fff;
 }
 
@@ -69,11 +69,11 @@ export default {};
 }
 
 .now-playing .controls * {
-  height: 3em;
-  width: 3em;
+  height: 3rem;
+  width: 3rem;
   background-size: 50%;
   cursor: pointer;
-  border-radius: 0.5em;
+  border-radius: 0.5rem;
 }
 
 .now-playing .controls *:hover {

src/components/RightSideBar/Recommendation.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="r-tracks rounded">
+    <p class="heading">RECOMMENDED TRACKS</p>
+    <div class="tracks">
+      <div class="song-item" v-for="song in songs" :key="song">
+        <div class="album-art image"></div>
+        <div class="tags">
+          <p class="title">{{ song.title }}</p>
+          <hr />
+          <p class="artist">{{ song.artist }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+    const songs = [
+      {
+        title: "Mockingbird",
+        artist: "Eminem",
+      },
+      {
+        title: "Slim shady",
+        artist: "Eminem"
+      }
+    ];
+
+    return { songs };
+  },
+};
+</script>
+
+<style>
+.r-tracks {
+  margin-top: .5rem;
+  background-color: #131313b2;
+  padding: .5rem;
+
+}
+
+.r-tracks .tracks .song-item {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}
+
+.r-tracks .tracks .song-item:hover {
+  background-color: #3a39393d;
+  cursor: pointer;
+}
+
+.r-tracks .tracks .song-item hr {
+  border: none;
+  margin: 0.1rem;
+}
+
+.r-tracks .tracks .song-item .album-art {
+  width: 3rem;
+  height: 3rem;
+  background-color: #ccc;
+  margin: 0 0.5rem 0 0;
+  border-radius: 0.5rem;
+  background-image: url(../../assets/images/Jim_Reeves.png);
+}
+
+.r-tracks .tracks .song-item .artist {
+  font-size: small;
+  color: rgba(255, 255, 255, 0.637);
+  margin: 0;
+}
+
+.r-tracks .tracks .song-item .title {
+  margin: 0;
+}
+</style>

src/components/RightSideBar/Search.vue

@@ -86,15 +86,15 @@ export default {
 <style>
 .right-search {
   position: relative;
-  border-radius: 1em;
-  margin: 0.5em 0 0 0;
-  padding: 0.75em;
+  border-radius: 1rem;
+  margin: 0.5rem 0 0 0;
+  padding: 0.75rem;
   background-color: #131313b2;
   overflow: hidden;
 }
 
 .right-search .scrollable {
-  height: 26em;
+  height: 26rem;
   overflow-y: scroll;
   scroll-behavior: smooth;
 }
@@ -106,61 +106,61 @@ export default {
 .right-search .heading {
   font-size: small;
   position: relative;
-  padding: 1em;
+  padding: 1rem;
   display: flex;
   align-items: center;
 }
 
 .right-search .heading .more {
   position: absolute;
-  right: 1em;
-  padding: 0.5em;
+  right: 1rem;
+  padding: 0.5rem;
   user-select: none;
 
 }
 
 .right-search .heading .more:hover {
   background: rgb(62, 69, 77);
-  border-radius: 0.5em;
+  border-radius: 0.5rem;
   cursor: pointer;
 }
 .right-search input {
   width: 100%;
   border: none;
-  border-radius: .5em;
-  padding-left: 1em;
+  border-radius: .5rem;
+  padding-left: 1rem;
   background-color: #4645456c;
   color: rgba(255, 255, 255, 0.479);
-  font-size: 1em;
-  line-height: 3em;
+  font-size: 1rem;
+  line-height: 3rem;
   outline: none;
 }
 .right-search input:focus {
   color: rgb(255, 255, 255);
-  outline: 0.1em solid #fafafa52;
+  outline: 0.1rem solid #fafafa52;
 }
 
 .right-search input::-webkit-search-cancel-button {
   position: relative;
-  right: 1em;
+  right: 1rem;
   cursor: pointer;
 }
 
 /*  */
 
 .right-search .tracks-results {
-  border-radius: 0.5em;
+  border-radius: 0.5rem;
   overflow: hidden;
 }
 
 .right-search .tracks-results .heading {
-  padding: 0.5em;
+  padding: 0.5rem;
 }
 
 .right-search .tracks-results .result-item {
   display: flex;
   align-items: center;
-  height: 4.5em;
+  height: 4.5rem;
   background-color: rgba(20, 20, 20, 0.733);
 }
 
@@ -168,16 +168,16 @@ export default {
   background-color: rgba(27, 26, 27, 0.589);
 }
 .right-search .tracks-results .result-item .album-art {
-  width: 4em;
-  height: 4em;
+  width: 4rem;
+  height: 4rem;
   background-color: rgb(27, 150, 74);
-  border-radius: 0.5em;
-  margin: 0 0.5em 0 0.25em;
+  border-radius: 0.5rem;
+  margin: 0 0.5rem 0 0.25rem;
   background-image: url(../../assets/images/thriller.jpg);
 }
 
 .right-search hr {
-  margin: 0.1em;
+  margin: 0.1rem;
   border: none;
 }
 
@@ -188,9 +188,9 @@ export default {
 /*  */
 
 .right-search .albums-results {
-  border-radius: 0.5em;
+  border-radius: 0.5rem;
   background-color: rgba(8, 3, 1, 0.274);
-  margin-top: 1em;
+  margin-top: 1rem;
 }
 
 .right-search .albums-results .grid {
@@ -205,24 +205,24 @@ export default {
 }
 
 .right-search .albums-results .result-item .album-art {
-  height: 7em;
-  width: 7em;
+  height: 7rem;
+  width: 7rem;
   background-color: rgba(26, 26, 26, 0.452);
-  border-radius: 0.5em;
-  margin-bottom: 0.5em;
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
   background-image: url(../../assets/images/thriller.jpg);
 }
 
 .right-search .albums-results .result-item .title {
-  width: 7em;
+  width: 7rem;
   text-align: center;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.5rem;
 }
 
 /*  */
 
 .right-search .artists-results {
-  border-radius: 0.5em;
+  border-radius: 0.5rem;
   background-color: rgba(8, 3, 1, 0.274);
 }
 
@@ -232,11 +232,11 @@ export default {
 }
 
 .right-search .artists-results .result-item .image {
-  height: 7em;
-  width: 7em;
+  height: 7rem;
+  width: 7rem;
   border-radius: 50%;
   background-color: rgba(16, 65, 14, 0.356);
-  margin-bottom: 0.5em;
+  margin-bottom: 0.5rem;
   background-image: url(../../assets/icons/logo-small.svg);
   background-size: 50%;
   background-image: url(../../assets/images/thriller.jpg);
@@ -244,8 +244,8 @@ export default {
 }
 
 .right-search .artists-results .result-item .name {
-  width: 7em;
+  width: 7rem;
   text-align: center;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.5rem;
 }
 </style>

src/components/RightSideBar/UpNext.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="up-next">
-    <p>COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span></p>
+    <p class="heading">
+      COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span>
+    </p>
     <div class="main-item">
       <div class="album-art image"></div>
       <div class="tags">
@@ -25,10 +27,10 @@
 </template>
 
 <script>
-import { ref } from '@vue/reactivity';
+import { ref } from "@vue/reactivity";
 export default {
   props: ["collapser"],
-  emits: ['updateCollapser'],
+  emits: ["updateCollapser"],
   setup(props, context) {
     const songs = [
       {
@@ -109,13 +111,13 @@ export default {
       },
     ];
 
-    const collapsed = ref(false)
-    const another_is_open = ref(props.collapser)
+    const collapsed = ref(false);
+    const another_is_open = ref(props.collapser);
 
-    let collapse = ()=> {
+    let collapse = () => {
       collapsed.value = !collapsed.value;
-      context.emit('updateCollapser')
-    }
+      context.emit("updateCollapser");
+    };
 
     return { songs, collapsed, collapse, another_is_open };
   },
@@ -124,27 +126,22 @@ export default {
 
 <style>
 .up-next {
-  padding: 0.5em;
-  margin-top: 1em;
+  padding: 0.5rem;
+  margin-top: 1rem;
   background-color: #131313b2;
-  border-radius: 0.5em;
+  border-radius: 0.5rem;
 }
 
-.up-next > p {
+.up-next .heading {
   position: relative;
-  font-size: small;
-  font-weight: bold;
-  color: #ffffffb2;
-  margin: 0.5em 0 1em 1em;
-  display: flex;
-  align-items: center;
+  margin: 0.5rem 0 1rem 0rem;
 }
 
 .up-next > p > span {
   position: absolute;
-  right: 0.5em;
-  padding: 0.5em;
-  border-radius: 0.5em;
+  right: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
   user-select: none;
 }
 
@@ -156,37 +153,37 @@ export default {
 .up-next .main-item {
   display: flex;
   align-items: center;
-  padding: 0.5em;
-  border-radius: 0.5em;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
   cursor: pointer;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.5rem;
 }
 
 .up-next .main-item:hover {
-  background-color: #aa343441;
+  background-color: #3a39393d;
 }
 
 .up-next .main-item .album-art {
-  width: 4.5em;
-  height: 4.5em;
+  width: 4.5rem;
+  height: 4.5rem;
   background-color: #ccc;
-  margin: 0 0.5em 0 0;
-  border-radius: 0.5em;
+  margin: 0 0.5rem 0 0;
+  border-radius: 0.5rem;
   background-image: url(../../assets/images/htf.jpeg);
 }
 
 .up-next .main-item .tags hr {
   border: none;
-  margin: 0.3em;
+  margin: 0.3rem;
 }
 
 .up-next .main-item .tags .title {
-  width: 20em;
+  width: 20rem;
   margin: 0;
 }
 
 .up-next .main-item .tags .artist {
-  width: 20em;
+  width: 20rem;
   margin: 0;
   font-size: small;
   color: rgba(255, 255, 255, 0.61);
@@ -197,12 +194,12 @@ export default {
 }
 
 .up-next .all-items .scrollable {
-  height: 20em;
+  height: 20rem;
   overflow-y: scroll;
-  padding: 0.5em;
-  margin-top: 0.5em;
+  padding: 0.5rem;
+  margin-top: 0.5rem;
   background-color: rgba(2, 6, 14, 0.425);
-  border-radius: 0.5em;
+  border-radius: 0.5rem;
 }
 
 .up-next .all-items p {
@@ -212,8 +209,8 @@ export default {
 .up-next .all-items .scrollable .song-item {
   display: flex;
   align-items: center;
-  padding: 0.5em;
-  border-radius: 0.5em;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
 }
 
 .up-next .all-items .scrollable .song-item:hover {
@@ -223,15 +220,15 @@ export default {
 
 .up-next .all-items .scrollable .song-item hr {
   border: none;
-  margin: 0.1em;
+  margin: 0.1rem;
 }
 
 .up-next .all-items .album-art {
-  width: 3em;
-  height: 3em;
+  width: 3rem;
+  height: 3rem;
   background-color: #ccc;
-  margin: 0 0.5em 0 0;
-  border-radius: 0.5em;
+  margin: 0 0.5rem 0 0;
+  border-radius: 0.5rem;
   background-image: url(../../assets/images/htf.jpeg);
 }