refactor: modals

components/collections/graphql/Add.vue

@@ -2,26 +2,27 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("new_collection") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <label for="selectLabelGqlAdd">{{ $t("label") }}</label>
-      <input
-        id="selectLabelGqlAdd"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="$t('my_new_collection')"
-        @keyup.enter="addNewCollection"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelGqlAdd" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelGqlAdd"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="$t('my_new_collection')"
+          @keyup.enter="addNewCollection"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

components/collections/graphql/AddFolder.vue

@@ -7,21 +7,27 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlAddFolder">{{ $t("label") }}</label>
-      <input
-        id="selectLabelGqlAddFolder"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="$t('my_new_folder')"
-        @keyup.enter="addFolder"
-      />
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelGqlAddFolder"
+          class="px-4 font-semibold pb-4 text-xs"
+        >
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelGqlAddFolder"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="$t('my_new_folder')"
+          @keyup.enter="addFolder"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="addFolder" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

components/collections/graphql/Collection.vue

@@ -35,6 +35,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="toggleShowChildren()"
       >

components/collections/graphql/Edit.vue

@@ -7,21 +7,24 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlEdit">{{ $t("label") }}</label>
-      <input
-        id="selectLabelGqlEdit"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="editingCollection.name"
-        @keyup.enter="saveCollection"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelGqlEdit" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelGqlEdit"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="editingCollection.name"
+          @keyup.enter="saveCollection"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

components/collections/graphql/EditFolder.vue

@@ -7,21 +7,27 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlEditFolder">{{ $t("label") }}</label>
-      <input
-        id="selectLabelGqlEditFolder"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="folder.name"
-        @keyup.enter="editFolder"
-      />
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelGqlEditFolder"
+          class="px-4 font-semibold pb-4 text-xs"
+        >
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelGqlEditFolder"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="folder.name"
+          @keyup.enter="editFolder"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="editFolder" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

components/collections/graphql/EditRequest.vue

@@ -7,21 +7,27 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlEditReq">{{ $t("label") }}</label>
-      <input
-        id="selectLabelGqlEditReq"
-        v-model="requestUpdateData.name"
-        class="input"
-        type="text"
-        :placeholder="request.name"
-        @keyup.enter="saveRequest"
-      />
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelGqlEditReq"
+          class="px-4 font-semibold pb-4 text-xs"
+        >
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelGqlEditReq"
+          v-model="requestUpdateData.name"
+          class="input"
+          type="text"
+          :placeholder="request.name"
+          @keyup.enter="saveRequest"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

components/collections/graphql/Folder.vue

@@ -35,6 +35,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="toggleShowChildren()"
       >

components/collections/graphql/ImportExport.vue

@@ -2,7 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-      <div>
+      <div class="flex">
         <tippy
           ref="options"
           interactive
@@ -54,8 +54,8 @@
       </div>
     </template>
     <template #body>
-      <div class="flex flex-col items-start p-2">
-        <ButtonSecondary
+      <div class="flex flex-col space-y-2">
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('replace_current')"
           icon="folder_special"
@@ -70,7 +70,7 @@
           accept="application/json"
           @change="replaceWithJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
           icon="create_new_folder"
@@ -85,7 +85,7 @@
           accept="application/json"
           @change="importFromJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
           icon="drive_file_move"

components/collections/graphql/Request.vue

@@ -36,6 +36,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         @click="!doc ? selectRequest() : {}"
       >