From d525b6991fe64d91c66ca1c2d06c8cb64a91fa0a Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Thu, 8 Sep 2022 22:56:24 +0200
Subject: [PATCH] fix close button

---
 src/components/ModalComponent.vue   | 7 ++++++-
 src/components/PlaylistAddModal.vue | 5 +----
 src/components/ShareModal.vue       | 7 ++-----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index 16ebf813..3fdaea06 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -2,6 +2,7 @@
     <div class="modal">
         <div @click="handleClick">
             <div class="modal-container">
+                <button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
                 <slot></slot>
             </div>
         </div>
@@ -41,6 +42,10 @@ export default {
 }
 
 .modal-container {
-    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw];
+    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw] relative;
+}
+
+.modal-container > button {
+    @apply absolute right-8 top-6;
 }
 </style>
diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index 495f9f30..3e3a4aac 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -1,9 +1,6 @@
 <template>
     <ModalComponent>
-        <div class="flex">
-            <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>
+        <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
         <select class="select w-full mt-3" v-model="selectedPlaylist">
             <option v-for="playlist in playlists" :value="playlist.id" :key="playlist.id" v-text="playlist.name" />
         </select>
diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index 92a98ae9..34d447f4 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -1,9 +1,6 @@
 <template>
     <ModalComponent>
-        <div class="flex">
-            <h2 v-t="'actions.share'" />
-            <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
-        </div>
+        <h2 v-t="'actions.share'" />
         <div class="flex justify-between mt-4">
             <label v-t="'actions.with_timecode'" for="withTimeCode" />
             <input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
@@ -16,7 +13,7 @@
             <label v-t="'actions.time_code'" />
             <input class="input w-12" type="text" v-model="timeStamp" />
         </div>
-        <h3 class="mt-4" v-text="generatedLink" />
+        <a :href="generatedLink" target="_blank"><h3 class="mt-4" v-text="generatedLink" /></a>
         <div class="flex justify-end mt-4">
             <button class="btn" v-t="'actions.follow_link'" @click="followLink()" />
             <button class="btn ml-3" v-t="'actions.copy_link'" @click="copyLink()" />