From 26f77e4aec91b6d9a7646afa8f1623a5d14fc5a8 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Sun, 28 Aug 2022 16:42:55 +0200
Subject: [PATCH] improve playlist modal UI

---
 src/components/PlaylistAddModal.vue | 44 +++++++++++++++--------------
 src/components/ShareModal.vue       | 28 +++++++++---------
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index aeb20921..d61b6235 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -6,7 +6,7 @@
                     <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
                     <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
                 </div>
-                <select class="select w-full" v-model="selectedPlaylist">
+                <select class="select w-full mt-3" v-model="selectedPlaylist">
                     <option
                         v-for="playlist in playlists"
                         :value="playlist.id"
@@ -14,31 +14,19 @@
                         v-text="playlist.name"
                     />
                 </select>
-                <button
-                    class="btn mt-2"
-                    @click="handleClick(selectedPlaylist)"
-                    ref="addButton"
-                    v-t="'actions.add_to_playlist'"
-                />
+                <div class="flex justify-end mt-3">
+                    <button
+                        class="btn"
+                        @click="handleClick(selectedPlaylist)"
+                        ref="addButton"
+                        v-t="'actions.add_to_playlist'"
+                    />
+                </div>
             </div>
         </div>
     </div>
 </template>
 
-<style scoped>
-.modal {
-    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
-}
-
-.modal > div {
-    @apply table-cell align-middle;
-}
-
-.modal-container {
-    @apply w-min m-auto px-8 bg-dark-700 p-6;
-}
-</style>
-
 <script>
 export default {
     props: {
@@ -111,3 +99,17 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+.modal {
+    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
+}
+
+.modal > div {
+    @apply table-cell align-middle;
+}
+
+.modal-container {
+    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl;
+}
+</style>
diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index 87cdec60..360681d6 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -21,20 +21,6 @@
     </div>
 </template>
 
-<style scoped>
-.modal {
-    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
-}
-
-.modal > div {
-    @apply table-cell align-middle;
-}
-
-.modal-container {
-    @apply w-100 m-auto px-8 bg-dark-700 p-5 flex flex-col rounded-xl;
-}
-</style>
-
 <script>
 export default {
     props: {
@@ -93,3 +79,17 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+.modal {
+    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
+}
+
+.modal > div {
+    @apply table-cell align-middle;
+}
+
+.modal-container {
+    @apply w-100 m-auto px-8 bg-dark-700 p-5 flex flex-col rounded-xl;
+}
+</style>