From 53b9ebdb60aa2cc2e5b58e9deb5bb3ef31bffd88 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 1 Dec 2021 11:11:53 +0300
Subject: [PATCH] add recommended tracks

---
 src/App.vue                                   | 37 +++++----
 src/assets/css/global.css                     | 34 +++++---
 src/components/FolderView/FolderList.vue      | 18 ++--
 src/components/FolderView/SearchBox.vue       | 20 ++---
 src/components/FolderView/SongList.vue        | 16 ++--
 src/components/LeftSidebar/Navigation.vue     |  2 +-
 src/components/RightSideBar/NowPlaying.vue    | 26 +++---
 .../RightSideBar/Recommendation.vue           | 79 ++++++++++++++++++
 src/components/RightSideBar/Search.vue        | 72 ++++++++--------
 src/components/RightSideBar/UpNext.vue        | 83 +++++++++----------
 src/views/FolderView.vue                      | 14 ++--
 11 files changed, 243 insertions(+), 158 deletions(-)
 create mode 100644 src/components/RightSideBar/Recommendation.vue

diff --git a/src/App.vue b/src/App.vue
index 21e3c98..7f28062 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,7 @@
       <Search :collapser="collapser"/>
       <NowPlaying />
       <UpNext :collapser="collapser" @updateCollapser="updateCollapser"/>
+      <RecommendedArtist/>
     </div>
   </div>
 </template>
@@ -37,6 +38,7 @@ import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
 import Search from "./components/RightSideBar/Search.vue";
 import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
 import UpNext from "./components/RightSideBar/UpNext.vue";
