fix folder list component

src/components/FolderView/FolderList.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="f-container" v-for="folder in folders" :key="folder">
-    <router-link :to="{ path: '/' }">
+  <div class="f-container">
+    <h3>folders in this directory</h3>
+    <router-link :to="{ path: '/' }" v-for="folder in folders" :key="folder">
       <div class="f-item circular">
-        <div class="f-item-bg"></div>
         <span class="f-item-text">{{ folder.name }}</span>
       </div>
     </router-link>
@@ -22,24 +22,42 @@ export default {
 </script>
 
 <style>
-.f-item {
-  width: 10em;
-  height: 10em;
-  background-color: var(--green);
+.f-container {
+  margin-bottom: 20em;
+}
+.f-container h3 {
+  text-transform: uppercase;
+  font-weight: normal;
+  color: rgba(255, 255, 255, 0.438);
+  margin-bottom: 0em;
+}
+.f-container .f-item {
+  float: left;
+  width: 9em;
+  height: 8em;
+  /* background-color: #9d020781; */
   display: flex;
   justify-content: center;
   position: relative;
   background-image: url(../../assets/icons/folder.svg);
   background-repeat: no-repeat;
   background-position: center;
-  background-size: 50%;
+  background-size: 30%;
+  margin: 2em 2em 0em 0;
+  padding: 1em;
+  /* border: .1em solid var(--seperator); */
+  background-color: rgba(80, 80, 80, 0.247);
 }
 
-.f-item-text {
+.f-container .f-item:hover {
+  background-color: rgba(0, 0, 0, 0.527);
+}
+
+.f-container .f-item-text {
   width: calc(100% - 10%);
   line-height-step: 2;
   position: absolute;
-  bottom: -3em;
+  bottom: 0.5em;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -48,10 +66,4 @@ export default {
   line-clamp: 2;
   -webkit-box-orient: vertical;
 }
-
-.f-item-bg {
-  height: 100px;
-  width: 100%;
-  color: red;
-}
 </style>

src/components/FolderView/SearchBox.vue

@@ -62,7 +62,7 @@ export default {};
 }
 
 .folder-top .fsearch input:focus {
-  color: rgb(75, 74, 74);
-  outline: 0.1em solid var(--green);
+  color: rgb(255, 255, 255);
+  outline: 0.1em solid #9d0208;
 }
 </style>

src/components/FolderView/SongList.vue

@@ -115,7 +115,6 @@ tr {
 
 .folder {
   padding-bottom: 1em;
-  margin-bottom: 1em;
 }
 
 td .artist {