improve look of the folder item card

src/components/FolderView/FolderItem.vue

@@ -0,0 +1,74 @@
+<template>
+  <router-link
+    :to="{ name: 'FolderView', params: { path: props.folder.path } }"
+  >
+    <div class="f-item border rounded">
+      <div class="icon image"></div>
+      <div class="info">
+        <div class="f-item-text ellip">{{ props.folder.name }}</div>
+        <div class="separator no-border"></div>
+        <div class="f-item-count">{{ props.folder.count }} tracks</div>
+      </div>
+    </div>
+  </router-link>
+</template>
+
+<script setup>
+const props = defineProps({
+  folder: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss">
+.f-container .f-item {
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  position: relative;
+  background-color: #ffffff09;
+  transition: all 0.2s ease;
+
+  @include phone-only {
+    height: 4rem;
+  }
+
+  .icon {
+    background-image: url(../../assets/icons/folder.svg);
+    width: 2rem;
+    height: 1.5rem;
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+
+  .info {
+    width: 100%;
+
+    .f-item-count {
+      font-size: 0.8rem;
+      color: rgba(219, 217, 217, 0.63);
+    }
+
+    .f-item-text {
+      text-align: left;
+    }
+  }
+
+  &:hover {
+    background: #0575e6; /* fallback for old browsers */
+    background: linear-gradient(
+      to top right,
+      #021b79,
+      #0575e6
+    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    background-size: 105% 105%;  
+    background-position-x: -$small;
+
+    .f-item-count {
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/components/FolderView/FolderList.vue

@@ -1,29 +1,29 @@
 <template>
-  <div class="f-container rounded" :class="{ no_f: !folders.length }">
-    <div id="f-items" v-if="folders.length">
-      <router-link
-        :to="{ name: 'FolderView', params: { path: folder.path } }"
-        v-for="folder in folders"
+  <div class="f-container rounded" :class="{ no_f: !props.folders.length }">
+    <div id="f-items" v-if="props.folders.length">
+      <FolderItem
+        v-for="folder in props.folders"
         :key="folder"
-      >
-        <div class="f-item rounded">
-          <div class="f-item-text ellip">{{ folder.name }}</div>
-          <div class="f-item-count">{{ folder.count }} tracks</div>
-        </div>
-      </router-link>
+        :folder="folder"
+      />
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: ["folders"],
-};
+<script setup>
+import FolderItem from "./FolderItem.vue";
+
+const props = defineProps({
+  folders: {
+    type: Array,
+    required: true,
+  },
+});
 </script>
 
 <style lang="scss">
 .f-container {
-  padding: $small 1rem 1rem 1rem;
+  padding: $small 0 $smaller 0;
 }
 
 .no_f {
@@ -33,8 +33,7 @@ export default {
 #f-items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-  grid-gap: 1rem;
-  gap: 1rem;
+  gap: $small;
 }
 
 .f-container p {
@@ -43,35 +42,4 @@ export default {
   color: rgba(255, 255, 255, 0.438);
   margin-bottom: 1rem;
 }
-
-.f-container .f-item {
-  min-height: 5rem;
-  display: flex;
-  align-items: center;
-  position: relative;
-  background-image: url(../../assets/icons/folder.svg);
-  background-repeat: no-repeat;
-  background-position: 1rem;
-  background-size: 1.5rem;
-  background-color: rgb(22, 36, 85);
-  transition: all 0.2s ease;
-
-  .f-item-count {
-    position: absolute;
-    top: 70%;
-    left: 3rem;
-    font-size: 0.8rem;
-    color: rgba(255, 255, 255, 0.5);
-  }
-
-  .f-item-text {
-    position: absolute;
-    left: 3rem;
-    text-align: left;
-  }
-}
-
-.f-container .f-item:hover {
-  background-color: $blue;
-}
-</style>
+</style>