Integrate nav

- other minor refactors

src/components/playlists/NewPlaylistCard.vue

@@ -3,6 +3,7 @@
     <div class="gradient rounded"></div>
     <div class="plus image p-image"></div>
     <div>New Playlist</div>
+    <div></div>
   </div>
 </template>
 
@@ -10,30 +11,31 @@
 #new-playlist-card {
   display: grid;
   place-items: center;
-  background-color: $black;
   position: relative;
   cursor: pointer;
 
   .gradient {
     position: absolute;
-    width: calc(100% - 2rem);
-    height: 10rem;
-    top: 1rem;
+    width: calc(100% - 1.5rem);
+    top: 0.75rem;
     background-image: linear-gradient(37deg, $red, $blue);
     background-size: 100%;
-    transition: all .5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    aspect-ratio: 1;
   }
 
   .image {
     background-image: url("../../assets/icons/plus.svg");
     background-size: 5rem;
     z-index: 1;
-    transition: all .5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    background-color: transparent;
+    margin-bottom: $small;
   }
 
   &:hover {
     .gradient {
-      background-size: 30rem;
+      background-size: 300rem;
     }
     .image {
       transform: rotate(270deg);

src/components/playlists/PlaylistCard.vue

@@ -10,7 +10,7 @@
     <div
       class="image p-image rounded shadow-sm"
       :style="{
-        backgroundImage: `url(${props.playlist.image})`,
+        backgroundImage: `url(${props.playlist.thumb})`,
       }"
     ></div>
     <div class="pbtn">
@@ -37,21 +37,21 @@ import Option from "../shared/Option.vue";
 const props = defineProps<{
   playlist: Playlist;
 }>();
-
 </script>
 
 <style lang="scss">
 .p-card {
   width: 100%;
   padding: 0.75rem;
-  transition: all 0.2s ease;
-  background-image: linear-gradient(37deg, #000000e8, $gray);
+  transition: all 0.25s ease;
+  background-position: -10rem;
   position: relative;
 
   .p-image {
     min-width: 100%;
-    height: 10rem;
     transition: all 0.2s ease;
+    background-color: $gray4;
+    aspect-ratio: 1;
   }
 
   .drop {
@@ -60,6 +60,7 @@ const props = defineProps<{
     right: 1.25rem;
     opacity: 0;
     transition: all 0.25s ease-in-out;
+    display: none;
 
     .drop-btn {
       background-color: $gray3;
@@ -67,6 +68,7 @@ const props = defineProps<{
   }
 
   .pbtn {
+    display: none;
     position: absolute;
     bottom: 4.5rem;
     left: 1.25rem;
@@ -75,10 +77,12 @@ const props = defineProps<{
   }
 
   &:hover {
+    background-color: $gray5;
+
     .drop {
-      transition-delay: .75s;
+      transition-delay: 0.75s;
       opacity: 1;
-      transform: translate(0, -.5rem);
+      transform: translate(0, -0.5rem);
     }
   }