show existing image on update playlist modal

+ some modal cleanup

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -38,11 +38,9 @@ import LoadMore from "./LoadMore.vue";
 
 const search = useSearchStore();
 
-const props = defineProps<{
+defineProps<{
   album_grid?: boolean;
 }>();
-
-console.log(search.albums);
 </script>
 
 <style lang="scss">

src/components/modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="new-playlist-modal" v-if="modal.visible">
+  <div class="modal" v-if="modal.visible">
     <div class="bg" @click="modal.hideModal"></div>
     <div class="m-content rounded">
       <div class="heading">{{ modal.title }}</div>
@@ -34,7 +34,6 @@ const modal = useModalStore();
  * @param title
  */
 function setTitle(title: string) {
-  console.log(title);
   modal.setTitle(title);
 }
 
@@ -47,7 +46,7 @@ function hideModal() {
 </script>
 
 <style lang="scss">
-.new-playlist-modal {
+.modal {
   position: fixed;
   z-index: 20;
   height: 100vh;
@@ -65,10 +64,11 @@ function hideModal() {
   }
 
   .m-content {
-    width: 30rem;
-    background-color: $black;
+    width: 100%;
+    max-width: 35rem;
     padding: 1rem;
     position: relative;
+    background-color: $gray;
 
     .cancel {
       width: 2rem;
@@ -78,9 +78,10 @@ function hideModal() {
       right: 1rem;
       background-image: url("../assets/icons/plus.svg");
       transform: rotate(45deg);
+      cursor: pointer;
 
       &:hover {
-        transform: rotate(135deg);
+        transform: rotate(45deg) scale(1.2);
       }
     }
   }

src/components/modals/NewPlaylist.vue

@@ -4,7 +4,7 @@
     <br />
     <input
       type="text"
-      class="rounded"
+      class="rounded-sm"
       name="name"
       id="modal-playlist-name-input"
     />

src/components/modals/updatePlaylist.vue

@@ -28,7 +28,9 @@
         id="update-pl-img-preview"
         class="image"
         :style="{
-          backgroundImage: `url(${props.playlist.image})`,
+          backgroundImage: `url(${
+            paths.images.playlist + props.playlist.image
+          })`,
         }"
       />
     </div>
@@ -41,6 +43,7 @@ import { updatePlaylist } from "@/composables/fetch/playlists";
 import { Playlist } from "@/interfaces";
 import usePStore from "@/stores/pages/playlist";
 import { onMounted } from "vue";
+import { paths } from "@/config";
 
 const pStore = usePStore();
 
@@ -132,6 +135,7 @@ function update_playlist(e: Event) {
     place-items: center;
     color: $gray1;
     margin: $small 0;
+    cursor: pointer;
 
     #update-pl-img-preview {
       width: 4.5rem;