Update ModalNewFolder.vue

src/components/modals/ModalNewFolder.vue

@@ -2,25 +2,41 @@
   <ModalLayout>
     <div>
       <ModalHeader :icon="NewFolderSVG" :title="t('New Folder')"></ModalHeader>
-      <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
-        <div class="mt-2">
-          <p class="text-sm text-gray-500">{{ t('Create a new folder') }}</p>
+      <div class="vuefinder__new-folder-modal__content">
+        <div class="vuefinder__new-folder-modal__form">
+          <p class="vuefinder__new-folder-modal__description">{{ t('Create a new folder') }}</p>
           <input v-model="name" @keyup.enter="createFolder"
-                 class="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" :placeholder="t('Folder Name')" type="text">
+                 class="vuefinder__new-folder-modal__input" :placeholder="t('Folder Name')" type="text">
           <message v-if="message.length" @hidden="message=''" error>{{ message }}</message>
         </div>
       </div>
     </div>
 
     <template v-slot:buttons>
-      <button type="button" @click="createFolder" class="vf-btn vf-btn-primary">
-        {{ t('Create') }}</button>
-      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">
-        {{ t('Cancel') }}</button>
+      <button type="button" @click="createFolder" class="vf-btn vf-btn-primary">{{ t('Create') }}</button>
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">{{ t('Cancel') }}</button>
     </template>
   </ModalLayout>
 </template>
 
+<style>
+.vuefinder__new-folder-modal__content {
+  @apply mt-3 text-center sm:mt-0 sm:text-left w-full;
+}
+
+.vuefinder__new-folder-modal__form {
+  @apply mt-2;
+}
+
+.vuefinder__new-folder-modal__description {
+  @apply text-sm text-gray-500;
+}
+
+.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;
+}
+</style>
+
 <script setup>
 import ModalLayout from './ModalLayout.vue';
 import {inject, ref} from 'vue';