+import RecommendedArtist from "./components/RightSideBar/Recommendation.vue"
 
 export default {
   components: {
@@ -44,7 +46,8 @@ export default {
     PinnedStuff,
     Search,
     NowPlaying,
-    UpNext
+    UpNext,
+    RecommendedArtist
   },
   setup() {
     const collapsed = ref(true);
@@ -68,9 +71,9 @@ export default {
 
 <style>
 .logo {
-  height: 2em;
-  width: 9em;
-  margin-left: 2.25em;
+  height: 2rem;
+  width: 9rem;
+  margin-left: 2.25rem;
   background: url(./assets/logo.svg);
   background-size: contain;
   background-repeat: no-repeat;
@@ -79,6 +82,7 @@ export default {
   animation-duration: 2s;
   animation-iteration-count: 1;
 }
+
 .nav-container .in {
   display: flex;
   align-items: center;
@@ -89,11 +93,11 @@ export default {
 }
 
 #logo-container {
-  height: 3.6em;
-  margin-left: 1em;
+  height: 3.6rem;
+  margin-left: 1rem;
   display: flex;
   align-items: center;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.5rem;
 }
 
 .l-sidebar {
@@ -102,15 +106,15 @@ export default {
 
 .l-container #toggle {
   position: fixed;
-  top: 1em;
-  width: 1.75em;
-  height: 3.75em;
+  top: 1rem;
+  width: 1.75rem;
+  height: 3.75rem;
   background: url(./assets/icons/menu.svg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
-  margin-left: 0.25em;
+  margin-left: 0.25rem;
 }
 
 .l-container #settings-button {
@@ -135,14 +139,11 @@ export default {
 }
 
 .l-container #settings-button #settings-icon {
-  margin-left: 1em;
-  margin-right: 0.25em;
-  width: 1.5em;
-  height: 1.5em;
+  margin-left: 1rem;
+  margin-right: 0.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
   background-image: url(./assets/icons/settings.svg);
-  /* background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center; */
 }
 
 .collapsed #settings-button #settings-icon {
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index d23370a..a62f28f 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -8,8 +8,16 @@ body {
     background: #0d0e0e;
     color: #fff;
     font-family: 'Helvetica Neue', sans-serif;
+    font-size: 1rem;
 }
 
+.heading {
+    font-size: small;
+    font-weight: bold;
+    color: #ffffffb2;
+    display: flex;
+    align-items: center;
+}
 a {
     text-decoration: none;
     color: #fff;
@@ -18,7 +26,7 @@ a {
 .seperator {
     border: 1px solid;
     color: transparent;
-    margin: 0em;
+    margin: 0rem;
 }
 
 .hidden {
@@ -27,8 +35,8 @@ a {
 
 .l-container {
     display: grid;
-    grid-template-columns: min-content 4fr 30em;
-    grid-template-rows: 4em 1fr 1fr;
+    grid-template-columns: min-content 4fr 30rem;
+    grid-template-rows: 4rem 1fr 1fr;
     grid-auto-flow: row;
     grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar";
     width: 100vw;
@@ -61,9 +69,9 @@ a {
 .l-sidebar {
     width: 250px;
     grid-area: l-sidebar;
-    padding-top: 0.5em;
-    margin: .5em 0 .5em .5em;
-    border-radius: .5em;
+    padding-top: 0.5rem;
+    margin: .5rem 0 .5rem .5rem;
+    border-radius: .5rem;
     background-color: #131313b2;
     transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
     transition-duration: 0.3s;
@@ -84,16 +92,16 @@ a {
 
 .content {
     grid-area: content;
-    border-radius: .25em;
-    padding: .5em;
+    border-radius: .25rem;
+    padding: .5rem;
     overflow: hidden;
 }
 
 .r-sidebar {
     grid-area: r-sidebar;
     border-radius: 5px;
-    margin-right: .5em;
-    overflow-y: scroll;
+    margin-right: .5rem;
+    overflow-y: auto;
 }
 
 .image {
@@ -115,7 +123,7 @@ a {
 /* width */
 
 ::-webkit-scrollbar {
-    width: .5em;
+    width: .5rem;
 }
 
 
@@ -123,7 +131,7 @@ a {
 
 ::-webkit-scrollbar-track {
     background: rgba(51, 51, 51, 0.459);
-    border-radius: 1em;
+    border-radius: 1rem;
 }
 
 
@@ -131,7 +139,7 @@ a {
 
 ::-webkit-scrollbar-thumb {
     background: grey;
-    border-radius: 1em;
+    border-radius: 1rem;
 }
 
 
diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index 26ddcdd..26a0e60 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/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;
diff --git a/src/components/FolderView/SearchBox.vue b/src/components/FolderView/SearchBox.vue
index 00e603f..4b18e0d 100644
--- a/src/components/FolderView/SearchBox.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 42ed444..23e88c5 100644
--- a/src/components/FolderView/SongList.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index 37fc4e9..e3f0620 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/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;
 }
 
diff --git a/src/components/RightSideBar/NowPlaying.vue b/src/components/RightSideBar/NowPlaying.vue
index 5c76ce1..add7c7c 100644
--- a/src/components/RightSideBar/NowPlaying.vue
+++ b/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 {
diff --git a/src/components/RightSideBar/Recommendation.vue b/src/components/RightSideBar/Recommendation.vue
new file mode 100644
index 0000000..5a2d851
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/RightSideBar/Search.vue b/src/components/RightSideBar/Search.vue
index 9e6c810..0925b28 100644
--- a/src/components/RightSideBar/Search.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/RightSideBar/UpNext.vue b/src/components/RightSideBar/UpNext.vue
index f887fd3..4fb17cb 100644
--- a/src/components/RightSideBar/UpNext.vue
+++ b/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);
 }
 
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index c2c1f8a..5978e46 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -34,21 +34,21 @@ export default {
   position: relative;
   height: 100%;
   background-color: #131313b2;
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 5em;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 5rem;
 }
 
 #f-view-parent .fixed {
   position: absolute;
   height: min-content;
-  width: calc(100% - 2em);
-  top: .5em;
+  width: calc(100% - 2rem);
+  top: .5rem;
 }
 
 #scrollable {
   overflow-y: scroll;
-  height: calc(100% - 5em);
-  padding-right: 1em;
+  height: calc(100% - 5rem);
+  padding-right: 1rem;
 }
 </style>
\ No newline at end of file