refactor: modals

components/collections/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="selectLabelAdd">{{ $t("label") }}</label>
-      <input
-        id="selectLabelAdd"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="$t('my_new_collection')"
-        @keyup.enter="addNewCollection"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelAdd" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelAdd"
+          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/AddFolder.vue

@@ -7,21 +7,27 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelAddFolder">{{ $t("label") }}</label>
-      <input
-        id="selectLabelAddFolder"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="$t('my_new_folder')"
-        @keyup.enter="addFolder"
-      />
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelAddFolder"
+          class="px-4 font-semibold pb-4 text-xs"
+        >
+          {{ $t("label") }}
+        </label>
+        <input
+          id="selectLabelAddFolder"
+          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/Edit.vue

@@ -7,21 +7,24 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEdit">{{ $t("label") }}</label>
-      <input
-        id="selectLabelEdit"
-        v-model="name"
-        class="input"
-        type="text"
-        :placeholder="placeholderCollName"
-        @keyup.enter="saveCollection"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelEdit" class="px-4 font-semibold pb-4 text-xs">{{
+          $t("label")
+        }}</label>
+        <input
+          id="selectLabelEdit"
+          v-model="name"
+          class="input"
+          type="text"
+          :placeholder="placeholderCollName"
+          @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/EditFolder.vue

@@ -7,20 +7,25 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEditFolder">{{ $t("label") }}</label>
-      <input
-        id="selectLabelEditFolder"
-        v-model="name"
-        class="input"
-        type="text"
-        @keyup.enter="editFolder"
-      />
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelEditFolder"
+          class="px-4 font-semibold pb-4 text-xs"
+          >{{ $t("label") }}</label
+        >
+        <input
+          id="selectLabelEditFolder"
+          v-model="name"
+          class="input"
+          type="text"
+          @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/EditRequest.vue

@@ -7,21 +7,24 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEditReq">{{ $t("label") }}</label>
-      <input
-        id="selectLabelEditReq"
-        v-model="requestUpdateData.name"
-        class="input"
-        type="text"
-        :placeholder="placeholderReqName"
-        @keyup.enter="saveRequest"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelEditReq" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}</label
+        >
+        <input
+          id="selectLabelEditReq"
+          v-model="requestUpdateData.name"
+          class="input"
+          type="text"
+          :placeholder="placeholderReqName"
+          @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/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">
         <ButtonSecondary
           v-if="mode == 'import_from_my_collections'"
           v-tippy="{ theme: 'tooltip' }"
@@ -67,8 +67,8 @@
       </div>
     </template>
     <template #body>
-      <div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
-        <ButtonSecondary
+      <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('replace_current')"
           icon="folder_special"
@@ -83,7 +83,7 @@
           accept="application/json"
           @change="replaceWithJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
           icon="create_new_folder"
@@ -98,7 +98,7 @@
           accept="application/json"
           @change="importFromJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-if="collectionsType.type == 'team-collections'"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
@@ -106,7 +106,7 @@
           :label="$t('import_from_my_collections')"
           @click.native="mode = 'import_from_my_collections'"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
           icon="drive_file_move"
@@ -114,8 +114,11 @@
           @click.native="exportJSON"
         />
       </div>
-      <div v-if="mode == 'import_from_my_collections'">
-        <span class="select-wrapper">
+      <div
+        v-if="mode == 'import_from_my_collections'"
+        class="flex px-2 flex-col"
+      >
+        <div class="select-wrapper">
           <select
             type="text"
             class="select"
@@ -143,15 +146,13 @@
               {{ collection.name }}
             </option>
           </select>
-        </span>
+        </div>
       </div>
     </template>
     <template #footer>
       <div v-if="mode == 'import_from_my_collections'">
-        <span></span>
         <span>
-          <ButtonSecondary
-            class="m-2"
+          <ButtonPrimary
             :disabled="mySelectedCollectionID == undefined"
             icon="create_new_folder"
             :label="$t('import')"

components/collections/SaveRequest.vue

@@ -2,45 +2,45 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("save_request_as") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <label for="selectLabelSaveReq">{{ $t("token_req_name") }}</label>
-      <input
-        id="selectLabelSaveReq"
-        v-model="requestData.name"
-        class="input"
-        type="text"
-        @keyup.enter="saveRequestAs"
-      />
-      <label>Select location</label>
-      <!-- <input class="input" readonly :value="path" /> -->
-
-      <CollectionsGraphql
-        v-if="mode === 'graphql'"
-        :doc="false"
-        :show-coll-actions="false"
-        :picked="picked"
-        :saving-mode="true"
-        @select="onSelect"
-      />
-
-      <Collections
-        v-else
-        :picked="picked"
-        :save-request="true"
-        @select="onSelect"
-        @update-collection="collectionsType.type = $event"
-        @update-coll-type="onUpdateCollType"
-      />
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelSaveReq" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("token_req_name") }}</label
+        >
+        <input
+          id="selectLabelSaveReq"
+          v-model="requestData.name"
+          class="input"
+          type="text"
+          @keyup.enter="saveRequestAs"
+        />
+        <label class="px-4 pt-4 font-semibold pb-4 text-xs">
+          Select Location
+        </label>
+        <CollectionsGraphql
+          v-if="mode === 'graphql'"
+          :doc="false"
+          :show-coll-actions="false"
+          :picked="picked"
+          :saving-mode="true"
+          @select="onSelect"
+        />
+        <Collections
+          v-else
+          :picked="picked"
+          :save-request="true"
+          @select="onSelect"
+          @update-collection="collectionsType.type = $event"
+          @update-coll-type="onUpdateCollType"
+        />
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveRequestAs" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

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() : {}"
       >

components/collections/my/Collection.vue

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

components/collections/my/Folder.vue

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

components/collections/my/Request.vue

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

components/collections/teams/Collection.vue

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

components/collections/teams/Folder.vue

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

components/collections/teams/Request.vue

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