refactor: modals

assets/scss/styles.scss

@@ -162,12 +162,24 @@ hr {
   @apply text-lg;
 }
 
-input {
+.input,
+.select {
+  @apply flex;
+  @apply w-full;
+  @apply px-4;
+  @apply py-2;
+  @apply bg-primaryLight;
   @apply truncate;
+  @apply rounded-lg;
+  @apply font-semibold;
+  @apply focus:outline-none;
+  @apply focus-visible:ring;
+  @apply focus-visible:ring-inset;
+  @apply focus-visible:ring-accent;
 }
 
-input[type="file"],
-input[type="radio"],
+.input[type="file"],
+.input[type="radio"],
 #installPWA {
   @apply hidden;
 }

assets/scss/themes.scss

@@ -6,27 +6,27 @@
 
 @mixin darkTheme {
   // Background color
-  --primary-color: rgba(32, 33, 36, 1);
+  --primary-color: theme("colors.dark.800");
   // Light Background color
-  --primary-light-color: rgba(255, 255, 255, 0.04);
+  --primary-light-color: theme("colors.dark.700");
   // Dark Background color
-  --primary-dark-color: rgba(12, 12, 12, 1);
+  --primary-dark-color: theme("colors.dark.600");
   // Text color
-  --secondary-color: rgba(255, 255, 255, 0.9);
+  --secondary-color: theme("colors.gray.400");
   // Light Text color
-  --secondary-light-color: rgba(255, 255, 255, 0.5);
+  --secondary-light-color: theme("colors.gray.500");
   // Dark Text color
-  --secondary-dark-color: rgba(0, 0, 0, 0.5);
+  --secondary-dark-color: theme("colors.white");
   // Border color
-  --divider-color: rgba(255, 255, 255, 0.05);
+  --divider-color: theme("colors.dark.500");
   // Light Border color
-  --divider-light-color: rgba(255, 255, 255, 0.05);
+  --divider-light-color: theme("colors.dark.400");
   // Dark Border color
-  --divider-dark-color: rgba(255, 255, 255, 0.05);
+  --divider-dark-color: theme("colors.dark.700");
   // Error color
-  --error-color: rgba(255, 255, 255, 0.05);
+  --error-color: theme("colors.dark.600");
   // Tooltip color
-  --tooltip-color: rgba(48, 48, 48, 1);
+  --tooltip-color: theme("colors.dark.700");
   // Editor theme
   --editor-theme: "twilight";
 }
@@ -102,11 +102,11 @@
 
 @mixin greenTheme {
   // Accent color
-  --accent-color: rgba(73, 204, 104, 1);
+  --accent-color: rgb(97, 207, 123);
   // Light Accent color
   --accent-light-color: rgba(73, 204, 104, 1);
   // Dark Accent color
-  --accent-dark-color: rgba(64, 182, 91, 1);
+  --accent-dark-color: rgb(0, 71, 17);
   // Gradient from
   --gradient-from-color: theme("colors.green.200");
   // Gradient via
@@ -226,15 +226,15 @@
   @include greenTheme;
 }
 
