more refactoring

src/components/shared/AlbumCard.vue

@@ -4,7 +4,7 @@
       name: 'AlbumView',
       params: { album: album.name, artist: album.artist },
     }"
-    class="result-item"
+    class="result-item shadow-sm"
   >
     <div
       class="album-art image"
@@ -29,18 +29,17 @@ export default {
   flex-direction: column;
   align-items: center;
   padding: $small;
-  border-radius: .75rem;
+  border-radius: 0.75rem;
   text-align: left !important;
   border: solid 2px transparent;
-
-  // &:hover {
-  //   background-color: #1b3688cb;
-  // }
+  background-color: $gray;
+  color: #ffffffde !important;
+  transition: all 0.5s ease;
 
   .album-art {
     height: 7.5rem;
     width: 7.5rem;
-    border-radius: .5rem;
+    border-radius: 0.5rem;
     margin-bottom: 0.5rem;
   }
 

src/components/shared/ArtistCard.vue

@@ -22,15 +22,15 @@ export default {
   overflow: hidden;
   position: relative;
 
-  width: 9em;
+  min-width: 8.25em;
   height: 11em;
-  border-radius: 1rem;
+  border-radius: .75rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background-color: transparent;
+
 
   .artist-image {
     width: 7em;
@@ -41,6 +41,7 @@ export default {
     background-position: center;
     background-repeat: no-repeat;
     transition: all 0.5s ease-in-out;
+    transition-delay: .25s;
   }
 
   &:hover {

src/components/shared/TrackItem.vue

@@ -47,7 +47,6 @@ const playThis = (song) => {
   playAudio.playAudio(song.trackid);
   perks.current.value = song;
 };
-
 </script>
 
 <style lang="scss">
@@ -65,6 +64,7 @@ const playThis = (song) => {
 
   &:hover {
     cursor: pointer;
+    background-color: $gray5 !important;
   }
 
   hr {