search component initial build

src/components/FolderView/SearchBox.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="fsearch">
       <div>
-        <input type="search" placeholder="Search here" />
+        <input type="search" placeholder="Search this directory" />
       </div>
     </div>
   </div>
@@ -44,7 +44,7 @@ export default {};
 .folder-top .fsearch input {
   width: 30em;
   border: none;
-  border-radius: 2em;
+  border-radius: .5em;
   padding-left: 1em;
   background-color: #4645456c;
   color: rgba(255, 255, 255, 0.521);
@@ -63,6 +63,6 @@ export default {};
 
 .folder-top .fsearch input:focus {
   color: rgb(255, 255, 255);
-  outline: 0.1em solid #fafafa;
+  outline: 0.1em solid #fafafa52;
 }
 </style>

src/components/FolderView/SongList.vue

@@ -10,9 +10,9 @@
         </tr>
         <tr v-for="song in songs" :key="song">
           <td :style="{ width: songTitleWidth + 'px' }" class="flex">
-            <div class="album-art rounded"></div>
+            <div class="album-art rounded image"></div>
             <div>
-              <span>{{ song.title }}</span>
+              <span class="ellipsis">{{ song.title }}</span>
             </div>
           </td>
           <td :style="{ width: songTitleWidth + 'px' }">
@@ -92,9 +92,6 @@ export default {
   margin-right: 1em;
   background-color: #ccc;
   background-image: url(../../assets/images/Jim_Reeves.png);
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
 }
 
 .folder .table .flex {
@@ -106,9 +103,6 @@ export default {
   position: absolute;
   bottom: 1.5em;
   width: calc(100% - 6em);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 td,