-:root.light-mode {
+:root.light {
   @include lightTheme;
 }
 
-:root.dark-mode {
+:root.dark {
   @include darkTheme;
 }
 
-:root.black-mode {
+:root.black {
   @include blackTheme;
 }
 

components/app/Shortcuts.vue

@@ -7,61 +7,30 @@
       </div>
     </template>
     <template #body>
-      <div class="p-2">
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd>
-          +
-          <kbd>G</kbd>
-          <label>{{ $t("send_request") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>S</kbd>
-          <label>{{ $t("save_to_collections") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>K</kbd>
-          <label>{{ $t("copy_request_link") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>I</kbd>
-          <label>{{ $t("reset_request") }}</label>
-        </div>
-      </div>
-      <hr />
-      <div class="p-2">
-        <div>
-          <kbd>Alt</kbd>+<kbd>▲</kbd>
-          <label>{{ $t("select_next_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>▼</kbd>
-          <label>{{ $t("select_previous_method") }}</label>
-        </div>
-      </div>
-      <hr />
-      <div class="p-2">
-        <div>
-          <kbd>Alt</kbd>+<kbd>G</kbd>
-          <label>{{ $t("select_get_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>H</kbd>
-          <label>{{ $t("select_head_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>P</kbd>
-          <label>{{ $t("select_post_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>U</kbd>
-          <label>{{ $t("select_put_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>X</kbd>
-          <label>{{ $t("select_delete_method") }}</label>
+      <div class="px-2">
+        <div
+          v-for="(shortcut, index) in shortcuts"
+          :key="`shortcut-${index}`"
+          class="flex items-center"
+        >
+          <kbd
+            v-for="(key, keyIndex) in shortcut.keys"
+            :key="`key-${keyIndex}`"
+            class="
+              py-2
+              px-4
+              m-1
+              text-xs
+              border border-divider
+              rounded-lg
+              font-bold
+            "
+          >
+            {{ key }}
+          </kbd>
+          <span class="flex text-xs ml-4">
+            {{ shortcut.label }}
+          </span>
         </div>
       </div>
     </template>
@@ -75,6 +44,56 @@ export default {
   props: {
     show: Boolean,
   },
+  data() {
+    return {
+      shortcuts: [
+        {
+          keys: [this.getSpecialKey(), "G"],
+          label: this.$t("send_request"),
+        },
+        {
+          keys: [this.getSpecialKey(), "S"],
+          label: this.$t("save_to_collections"),
+        },
+        {
+          keys: [this.getSpecialKey(), "K"],
+          label: this.$t("copy_request_link"),
+        },
+        {
+          keys: [this.getSpecialKey(), "I"],
+          label: this.$t("reset_request"),
+        },
+        {
+          keys: ["Alt", "▲"],
+          label: this.$t("select_next_method"),
+        },
+        {
+          keys: ["Alt", "▼"],
+          label: this.$t("select_previous_method"),
+        },
+        {
+          keys: ["Alt", "G"],
+          label: this.$t("select_get_method"),
+        },
+        {
+          keys: ["Alt", "H"],
+          label: this.$t("select_head_method"),
+        },
+        {
+          keys: ["Alt", "P"],
+          label: this.$t("select_post_method"),
+        },
+        {
+          keys: ["Alt", "U"],
+          label: this.$t("select_put_method"),
+        },
+        {
+          keys: ["Alt", "X"],
+          label: this.$t("select_delete_method"),
+        },
+      ],
+    }
+  },
   methods: {
     getSpecialKey: getPlatformSpecialKey,
     hideModal() {
@@ -83,14 +102,3 @@ export default {
   },
 }
 </script>
-
-<style scoped lang="scss">
-kbd {
-  @apply inline-flex;
-  @apply resize-none;
-  @apply m-2;
-  @apply py-2 px-4;
-  @apply rounded-lg;
-  @apply text-sm;
-}
-</style>

components/button/Primary.vue

@@ -15,7 +15,7 @@
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
-        : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
+        : `text-white dark:text-accentDark bg-accent hover:bg-accentDark focus:bg-accentDark`,
       label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded-lg',
       { 'opacity-50 cursor-not-allowed': disabled },

components/collections/Add.vue

@@ -2,12 +2,13 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("new_collection") }}</h3>
-      <div>
       <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
-      <label for="selectLabelAdd">{{ $t("label") }}</label>
+      <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"
@@ -16,12 +17,12 @@
           :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,7 +7,13 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelAddFolder">{{ $t("label") }}</label>
+      <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"
@@ -16,12 +22,12 @@
           :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,7 +7,10 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEdit">{{ $t("label") }}</label>
+      <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"
@@ -16,12 +19,12 @@
           :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,7 +7,12 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEditFolder">{{ $t("label") }}</label>
+      <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"
@@ -15,12 +20,12 @@
           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,7 +7,10 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEditReq">{{ $t("label") }}</label>
+      <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"
@@ -16,12 +19,12 @@
           :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,12 +2,13 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("save_request_as") }}</h3>
-      <div>
       <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
-      <label for="selectLabelSaveReq">{{ $t("token_req_name") }}</label>
+      <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"
@@ -15,9 +16,9 @@
           type="text"
           @keyup.enter="saveRequestAs"
         />
-      <label>Select location</label>
-      <!-- <input class="input" readonly :value="path" /> -->
-
+        <label class="px-4 pt-4 font-semibold pb-4 text-xs">
+          Select Location
+        </label>
         <CollectionsGraphql
           v-if="mode === 'graphql'"
           :doc="false"
@@ -26,7 +27,6 @@
           :saving-mode="true"
           @select="onSelect"
         />
-
         <Collections
           v-else
           :picked="picked"
@@ -35,12 +35,12 @@
           @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,12 +2,13 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("new_collection") }}</h3>
-      <div>
       <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlAdd">{{ $t("label") }}</label>
+      <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"
@@ -16,12 +17,12 @@
           :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,7 +7,13 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlAddFolder">{{ $t("label") }}</label>
+      <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"
@@ -16,12 +22,12 @@
           :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,7 +7,10 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlEdit">{{ $t("label") }}</label>
+      <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"
@@ -16,12 +19,12 @@
           :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,7 +7,13 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlEditFolder">{{ $t("label") }}</label>
+      <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"
@@ -16,12 +22,12 @@
           :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,7 +7,13 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelGqlEditReq">{{ $t("label") }}</label>
+      <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"
@@ -16,12 +22,12 @@
           :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() : {}"
       >

components/environments/Add.vue

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

components/environments/Edit.vue

@@ -7,7 +7,10 @@
       </div>
     </template>
     <template #body>
-      <label for="selectLabelEnvEdit">{{ $t("label") }}</label>
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelEnvEdit" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
         <input
           id="selectLabelEnvEdit"
           v-model="name"
@@ -16,13 +19,18 @@
           :placeholder="editingEnvironment.name"
           @keyup.enter="saveEnvironment"
         />
-      <div class="flex flex-1">
-        <label for="variableList">{{ $t("env_variable_list") }}</label>
+        <div class="flex justify-between items-center flex-1">
+          <label
+            for="variableList"
+            class="px-4 pt-4 font-semibold pb-4 text-xs"
+          >
+            {{ $t("env_variable_list") }}
+          </label>
           <div>
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
-            icon="clearIcon"
+              :icon="clearIcon"
               @click.native="clearContent($event)"
             />
           </div>
@@ -77,12 +85,12 @@
             />
           </li>
         </ul>
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveEnvironment" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

components/environments/Environment.vue

@@ -24,6 +24,7 @@
         text-xs
         group-hover:text-secondaryDark
         transition
+        font-semibold
       "
       @click="$emit('edit-environment')"
     >

components/environments/ImportExport.vue

@@ -4,7 +4,7 @@
       <h3 class="heading">
         {{ $t("import_export") }} {{ $t("environments") }}
       </h3>
-      <div>
+      <div class="flex">
         <tippy
           ref="options"
           interactive
@@ -56,8 +56,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"
@@ -72,7 +72,7 @@
           accept="application/json"
           @change="replaceWithJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
           icon="create_new_folder"
@@ -87,7 +87,7 @@
           accept="application/json"
           @change="importFromJSON"
         />
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
           icon="drive_file_move"

components/graphql/Field.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="font-bold text-xs field-title"
+      class="font-semibold text-xs field-title"
       :class="{ 'field-highlighted': isHighlighted }"
     >
       {{ fieldName }}
@@ -38,7 +38,7 @@
         text-xs text-black
         bg-yellow-200
         rounded
-        font-bold
+        font-semibold
         field-deprecated
       "
     >
@@ -48,7 +48,7 @@
       <h5 class="my-2 text-xs">Arguments:</h5>
       <div class="pl-4 border-l-2 border-divider">
         <div v-for="(field, index) in fieldArgs" :key="index">
-          <span class="font-bold text-xs">
+          <span class="font-semibold text-xs">
             {{ field.name }}:
             <GraphqlTypeLink
               :gql-type="field.type"

components/graphql/Type.vue

@@ -1,7 +1,7 @@
 <template>
   <div :id="`type_${gqlType.name}`" class="p-4">
     <div
-      class="font-bold text-xs type-title"
+      class="font-semibold text-xs type-title"
       :class="{ 'text-accent': isHighlighted }"
     >
       <span v-if="isInput" class="text-accent">input </span>

components/history/graphql/Card.vue

@@ -12,6 +12,7 @@
           text-xs
           group-hover:text-secondaryDark
           transition
+          font-semibold
         "
         data-testid="restore_history_entry"
         @click="$emit('use-entry')"

components/history/rest/Card.vue

@@ -28,6 +28,7 @@
         text-xs
         group-hover:text-secondaryDark
         transition
+        font-semibold
       "
       data-testid="restore_history_entry"
       @click="$emit('use-entry')"

components/http/CodegenModal.vue

@@ -2,12 +2,14 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("generate_code") }}</h3>
-      <div>
       <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
-      <label for="requestType">{{ $t("choose_language") }}</label>
+      <div class="px-2 flex flex-col">
+        <label for="requestType" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("choose_language") }}
+        </label>
+        <div class="flex flex-1">
           <span class="select-wrapper">
             <tippy
               ref="options"
@@ -18,18 +20,23 @@
               arrow
             >
               <template #trigger>
-            <pre v-if="requestType">{{
-              codegens.find((x) => x.id === requestType).name
-            }}</pre>
-            <input
-              v-else
-              id="requestType"
-              v-model="requestType"
-              :placeholder="$t('choose_language')"
-              class="input cursor-pointer"
-              readonly
-              autofocus
-            />
+                <span
+                  class="
+                    flex
+                    w-full
+                    px-4
+                    text-xs
+                    py-3
+                    rounded-lg
+                    font-semibold
+                    focus:outline-none
+                    border-b border-dividerLight
+                    bg-primaryLight
+                    cursor-pointer
+                  "
+                >
+                  {{ codegens.find((x) => x.id === requestType).name }}
+                </span>
               </template>
               <SmartItem
                 v-for="gen in codegens"
@@ -42,9 +49,14 @@
               />
             </tippy>
           </span>
-      <div class="flex flex-1">
-        <label for="generatedCode">{{ $t("generated_code") }}</label>
-        <div>
+        </div>
+        <div class="flex justify-between flex-1">
+          <label
+            for="generatedCode"
+            class="px-4 pt-4 font-semibold pb-4 text-xs"
+          >
+            {{ $t("generated_code") }}
+          </label>
           <ButtonSecondary
             ref="copyRequestCode"
             v-tippy="{ theme: 'tooltip' }"
@@ -53,7 +65,6 @@
             @click.native="copyRequestCode"
           />
         </div>
-      </div>
         <SmartAceEditor
           v-if="requestType"
           ref="generatedCode"
@@ -68,8 +79,9 @@
             showPrintMargin: false,
             useWorker: false,
           }"
-        styles="rounded-b-lg"
+          styles="rounded-lg"
         />
+      </div>
     </template>
   </SmartModal>
 </template>

components/http/ImportCurl.vue

@@ -16,10 +16,9 @@
       ></textarea>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('import')" @click.native="handleImport" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

components/smart/ConfirmModal.vue

@@ -7,13 +7,16 @@
       </div>
     </template>
     <template #body>
-      <label>{{ title }}</label>
+      <div class="px-2 flex flex-col">
+        <label class="font-semibold text-xs">
+          {{ title }}
+        </label>
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="no" @click.native="hideModal" />
         <ButtonPrimary :label="yes" @click.native="resolve" />
+        <ButtonSecondary :label="no" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

components/smart/Modal.vue

@@ -30,26 +30,23 @@
           bg-primary
           rounded-lg
           shadow-xl
-          max-w-md
+          max-w-md max-h-lg
         "
       >
-        <div class="pl-2">
-          <div class="flex items-center justify-between">
+        <div class="flex pl-2 items-center justify-between">
           <slot name="header"></slot>
         </div>
-        </div>
-        <div class="my-4 overflow-auto max-h-xl">
-          <div class="flex flex-col">
+        <div class="my-4 overflow-auto flex flex-col">
           <slot name="body"></slot>
         </div>
-        </div>
-        <div v-if="hasFooterSlot" class="p-2">
-          <div class="flex flex-1">
+        <div
+          v-if="hasFooterSlot"
+          class="p-2 flex flex-1 items-center justify-between"
+        >
           <slot name="footer"></slot>
         </div>
       </div>
     </div>
-    </div>
   </transition>
 </template>
 
@@ -138,46 +135,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.modal-backdrop {
-  @apply fixed;
-  @apply inset-0;
-  @apply z-50;
-  @apply w-full;
-  @apply h-full;
-  @apply flex;
-  @apply items-center;
-  @apply justify-center;
-  @apply transition;
-
-  @apply bg-primaryLight;
-}
-
-.modal-container {
-  @apply relative;
-  @apply flex flex-1 flex-col;
-  @apply m-2;
-  @apply p-4;
-  @apply transition;
-  @apply bg-primary;
-  @apply rounded-lg;
-  @apply shadow-xl;
-  @apply max-w-md;
-}
-
-.modal-header {
-  @apply pl-2;
-}
-
-.modal-body {
-  @apply my-4;
-  @apply overflow-auto;
-  @apply max-h-xl;
-}
-
-.modal-footer {
-  @apply p-2;
-}
-
 .modal-enter,
 .modal-leave-active {
   @apply opacity-0;

components/teams/Add.vue

@@ -5,28 +5,24 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <ul>
-        <li>
-          <label>{{ $t("label") }}</label>
-        </li>
-      </ul>
-      <ul>
-        <li>
+      <div class="px-2 flex flex-col">
+        <label for="selectLabelTeamAdd" class="px-4 font-semibold pb-4 text-xs">
+          {{ $t("label") }}
+        </label>
         <input
+          id="selectLabelTeamAdd"
           v-model="name"
           class="input"
           type="text"
           :placeholder="$t('my_new_team')"
           @keyup.enter="addNewTeam"
         />
-        </li>
-      </ul>
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="addNewTeam" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

components/teams/Edit.vue

@@ -5,32 +5,24 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <ul>
-        <li>
-          <div class="flex flex-1">
-            <label>{{ $t("label") }}</label>
-          </div>
-        </li>
-      </ul>
-      <ul>
-        <li>
+      <div class="px-2 flex flex-col">
+        <label
+          for="selectLabelTeamEdit"
+          class="px-4 font-semibold pb-4 text-xs"
+        >
+          {{ $t("label") }}
+        </label>
         <input
+          id="selectLabelTeamEdit"
           v-model="name"
           class="input"
           type="text"
           :placeholder="editingTeam.name"
           @keyup.enter="saveTeam"
         />
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <div class="flex flex-1">
-            <label for="memberList">{{ $t("team_member_list") }}</label>
-            <div></div>
-          </div>
-        </li>
-      </ul>
+        <label for="memberList" class="px-4 pt-4 font-semibold pb-4 text-xs">
+          {{ $t("team_member_list") }}
+        </label>
         <ul
           v-for="(member, index) in members"
           :key="`new-${index}`"
@@ -201,12 +193,12 @@
             />
           </li>
         </ul>
+      </div>
     </template>
     <template #footer>
-      <span></span>
       <span>
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
         <ButtonPrimary :label="$t('save')" @click.native="saveTeam" />
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>
   </SmartModal>

nuxt.config.js

@@ -361,6 +361,11 @@ export default {
     },
   },
 
+  // https://github.com/nuxt-community/color-mode-module
+  colorMode: {
+    classSuffix: "",
+  },
+
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
     transpile: ["three"],