From d22052c612dfb1e1ab0ebbccd97757d461af4287 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Wed, 18 Oct 2023 16:47:56 -0500
Subject: [PATCH] Update UI for library tools tab

---
 .../components/modals/libraries/EditModal.vue   |  2 +-
 .../modals/libraries/LibraryTools.vue           | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/client/components/modals/libraries/EditModal.vue b/client/components/modals/libraries/EditModal.vue
index 09c0fc1d..03b66931 100644
--- a/client/components/modals/libraries/EditModal.vue
+++ b/client/components/modals/libraries/EditModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <modals-modal v-model="show" name="edit-library" :width="700" :height="'unset'" :processing="processing">
+  <modals-modal v-model="show" name="edit-library" :width="800" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
         <p class="text-xl md:text-3xl text-white truncate">{{ title }}</p>
diff --git a/client/components/modals/libraries/LibraryTools.vue b/client/components/modals/libraries/LibraryTools.vue
index d1e62dd4..7297c1ae 100644
--- a/client/components/modals/libraries/LibraryTools.vue
+++ b/client/components/modals/libraries/LibraryTools.vue
@@ -1,7 +1,18 @@
 <template>
-  <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
-    <ui-btn class="mb-4" @click.stop="removeAllMetadataClick('json')">Remove all metadata.json files in library item folders</ui-btn>
-    <ui-btn @click.stop="removeAllMetadataClick('abs')">Remove all metadata.abs files in library item folders</ui-btn>
+  <div class="w-full h-full px-1 md:px-2 py-1 mb-4">
+    <div class="w-full border border-black-200 p-4 my-8">
+      <div class="flex flex-wrap items-center">
+        <div>
+          <p class="text-lg">Remove metadata files in library item folders</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">Remove all metadata.json or metadata.abs files in your {{ mediaType }} folders</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <ui-btn class="mb-4 block" @click.stop="removeAllMetadataClick('json')">Remove all metadata.json</ui-btn>
+          <ui-btn @click.stop="removeAllMetadataClick('abs')">Remove all metadata.abs</ui-btn>
+        </div>
+      </div>
+    </div>
   </div>
 </template>