minor refactors

src/components/shared/AlbumCard.vue

@@ -4,7 +4,7 @@
       name: 'AlbumView',
       params: { album: album.name, artist: album.artist },
     }"
-    class="result-item border"
+    class="result-item"
   >
     <div
       class="album-art image"
@@ -29,29 +29,32 @@ export default {
   flex-direction: column;
   align-items: center;
   padding: $small;
-  border-radius: $small;
+  border-radius: .75rem;
   text-align: left !important;
-  width: 9rem;
+  background-color: #726c7227;
+
+  &:hover {
+    background-color: #1b3688cb;
+  }
 
   .album-art {
-    height: 7rem;
-    width: 7rem;
-    border-radius: 0.5rem;
+    height: 7.5rem;
+    width: 7.5rem;
+    border-radius: .5rem;
     margin-bottom: 0.5rem;
   }
 
   .title {
     width: 7rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.25rem;
     font-size: 0.9rem;
   }
 
   .artistsx {
     width: 7rem;
-    display: flex;
     font-size: 0.8rem;
     text-align: left;
-    color: rgba(40, 116, 216, 0.767);
+    color: #ffffffbd;
   }
 }
 </style>

src/components/shared/ArtistCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="xartist border" :style="{ backgroundColor: `#${color}` }">
+  <div class="xartist" :style="{ backgroundColor: `#${color}` }">
     <div
       class="artist-image image"
       :style="{ backgroundImage: `url('${artist.image}')` }"
@@ -24,7 +24,7 @@ export default {
 
   width: 9em;
   height: 11em;
-  border-radius: $small;
+  border-radius: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/shared/SongItem.vue

@@ -3,7 +3,7 @@
     <td class="index">{{ index }}</td>
     <td class="flex" @click="emitUpdate(song)">
       <div
-        class="album-art rounded image"
+        class="album-art image"
         :style="{ backgroundImage: `url(&quot;${song.image}&quot;` }"
       >
         <div
@@ -113,6 +113,7 @@ export default {
       margin-right: 1rem;
       display: grid;
       place-items: center;
+      border-radius: .5rem;
     }
 
     .artist {