From 18a0e37044f92960305b3bd98eea8d2b2623f0e7 Mon Sep 17 00:00:00 2001
From: Ryan Coulson <ryan.coulson@ec.gc.ca>
Date: Mon, 13 May 2024 13:44:46 -0400
Subject: [PATCH] fix various UI issues

---
 src/components/editor/metadata-editor.vue  | 17 ++++++-----------
 src/components/editor/slide-editor.vue     |  2 +-
 src/components/editor/slideshow-editor.vue | 13 ++++++++-----
 src/components/editor/video-editor.vue     | 18 ++++++++++--------
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/editor/metadata-editor.vue b/src/components/editor/metadata-editor.vue
index 3efe3df6e..5852c3085 100644
--- a/src/components/editor/metadata-editor.vue
+++ b/src/components/editor/metadata-editor.vue
@@ -12,8 +12,8 @@
                     </button>
                 </div>
 
-                <div class="border py-5 w-5/6">
-                    <label>
+                <div class="flex items-center border py-5 w-5/6">
+                    <label class="editor-label">
                         <span class="text-red-500" v-if="'uuid' in reqFields">*</span> {{ $t('editor.uuid') }}:
                     </label>
                     <div class="relative w-1/3 inline-block">
@@ -27,7 +27,7 @@
                                 checkUuid();
                             "
                             v-model="uuid"
-                            class="w-full"
+                            class="editor-input w-full mt-0"
                             :class="{ 'input-error': error || !reqFields.uuid }"
                         />
                         <div class="absolute z-10 w-full bg-white border border-gray-200 mt-1" v-show="showDropdown">
@@ -76,7 +76,7 @@
                     </button>
                     <button
                         @click="fetchHistory"
-                        class="bg-black text-white hover:bg-gray-800"
+                        class="bg-black editor-button text-white hover:bg-gray-800"
                         :class="{ 'input-error': error }"
                         v-if="editExisting"
                     >
@@ -85,7 +85,7 @@
                     <div class="inline-flex align-middle mb-1" v-if="loadStatus === 'loading'">
                         <spinner size="24px" color="#009CD1" class="mx-2 my-auto"></spinner>
                     </div>
-                    <div v-if="editExisting" class="inline-flex border py-5 ml-10">
+                    <div v-if="editExisting" class="ml-10">
                         <ul>
                             <li
                                 v-for="history in storylineHistory"
@@ -99,7 +99,7 @@
                         </ul>
                         <button
                             :disabled="!selectedHistory || selectedHistory.storylineUUID !== uuid"
-                            class="bg-black text-white hover:bg-gray-800"
+                            class="editor-button bg-black text-white hover:bg-gray-800"
                             @click="loadHistory()"
                         >
                             {{ $t('editor.loadPrevious') }}
@@ -1129,7 +1129,6 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         max-width: 80%;
     }
 
-    .editor-container label,
     .vfm__content label {
         width: 10vw;
         text-align: right;
@@ -1141,7 +1140,6 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         font-size: larger;
     }
 
-    .editor-container input,
     .vfm__content input {
         padding: 5px 10px;
         margin-top: 5px;
@@ -1153,7 +1151,6 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         border: 1px solid red;
     }
 
-    .editor-container button,
     .vfm__content button {
         padding: 5px 12px;
         margin: 0px 10px;
@@ -1161,13 +1158,11 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         transition-duration: 0.2s;
     }
 
-    .editor-container button:hover:enabled,
     .vfm__content button:hover:enabled {
         background-color: #dbdbdb;
         color: black;
     }
 
-    .editor-container button:disabled,
     .vfm__content button:disabled {
         border: 1px solid gray;
         color: gray;
diff --git a/src/components/editor/slide-editor.vue b/src/components/editor/slide-editor.vue
index 3d6506c2e..3b1507783 100644
--- a/src/components/editor/slide-editor.vue
+++ b/src/components/editor/slide-editor.vue
@@ -220,7 +220,7 @@
                             saveChanges();
                         }
                     "
-                    class="border-t border-l border-r"
+                    class="editor-button border-t border-l border-r"
                     :class="advancedEditorView ? 'border-black' : 'border-white'"
                 >
                     <span class="align-middle inline-block pl-1">{{ $t('editor.slides.advanced') }}</span>
diff --git a/src/components/editor/slideshow-editor.vue b/src/components/editor/slideshow-editor.vue
index e8a49e8bc..5a2ec991e 100644
--- a/src/components/editor/slideshow-editor.vue
+++ b/src/components/editor/slideshow-editor.vue
@@ -9,7 +9,10 @@
             }}</span>
 
             <!-- add item button -->
