fix errors, refactor

n1crack · Jul 1, 2024 · 3c95d63 · 3c95d63
1 parent aeecc49
commit 3c95d63
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 29 deletions.
diff --git a/src/components/modals/ModalAbout.vue b/src/components/modals/ModalAbout.vue
@@ -26,7 +26,7 @@
           </div>
           <div class="vuefinder__about-modal__settings">
             <fieldset>
-              <div class="vuefinder__about-modal__setting">
+              <div class="vuefinder__about-modal__setting flex">
                 <div class="vuefinder__about-modal__setting-input">
                   <input id="metric_unit" name="metric_unit" type="checkbox"
                          v-model="app.metricUnits"
@@ -40,7 +40,7 @@
                 </div>
               </div>
 
-              <div class="vuefinder__about-modal__setting">
+              <div class="vuefinder__about-modal__setting flex">
                 <div class="vuefinder__about-modal__setting-input">
                   <input id="large_icons" name="large_icons" type="checkbox"
                          v-model="app.compactListView"
@@ -54,7 +54,7 @@
                 </div>
               </div>
 
-              <div class="vuefinder__about-modal__setting">
+              <div class="vuefinder__about-modal__setting flex">
                 <div class="vuefinder__about-modal__setting-input">
                   <input id="persist_path" name="persist_path" type="checkbox"
                          v-model="app.persist"
@@ -68,7 +68,7 @@
                 </div>
               </div>
 
-              <div class="vuefinder__about-modal__setting">
+              <div class="vuefinder__about-modal__setting flex">
                 <div class="vuefinder__about-modal__setting-input">
                   <input id="show_thumbnails" name="show_thumbnails" type="checkbox"
                          v-model="app.showThumbnails"
@@ -82,7 +82,7 @@
                 </div>
               </div>
 
-              <div class="vuefinder__about-modal__setting">
+              <div class="vuefinder__about-modal__setting ">
                 <div class="vuefinder__about-modal__setting-input">
                   <label for="theme" class="vuefinder__about-modal__label">
                     {{ t('Theme') }}
@@ -95,7 +95,7 @@
                       <option v-for="(name, key) in themes" :value="key">{{ name }}</option>
                     </optgroup>
                   </select>
-                  <action-message class="ms-3 flex-shrink-0 flex-grow basis-full" on="vf-theme-saved">{{ t('Saved.') }}</action-message>
+                  <action-message class="ms-3" on="vf-theme-saved">{{ t('Saved.') }}</action-message>
                 </div>
               </div>
 
@@ -112,7 +112,7 @@
                       <option v-for="(language, code) in supportedLanguages" :value="code">{{ language }}</option>
                     </optgroup>
                   </select>
-                  <action-message class="ms-3 flex-shrink-0 flex-grow basis-full" on="vf-language-saved">{{ t('Saved.') }}</action-message>
+                  <action-message class="ms-3" on="vf-language-saved">{{ t('Saved.') }}</action-message>
                 </div>
               </div>
             </fieldset>
@@ -233,19 +233,19 @@
 }
 
 .vuefinder__about-modal__setting {
-  @apply flex relative gap-x-3 items-center;
+  @apply block relative gap-x-3 items-center;
 }
 
 .vuefinder__about-modal__setting-input {
   @apply h-6 flex items-center;
 }
 
 .vuefinder__about-modal__setting-label {
-  @apply flex-1 block text-sm;
+  @apply flex flex-1 block text-sm;
 }
 
 .vuefinder .vuefinder__about-modal__label {
-  @apply flex w-full font-medium text-gray-900 dark:text-gray-400;
+  @apply flex w-full text-sm text-gray-900 dark:text-gray-400;
 }
 
 .vuefinder .vuefinder__about-modal__checkbox {

diff --git a/src/components/modals/ModalArchive.vue b/src/components/modals/ModalArchive.vue
@@ -61,7 +61,7 @@
 }
 
 .vuefinder .vuefinder__archive-modal__input {
-  @apply my-1 px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full;
+  @apply my-1 px-2 py-1 border rounded dark:bg-gray-700/25 dark:border-gray-600 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full;
 }
 </style>
 

diff --git a/src/components/modals/ModalMove.vue b/src/components/modals/ModalMove.vue
@@ -4,7 +4,7 @@
       <ModalHeader :icon="MoveSVG" :title="t('Move files')"></ModalHeader>
       <div class="vuefinder__move-modal__content">
         <p class="vuefinder__move-modal__description">{{ t('Are you sure you want to move these files?') }}</p>
-        <div class="vuefinder__move-modal__files">
+        <div class="vuefinder__move-modal__files vf-scrollbar">
           <div v-for="node in items" class="vuefinder__move-modal__file">
             <div>
               <svg v-if="node.type === 'dir'" class="vuefinder__move-modal__icon vuefinder__move-modal__icon--dir" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
@@ -46,7 +46,7 @@
 }
 
 .vuefinder__move-modal__files {
-  @apply max-h-[200px] overflow-y-auto vf-scrollbar text-left;
+  @apply max-h-[200px] overflow-y-auto text-left;
 }
 
 .vuefinder__move-modal__file {

diff --git a/src/components/modals/ModalNewFile.vue b/src/components/modals/ModalNewFile.vue
@@ -33,7 +33,7 @@
 }
 
 .vuefinder .vuefinder__new-file-modal__input {
-  @apply px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full;
+  @apply px-2 py-1 border rounded dark:bg-gray-700/25 dark:border-gray-600 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full;
 }
 </style>
 <script setup>

diff --git a/src/components/modals/ModalNewFolder.vue b/src/components/modals/ModalNewFolder.vue
@@ -33,7 +33,7 @@
 }
 
 .vuefinder .vuefinder__new-folder-modal__input {
-  @apply px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full;
+  @apply px-2 py-1 border rounded dark:bg-gray-700/25 dark:border-gray-600 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full;
 }
 </style>
 

diff --git a/src/components/modals/ModalRename.vue b/src/components/modals/ModalRename.vue
@@ -52,7 +52,7 @@
 }
 
 .vuefinder .vuefinder__rename-modal__input {
-  @apply px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full;
+  @apply px-2 py-1 border rounded dark:bg-gray-700/25 dark:border-gray-600 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full;
 }
 </style>
 

diff --git a/src/components/modals/ModalUpload.vue b/src/components/modals/ModalUpload.vue
@@ -51,7 +51,7 @@
     <input ref="internalFolderInput" type="file" multiple webkitdirectory class="hidden">
 
     <template v-slot:buttons>
-      <button type="button" class="vuefinder__upload-modal__upload-button" :disabled="uploading" @click.prevent="upload">
+      <button type="button" class="vf-btn vf-btn-primary" :disabled="uploading" @click.prevent="upload">
         {{ t('Upload') }}
       </button>
       <button type="button" class="vf-btn vf-btn-secondary" v-if="uploading" @click.prevent="cancel">{{ t('Cancel') }}</button>
@@ -112,18 +112,6 @@
 .vuefinder .vuefinder__upload-modal__file-remove-icon {
   @apply w-5 h-5;
 }
-
-.vuefinder__upload-modal__upload-button {
-  @apply vf-btn vf-btn-primary;
-}
-
-.vuefinder .vuefinder__upload-modal__upload-button.disabled {
-  @apply bg-blue-200 hover:bg-blue-200 dark:bg-gray-700/50 dark:hover:bg-gray-700/50 dark:text-gray-500;
-}
-
-.vuefinder .vuefinder__upload-modal__upload-button.enabled {
-  @apply bg-blue-600 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-500;
-}
 </style>
 
 <script setup>