add comments to some store functions

- some refactors to modals

src/components/playlists/NewPlaylistCard.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="p-card rounded" id="new-playlist-card">
+  <div
+    class="p-card rounded"
+    id="new-playlist-card"
+    @click="Modal.showNewPlaylistModal()"
+  >
     <div class="gradient rounded"></div>
     <div class="plus image p-image"></div>
     <div>New Playlist</div>
@@ -7,6 +11,12 @@
   </div>
 </template>
 
+<script setup lang="ts">
+import useModalStore from "../../stores/modal";
+
+const Modal = useModalStore();
+</script>
+
 <style lang="scss">
 #new-playlist-card {
   display: grid;
@@ -35,10 +45,10 @@
 
   &:hover {
     .gradient {
-      background-size: 300rem;
+      background-size: 29rem;
     }
     .image {
-      transform: rotate(270deg);
+      transform: rotate(180deg);
     }
   }
 }

src/components/playlists/PlaylistCard.vue

@@ -48,8 +48,8 @@ const props = defineProps<{
   width: 100%;
   padding: 0.75rem;
   transition: all 0.25s ease;
-  background-position: -10rem;
   position: relative;
+  background-color: #1c1c1e80;
 
   .p-image {
     min-width: 100%;