-            <button class="bg-gray-100 cursor-pointer hover:bg-gray-200" @click="editingStatus = 'create'">
+            <button
+                class="editor-button bg-gray-100 cursor-pointer hover:bg-gray-200"
+                @click="editingStatus = 'create'"
+            >
                 <div class="flex items-center">
                     <svg height="18px" width="18px" viewBox="0 0 23 21" xmlns="http://www.w3.org/2000/svg">
                         <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
@@ -23,8 +26,8 @@
         <hr class="border-solid border-t-2 border-gray-300 my-2" />
         <!-- Metadata Editor -->
         <div class="flex items-center w-full text-left">
-            <label class="text-label">{{ $t('editor.image.slideshowCaption') }}:</label>
-            <input class="w-1/3" type="text" v-model="panel.caption" /><br />
+            <label class="editor-label text-label">{{ $t('editor.image.slideshowCaption') }}:</label>
+            <input class="editor-input w-1/3" type="text" v-model="panel.caption" /><br />
         </div>
         <table class="w-2/3 mt-5">
             <thead>
@@ -70,7 +73,7 @@
                         :allowMany="false"
                     ></component>
                     <div class="mt-3 w-full flex justify-end">
-                        <button class="bg-black text-white hover:bg-gray-800" @click="saveItem(true)">
+                        <button class="editor-button bg-black text-white hover:bg-gray-800" @click="saveItem(true)">
                             {{ $t('editor.slideshow.label.add') }}
                         </button>
                     </div>
@@ -88,7 +91,7 @@
                         :allowMany="false"
                     ></component>
                     <div class="mt-3 w-full flex justify-end">
-                        <button class="bg-black text-white hover:bg-gray-800" @click="saveItem()">
+                        <button class="editor-button bg-black text-white hover:bg-gray-800" @click="saveItem()">
                             {{ $t('editor.saveChanges') }}
                         </button>
                     </div>
diff --git a/src/components/editor/video-editor.vue b/src/components/editor/video-editor.vue
index 24d5bf873..13a35475f 100644
--- a/src/components/editor/video-editor.vue
+++ b/src/components/editor/video-editor.vue
@@ -2,19 +2,19 @@
     <div class="block">
         <!-- Upload video area -->
         <div class="flex mt-4 items-center w-full text-left">
-            <label class="text-label">{{ $t('editor.video.title') }}:</label>
-            <input class="w-3/5" type="text" v-model="videoPreview.title" @change="onVideoEdited" />
+            <label class="editor-label text-label">{{ $t('editor.video.title') }}:</label>
+            <input class="editor-input w-3/5" type="text" v-model="videoPreview.title" @change="onVideoEdited" />
         </div>
 
         <!-- Option 1: upload video file -->
         <div
-            class="upload-video text-center m-5 p-12 bg-gray-100 border-4 border-dashed border-gray-300"
+            class="upload-video flex justify-center text-center m-5 p-12 bg-gray-100 border-4 border-dashed border-gray-300"
             :class="{ dragging: isDragging }"
             @dragover.prevent="() => (dragging = true)"
             @dragleave.prevent="() => (dragging = false)"
             @drop.prevent="dropVideo($event)"
         >
-            <label class="flex drag-label cursor-pointer">
+            <label class="flex editor-label drag-label cursor-pointer">
                 <span class="align-middle inline-block pr-4">
                     <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -2 30 30">
                         <path
@@ -39,16 +39,18 @@
 
         <!-- Option 2: provide URL to external or YT link -->
         <div class="flex mt-4 items-center w-full text-left">
-            <label class="text-label">{{ $t('editor.label.or') + ' ' + $t('editor.video.pasteUrl') }}:</label>
+            <label class="editor-label text-label"
+                >{{ $t('editor.label.or') + ' ' + $t('editor.video.pasteUrl') }}:</label
+            >
             <input
                 ref="videoUrl"
-                class="w-3/5"
+                class="editor-input w-3/5"
                 type="search"
                 v-model="videoPreview.src"
                 v-if="videoPreview.videoType !== 'local'"
             />
-            <input ref="videoUrl" class="w-3/5" type="search" v-else />
-            <button @click="uploadVideoUrl" class="bg-white border border-black hover:bg-gray-100">
+            <input ref="videoUrl" class="editor-input w-3/5" type="search" v-else />
+            <button @click="uploadVideoUrl" class="editor-button bg-white border border-black hover:bg-gray-100">
                 {{ $t('editor.video.label.upload') }}
             </button>
         </div>