chore: minor ui improvements

README.md

@@ -36,14 +36,14 @@
   <p>
     <a href="https://hoppscotch.io/#gh-light-mode-only" target="_blank">
       <img
-        src="./packages/hoppscotch-app/static/images/banner-light.png"
+        src="./packages/hoppscotch-app/public/images/banner-light.png"
         alt="Hoppscotch"
         width="100%"
       />
     </a>
     <a href="https://hoppscotch.io/#gh-dark-mode-only" target="_blank">
       <img
-        src="./packages/hoppscotch-app/static/images/banner-dark.png"
+        src="./packages/hoppscotch-app/public/images/banner-dark.png"
         alt="Hoppscotch"
         width="100%"
       />

packages/hoppscotch-app/assets/scss/styles.scss

@@ -336,6 +336,7 @@ pre.ace_editor {
         @apply font-semibold;
         @apply leading-body;
         @apply tracking-normal;
+        @apply rounded;
         @apply last: ml-4;
         @apply sm: ml-8;
         @apply before: absolute;
@@ -425,7 +426,7 @@ pre.ace_editor {
 
 .cm-focused {
   @apply select-auto;
-  @apply outline-none;
+  @apply outline-none #{!important};
 
   .cm-activeLine {
     @apply bg-primaryLight;

packages/hoppscotch-app/src/components/app/DeveloperOptions.vue

@@ -6,16 +6,17 @@
     @close="hideModal"
   >
     <template #body>
-      <p class="px-2 mb-8 text-secondaryLight">
+      <p class="px-2 mb-4 text-secondaryLight">
         {{ t("app.developer_option_description") }}
       </p>
       <div class="flex flex-1">
-        <button class="share-link" @click="copyUserAuthToken">
+        <ButtonSecondary
-          <component :is="copyIcon" />
+          outline
-          <span>
+          filled
-            {{ t("app.copy_user_id") }}
+          :icon="copyIcon"
-          </span>
+          :label="t('app.copy_user_id')"
-        </button>
+          @click="copyUserAuthToken"
+        />
       </div>
     </template>
   </SmartModal>
@@ -65,29 +66,3 @@ const hideModal = () => {
   emit("hide-modal")
 }
 </script>
-
-<style lang="scss" scoped>
-.share-link {
-  @apply border border-dividerLight;
-  @apply rounded;
-  @apply flex;
-  @apply p-3;
-  @apply items-center;
-  @apply justify-center;
-  @apply font-semibold;
-  @apply hover: (bg-primaryLight text-secondaryDark);
-  @apply focus: outline-none;
-  @apply focus-visible: border-divider;
-
-  svg {
-    @apply opacity-80;
-    @apply mr-2;
-  }
-
-  &:hover {
-    svg {
-      @apply opacity-100;
-    }
-  }
-}
-</style>

packages/hoppscotch-app/src/components/app/Footer.vue

@@ -139,7 +139,12 @@
               />
               <div
                 class="flex px-4 py-2 opacity-50"
-                @dblclick="showDeveloperOptionModal()"
+                @dblclick="
+                  () => {
+                    showDeveloperOptionModal()
+                    hide()
+                  }
+                "
               >
                 {{ `${t("app.name")} v${version}` }}
               </div>
@@ -271,7 +276,6 @@ const chatWithUs = () => {
 const showDeveloperOptionModal = () => {
   if (currentUser.value) {
     showDeveloperOptions.value = true
-    options.value.tippy().hide()
   }
 }
 

packages/hoppscotch-app/src/components/app/Shortcuts.vue

@@ -13,7 +13,7 @@
             v-model="filterText"
             type="search"
             autocomplete="off"
-            class="flex px-4 py-2 border rounded bg-primaryLight border-dividerLight focus-visible:border-divider"
+            class="flex px-4 py-2 border rounded bg-primaryContrast border-dividerLight focus-visible:border-divider"
             :placeholder="`${t('action.search')}`"
           />
         </div>

packages/hoppscotch-app/src/components/app/SlideOver.vue

@@ -7,7 +7,7 @@
         @keydown.esc="close()"
       >
         <div
-          class="absolute inset-0 bg-primaryLight opacity-90"
+          class="absolute inset-0 bg-primaryLight opacity-90 focus:outline-none"
           tabindex="0"
           @click="close()"
         ></div>

packages/hoppscotch-app/src/components/collections/Add.vue

@@ -23,13 +23,19 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
+          outline
           @click="addNewCollection"
         />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/AddFolder.vue

@@ -23,13 +23,19 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
+          outline
           @click="addFolder"
         />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/AddRequest.vue

@@ -21,13 +21,19 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
+          outline
           @click="addRequest"
         />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/Edit.vue

@@ -23,13 +23,19 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
+          outline
           @click="saveCollection"
         />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/EditFolder.vue

@@ -23,13 +23,19 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
+          outline
           @click="editFolder"
         />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/EditRequest.vue

@@ -23,13 +23,19 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
+          outline
           @click="saveRequest"
         />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/SaveRequest.vue

@@ -43,9 +43,18 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
-        <ButtonPrimary :label="`${t('action.save')}`" @click="saveRequestAs" />
+        <ButtonPrimary
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+          :label="`${t('action.save')}`"
+          outline
+          @click="saveRequestAs"
+        />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/graphql/Add.vue

@@ -23,12 +23,17 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="`${t('action.save')}`"
+          outline
           @click="addNewCollection"
         />
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/graphql/AddFolder.vue

@@ -23,9 +23,14 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
-        <ButtonPrimary :label="t('action.save')" @click="addFolder" />
+        <ButtonPrimary :label="t('action.save')" outline @click="addFolder" />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/graphql/AddRequest.vue

@@ -23,9 +23,14 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
-        <ButtonPrimary :label="t('action.save')" @click="addRequest" />
+        <ButtonPrimary :label="t('action.save')" outline @click="addRequest" />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/graphql/Edit.vue

@@ -23,9 +23,18 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
-        <ButtonPrimary :label="`${t('action.save')}`" @click="saveCollection" />
+        <ButtonPrimary
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+          :label="`${t('action.save')}`"
+          outline
+          @click="saveCollection"
+        />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/graphql/EditFolder.vue

@@ -23,9 +23,18 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
-        <ButtonPrimary :label="`${t('action.save')}`" @click="editFolder" />
+        <ButtonPrimary
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+          :label="`${t('action.save')}`"
+          outline
+          @click="editFolder"
+        />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/graphql/EditRequest.vue

@@ -23,9 +23,18 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
-        <ButtonPrimary :label="`${t('action.save')}`" @click="saveRequest" />
+        <ButtonPrimary
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+          :label="`${t('action.save')}`"
+          outline
+          @click="saveRequest"
+        />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/collections/graphql/index.vue

@@ -73,6 +73,7 @@
       <ButtonSecondary
         :label="t('add.new')"
         filled
+        outline
         @click="displayModalAdd(true)"
       />
     </div>

packages/hoppscotch-app/src/components/collections/index.vue

@@ -128,12 +128,14 @@
         :label="t('add.new')"
         class="mb-4"
         filled
+        outline
       />
       <ButtonSecondary
         v-else
         :label="t('add.new')"
         filled
         class="mb-4"
+        outline
         @click="displayModalAdd(true)"
       />
     </div>

packages/hoppscotch-app/src/components/environments/Details.vue

@@ -101,12 +101,18 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="`${t('action.save')}`"
+          outline
           @click="saveEnvironment"
         />
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/environments/index.vue

@@ -109,6 +109,7 @@
         :label="`${t('add.new')}`"
         filled
         class="mb-4"
+        outline
         @click="displayModalAdd(true)"
       />
     </div>

packages/hoppscotch-app/src/components/http/CodegenModal.vue

@@ -34,7 +34,7 @@
                   v-model="searchQuery"
                   type="search"
                   autocomplete="off"
-                  class="flex w-full p-4 py-2 !bg-popover input"
+                  class="flex w-full p-4 py-2 input !bg-primaryContrast"
                   :placeholder="`${t('action.search')}`"
                 />
               </div>
@@ -94,13 +94,19 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="`${t('action.copy')}`"
           :icon="copyIcon"
+          outline
           @click="copyRequestCode"
         />
-        <ButtonSecondary :label="`${t('action.dismiss')}`" @click="hideModal" />
+        <ButtonSecondary
+          :label="`${t('action.dismiss')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/http/ImportCurl.vue

@@ -14,19 +14,26 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           ref="importButton"
           :label="`${t('import.title')}`"
+          outline
           @click="handleImport"
         />
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
       <span class="flex">
         <ButtonSecondary
           :icon="pasteIcon"
           :label="`${t('action.paste')}`"
           filled
+          outline
           @click="handlePaste"
         />
       </span>

packages/hoppscotch-app/src/components/http/ReqChangeConfirmModal.vue

@@ -7,25 +7,31 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
+      <div class="flex flex-col items-center justify-center">
-        <label>
         {{ t("confirm.request_change") }}
-        </label>
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           v-focus
           :label="t('action.save')"
+          outline
           @click="saveApiChange"
         />
         <ButtonSecondary
           :label="t('action.dont_save')"
+          outline
+          filled
           @click="discardApiChange"
         />
       </span>
-      <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+      <ButtonSecondary
+        :label="t('action.cancel')"
+        outline
+        filled
+        @click="hideModal"
+      />
     </template>
   </SmartModal>
 </template>

packages/hoppscotch-app/src/components/http/Request.vue

@@ -132,8 +132,11 @@
           </template>
         </tippy>
       </span>
+      <span
+        class="flex ml-2 border rounded border-dividerLight hover:border-dividerDark transition"
+      >
         <ButtonSecondary
-        class="flex-1 ml-2 rounded rounded-r-none"
+          class="flex-1 rounded rounded-r-none"
           :label="COLUMN_LAYOUT ? `${t('request.save')}` : ''"
           filled
           :icon="IconSave"
@@ -161,7 +164,7 @@
                 name="request-name"
                 type="text"
                 autocomplete="off"
-              class="mb-2 input"
+                class="mb-2 input !bg-primaryContrast"
                 @keyup.enter="hide()"
               />
               <div
@@ -207,6 +210,7 @@
             </template>
           </tippy>
         </span>
+      </span>
     </div>
     <HttpImportCurl
       :text="curlText"

packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue

@@ -18,7 +18,7 @@
               v-model="searchQuery"
               type="search"
               autocomplete="off"
-              class="flex w-full p-4 py-2 !bg-popover input"
+              class="flex w-full p-4 py-2 input !bg-primaryContrast"
               :placeholder="`${t('action.search')}`"
             />
           </div>

packages/hoppscotch-app/src/components/smart/ConfirmModal.vue

@@ -13,14 +13,20 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           v-focus
           :label="yes ?? t('action.yes')"
           :loading="!!loadingState"
+          outline
           @click="resolve"
         />
-        <ButtonSecondary :label="no ?? t('action.no')" @click="hideModal" />
+        <ButtonSecondary
+          :label="no ?? t('action.no')"
+          filled
+          outline
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/smart/Modal.vue

@@ -18,7 +18,7 @@
             @mousedown="!dialog ? close() : null"
           >
             <div
-              class="absolute inset-0 opacity-80 bg-primaryLight"
+              class="absolute inset-0 opacity-80 bg-primaryLight focus:outline-none"
               tabindex="0"
               @click="!dialog ? close() : null"
             ></div>

packages/hoppscotch-app/src/components/teams/Add.vue

@@ -18,13 +18,19 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="t('action.save')"
           :loading="isLoading"
+          outline
           @click="addNewTeam"
         />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/teams/Edit.vue

@@ -176,13 +176,19 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="t('action.save')"
           :loading="isLoading"
+          outline
           @click="saveTeam"
         />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>

packages/hoppscotch-app/src/components/teams/Invite.vue

@@ -294,8 +294,8 @@
         v-if="sendInvitesResult.length"
         class="flex justify-between flex-1 text-secondaryLight"
       >
-        <SmartAnchor
+        <ButtonSecondary
-          class="link"
+          class="link !p-0"
           :label="t('team.invite_more')"
           :icon="IconArrowLeft"
           @click="
@@ -310,15 +310,20 @@
             }
           "
         />
-        <SmartAnchor
+        <ButtonSecondary
-          class="link"
+          class="link !p-0"
           :label="`${t('action.dismiss')}`"
           @click="hideModal"
         />
       </p>
-      <span v-else>
+      <span v-else class="flex space-x-2">
-        <ButtonPrimary :label="t('team.invite')" @click="sendInvites" />
+        <ButtonPrimary :label="t('team.invite')" outline @click="sendInvites" />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>