client: remove search box in folder view

- add working ctrl f listener

src/components/FolderView/SearchBox.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="folder-top flex">
     <div class="fname">
-      <div>
-        <div class="ellip">{{ path.split("/").splice(-1) + "" }}</div>
-      </div>
-    </div>
-    <div class="fsearch">
-      <div>
-        <input type="search" placeholder="Search this directory" />
+      <button class="play image">
+        <div class="icon"></div>
+        Play
+      </button>
+      <div class="ellip text">
+        <div class="icon image"></div>
+        {{ path.split("/").splice(-1) + "" }}
       </div>
     </div>
   </div>
@@ -21,55 +21,51 @@ export default {
 
 <style lang="scss">
 .folder-top {
-  padding-bottom: 1rem;
-  margin-bottom: 1rem;
   border-bottom: 1px solid $separator;
-  width: calc(100% - 2rem);
-  margin-left: 1rem;
+  width: calc(100% - 0.5rem);
+  padding-bottom: $small;
+  height: 3rem;
 }
 
 .folder-top .fname {
   width: 50%;
-  color: rgba(255, 255, 255, 0.438);
-  text-transform: uppercase;
   display: flex;
   align-items: center;
-}
 
-.folder-top .fsearch {
-  position: relative;
-  width: 50%;
-  padding-right: 3rem;
-}
+  .play {
+    height: 100%;
+    width: 5em;
+    background-color: rgb(5, 74, 131);
+    border-radius: $small;
+    display: flex;
+    align-items: center;
+    padding-left: $small;
+    margin-right: $small;
 
-.folder-top .fsearch div {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-}
+    .icon {
+      height: 1.5rem;
+      width: 1.5rem;
+      background-image: url(../../assets/icons/play.svg);
+      background-size: 1.5rem;
+      background-position: 10%;
+      margin-right: $small;
+    }
+  }
 
-.folder-top .fsearch input {
-  width: 30rem;
-  border: none;
-  border-radius: 0.5rem;
-  padding-left: 1rem;
-  background-color: #4645456c;
-  color: rgba(255, 255, 255, 0.521);
-  font-size: 1rem;
-  line-height: 3rem;
-  outline: none;
-}
+  .text {
+    display: flex;
+    align-items: center;
 
-.folder-top .fsearch input::-webkit-search-cancel-button {
-  position: relative;
-  right: 20px;
-  cursor: pointer;
-  width: 50px;
-  height: 50px;
-}
+    border-radius: $small;
+    background-color: rgb(24, 22, 22);
+    padding: $small;
 
-.folder-top .fsearch input:focus {
-  color: rgb(255, 255, 255);
-  outline: 1px solid #fafafa52;
+    .icon {
+      height: 1.5rem;
+      width: 1.5rem;
+      background-image: url(../../assets/icons/folder.svg);
+      margin-right: $small;
+    }
+  }
 }
 </style>

src/components/FolderView/SongList.vue

@@ -210,13 +210,14 @@ export default {
 }
 td,
 th {
-  padding: $small;
+  padding: $small 0 $small $small;
   text-align: left;
 }
 
 th {
   text-transform: uppercase;
   font-weight: normal;
+  display: none;
 }
 
 td .artist {
@@ -227,7 +228,6 @@ td .artist {
   border-collapse: collapse;
   text-transform: capitalize;
   position: relative;
-  margin: 1rem;
 
   tbody tr {
     cursor: pointer;