From 1b23c5ea4a51eefa6011b0522e40aa369649d9ae Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 30 Sep 2022 09:47:12 +0530
Subject: [PATCH] chore: minor ui improvements

---
 README.md                                     |   4 +-
 .../hoppscotch-app/assets/scss/styles.scss    |  21 +--
 .../src/components/app/DeveloperOptions.vue   |  41 +----
 .../src/components/app/Footer.vue             |   8 +-
 .../src/components/app/Shortcuts.vue          |   2 +-
 .../src/components/app/SlideOver.vue          |   2 +-
 .../src/components/collections/Add.vue        |  10 +-
 .../src/components/collections/AddFolder.vue  |  10 +-
 .../src/components/collections/AddRequest.vue |  10 +-
 .../src/components/collections/Edit.vue       |  10 +-
 .../src/components/collections/EditFolder.vue |  10 +-
 .../components/collections/EditRequest.vue    |  10 +-
 .../components/collections/SaveRequest.vue    |  15 +-
 .../components/collections/graphql/Add.vue    |   9 +-
 .../collections/graphql/AddFolder.vue         |  11 +-
 .../collections/graphql/AddRequest.vue        |  11 +-
 .../components/collections/graphql/Edit.vue   |  15 +-
 .../collections/graphql/EditFolder.vue        |  15 +-
 .../collections/graphql/EditRequest.vue       |  15 +-
 .../components/collections/graphql/index.vue  |   1 +
 .../src/components/collections/index.vue      |   2 +
 .../src/components/environments/Details.vue   |  10 +-
 .../src/components/environments/index.vue     |   1 +
 .../src/components/http/CodegenModal.vue      |  12 +-
 .../src/components/http/ImportCurl.vue        |  11 +-
 .../components/http/ReqChangeConfirmModal.vue |  18 ++-
 .../src/components/http/Request.vue           | 148 +++++++++---------
 .../src/components/smart/ChangeLanguage.vue   |   2 +-
 .../src/components/smart/ConfirmModal.vue     |  10 +-
 .../src/components/smart/Modal.vue            |   2 +-
 .../src/components/teams/Add.vue              |  10 +-
 .../src/components/teams/Edit.vue             |  10 +-
 .../src/components/teams/Invite.vue           |  19 ++-
 33 files changed, 304 insertions(+), 181 deletions(-)

diff --git a/README.md b/README.md
index 937a6423..f9936711 100644
--- a/README.md
+++ b/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%"
       />
diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 85bcef67..4b213b6a 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -185,7 +185,7 @@ a {
   @apply flex flex-1;
 }
 
-[interactive]>div {
+[interactive] > div {
   @apply flex flex-1;
   @apply h-full;
 }
@@ -232,7 +232,7 @@ button {
   @apply hidden;
 }
 
-.floating-input~label {
+.floating-input ~ label {
   @apply absolute;
   @apply px-2 py-0.5;
   @apply m-2;
@@ -241,8 +241,8 @@ button {
   @apply origin-top-left;
 }
 
-.floating-input:focus-within~label,
-.floating-input:not(:placeholder-shown)~label {
+.floating-input:focus-within ~ label,
+.floating-input:not(:placeholder-shown) ~ label {
   @apply bg-primary;
   @apply transform;
   @apply origin-top-left;
@@ -250,7 +250,7 @@ button {
   @apply translate-x-1 -translate-y-4;
 }
 
-.floating-input:focus-within~label {
+.floating-input:focus-within ~ label {
   @apply text-secondaryDark;
 }
 
@@ -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;
@@ -397,7 +398,7 @@ pre.ace_editor {
   @apply bg-primaryLight;
 }
 
-.smart-splitter.splitpanes--vertical>.splitpanes__splitter {
+.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
   @apply w-1;
   @apply before: -left-0.5;
   @apply before: -right-0.5;
@@ -405,7 +406,7 @@ pre.ace_editor {
   @apply after: content-["\e5d4"];
 }
 
-.smart-splitter.splitpanes--horizontal>.splitpanes__splitter {
+.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
   @apply h-1;
   @apply before: -top-0.5;
   @apply before: -bottom-0.5;
@@ -413,19 +414,19 @@ pre.ace_editor {
   @apply after: content-["\e5d3"];
 }
 
-.no-splitter.splitpanes--vertical>.splitpanes__splitter {
+.no-splitter.splitpanes--vertical > .splitpanes__splitter {
   @apply w-0.5;
   @apply pointer-events-none;
 }
 
-.no-splitter.splitpanes--horizontal>.splitpanes__splitter {
+.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
   @apply h-0.5;
   @apply pointer-events-none;
 }
 
 .cm-focused {
   @apply select-auto;
-  @apply outline-none;
+  @apply outline-none #{!important};
 
   .cm-activeLine {
     @apply bg-primaryLight;
diff --git a/packages/hoppscotch-app/src/components/app/DeveloperOptions.vue b/packages/hoppscotch-app/src/components/app/DeveloperOptions.vue
index e18e0596..02d4f8ea 100644
--- a/packages/hoppscotch-app/src/components/app/DeveloperOptions.vue
+++ b/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">
-          <component :is="copyIcon" />
-          <span>
-            {{ t("app.copy_user_id") }}
-          </span>
-        </button>
+        <ButtonSecondary
+          outline
+          filled
+          :icon="copyIcon"
+          :label="t('app.copy_user_id')"
+          @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>
diff --git a/packages/hoppscotch-app/src/components/app/Footer.vue b/packages/hoppscotch-app/src/components/app/Footer.vue
index 5e37b064..1bc0cd77 100644
--- a/packages/hoppscotch-app/src/components/app/Footer.vue
+++ b/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()
   }
 }
 
diff --git a/packages/hoppscotch-app/src/components/app/Shortcuts.vue b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
index fe60e7ab..7d8af1ba 100644
--- a/packages/hoppscotch-app/src/components/app/Shortcuts.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/app/SlideOver.vue b/packages/hoppscotch-app/src/components/app/SlideOver.vue
index d8b83300..2ba7b25e 100644
--- a/packages/hoppscotch-app/src/components/app/SlideOver.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/collections/Add.vue b/packages/hoppscotch-app/src/components/collections/Add.vue
index 76bab2de..d11d0fdc 100644
--- a/packages/hoppscotch-app/src/components/collections/Add.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/collections/AddFolder.vue b/packages/hoppscotch-app/src/components/collections/AddFolder.vue
index d763b5e6..0a1c7f79 100644
--- a/packages/hoppscotch-app/src/components/collections/AddFolder.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/collections/AddRequest.vue b/packages/hoppscotch-app/src/components/collections/AddRequest.vue
index 6073613b..68f76c89 100644
--- a/packages/hoppscotch-app/src/components/collections/AddRequest.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/collections/Edit.vue b/packages/hoppscotch-app/src/components/collections/Edit.vue
index b38128a9..80383828 100644
--- a/packages/hoppscotch-app/src/components/collections/Edit.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/collections/EditFolder.vue b/packages/hoppscotch-app/src/components/collections/EditFolder.vue
index 1dba663c..659986fc 100644
--- a/packages/hoppscotch-app/src/components/collections/EditFolder.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/collections/EditRequest.vue b/packages/hoppscotch-app/src/components/collections/EditRequest.vue
index 0e9c4981..22ab6df3 100644
--- a/packages/hoppscotch-app/src/components/collections/EditRequest.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/collections/SaveRequest.vue b/packages/hoppscotch-app/src/components/collections/SaveRequest.vue
index 83689346..9fb8f08b 100644
--- a/packages/hoppscotch-app/src/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-app/src/components/collections/SaveRequest.vue
@@ -43,9 +43,18 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
-        <ButtonPrimary :label="`${t('action.save')}`" @click="saveRequestAs" />
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+      <span class="flex space-x-2">
+        <ButtonPrimary
+          :label="`${t('action.save')}`"
+          outline
+          @click="saveRequestAs"
+        />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/Add.vue b/packages/hoppscotch-app/src/components/collections/graphql/Add.vue
index 038d962b..85566f8e 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/Add.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/AddFolder.vue b/packages/hoppscotch-app/src/components/collections/graphql/AddFolder.vue
index ce5106e8..5d080fb5 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/AddFolder.vue
+++ b/packages/hoppscotch-app/src/components/collections/graphql/AddFolder.vue
@@ -23,9 +23,14 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
-        <ButtonPrimary :label="t('action.save')" @click="addFolder" />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+      <span class="flex space-x-2">
+        <ButtonPrimary :label="t('action.save')" outline @click="addFolder" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/AddRequest.vue b/packages/hoppscotch-app/src/components/collections/graphql/AddRequest.vue
index 45698d56..9d918169 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/AddRequest.vue
+++ b/packages/hoppscotch-app/src/components/collections/graphql/AddRequest.vue
@@ -23,9 +23,14 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
-        <ButtonPrimary :label="t('action.save')" @click="addRequest" />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+      <span class="flex space-x-2">
+        <ButtonPrimary :label="t('action.save')" outline @click="addRequest" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/Edit.vue b/packages/hoppscotch-app/src/components/collections/graphql/Edit.vue
index 732a2ba3..3058d6d5 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/Edit.vue
+++ b/packages/hoppscotch-app/src/components/collections/graphql/Edit.vue
@@ -23,9 +23,18 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
-        <ButtonPrimary :label="`${t('action.save')}`" @click="saveCollection" />
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+      <span class="flex space-x-2">
+        <ButtonPrimary
+          :label="`${t('action.save')}`"
+          outline
+          @click="saveCollection"
+        />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/EditFolder.vue b/packages/hoppscotch-app/src/components/collections/graphql/EditFolder.vue
index e6e5ea73..0de42b60 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/EditFolder.vue
+++ b/packages/hoppscotch-app/src/components/collections/graphql/EditFolder.vue
@@ -23,9 +23,18 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
-        <ButtonPrimary :label="`${t('action.save')}`" @click="editFolder" />
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+      <span class="flex space-x-2">
+        <ButtonPrimary
+          :label="`${t('action.save')}`"
+          outline
+          @click="editFolder"
+        />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/EditRequest.vue b/packages/hoppscotch-app/src/components/collections/graphql/EditRequest.vue
index 50934014..9771a339 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/EditRequest.vue
+++ b/packages/hoppscotch-app/src/components/collections/graphql/EditRequest.vue
@@ -23,9 +23,18 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
-        <ButtonPrimary :label="`${t('action.save')}`" @click="saveRequest" />
-        <ButtonSecondary :label="`${t('action.cancel')}`" @click="hideModal" />
+      <span class="flex space-x-2">
+        <ButtonPrimary
+          :label="`${t('action.save')}`"
+          outline
+          @click="saveRequest"
+        />
+        <ButtonSecondary
+          :label="`${t('action.cancel')}`"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/index.vue b/packages/hoppscotch-app/src/components/collections/graphql/index.vue
index eb0f220c..6a0a30cd 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-app/src/components/collections/graphql/index.vue
@@ -73,6 +73,7 @@
       <ButtonSecondary
         :label="t('add.new')"
         filled
+        outline
         @click="displayModalAdd(true)"
       />
     </div>
diff --git a/packages/hoppscotch-app/src/components/collections/index.vue b/packages/hoppscotch-app/src/components/collections/index.vue
index 9eb2d596..83cabf2f 100644
--- a/packages/hoppscotch-app/src/components/collections/index.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/environments/Details.vue b/packages/hoppscotch-app/src/components/environments/Details.vue
index 1d7c1349..5cb8ff41 100644
--- a/packages/hoppscotch-app/src/components/environments/Details.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/environments/index.vue b/packages/hoppscotch-app/src/components/environments/index.vue
index 7bedd0b8..6eb67f99 100644
--- a/packages/hoppscotch-app/src/components/environments/index.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/http/CodegenModal.vue b/packages/hoppscotch-app/src/components/http/CodegenModal.vue
index abe371b3..01741fbb 100644
--- a/packages/hoppscotch-app/src/components/http/CodegenModal.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/http/ImportCurl.vue b/packages/hoppscotch-app/src/components/http/ImportCurl.vue
index 96f664cf..19f88dba 100644
--- a/packages/hoppscotch-app/src/components/http/ImportCurl.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/http/ReqChangeConfirmModal.vue b/packages/hoppscotch-app/src/components/http/ReqChangeConfirmModal.vue
index ded9430c..7908a63a 100644
--- a/packages/hoppscotch-app/src/components/http/ReqChangeConfirmModal.vue
+++ b/packages/hoppscotch-app/src/components/http/ReqChangeConfirmModal.vue
@@ -7,25 +7,31 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <label>
-          {{ t("confirm.request_change") }}
-        </label>
+      <div class="flex flex-col items-center justify-center">
+        {{ t("confirm.request_change") }}
       </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>
diff --git a/packages/hoppscotch-app/src/components/http/Request.vue b/packages/hoppscotch-app/src/components/http/Request.vue
index c7db4975..606859df 100644
--- a/packages/hoppscotch-app/src/components/http/Request.vue
+++ b/packages/hoppscotch-app/src/components/http/Request.vue
@@ -132,80 +132,84 @@
           </template>
         </tippy>
       </span>
-      <ButtonSecondary
-        class="flex-1 ml-2 rounded rounded-r-none"
-        :label="COLUMN_LAYOUT ? `${t('request.save')}` : ''"
-        filled
-        :icon="IconSave"
-        @click="saveRequest()"
-      />
-      <span class="flex">
-        <tippy
-          ref="saveOptions"
-          interactive
-          trigger="click"
-          theme="popover"
-          arrow
-          :on-shown="() => saveTippyActions.focus()"
-        >
-          <ButtonSecondary
-            :icon="IconChevronDown"
-            filled
-            class="rounded rounded-l-none"
-          />
-          <template #content="{ hide }">
-            <input
-              id="request-name"
-              v-model="requestName"
-              :placeholder="`${t('request.name')}`"
-              name="request-name"
-              type="text"
-              autocomplete="off"
-              class="mb-2 input"
-              @keyup.enter="hide()"
+      <span
+        class="flex ml-2 border rounded border-dividerLight hover:border-dividerDark transition"
+      >
+        <ButtonSecondary
+          class="flex-1 rounded rounded-r-none"
+          :label="COLUMN_LAYOUT ? `${t('request.save')}` : ''"
+          filled
+          :icon="IconSave"
+          @click="saveRequest()"
+        />
+        <span class="flex">
+          <tippy
+            ref="saveOptions"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+            :on-shown="() => saveTippyActions.focus()"
+          >
+            <ButtonSecondary
+              :icon="IconChevronDown"
+              filled
+              class="rounded rounded-l-none"
             />
-            <div
-              ref="saveTippyActions"
-              class="flex flex-col focus:outline-none"
-              tabindex="0"
-              role="menu"
-              @keyup.c="copyRequestAction.$el.click()"
-              @keyup.s="saveRequestAction.$el.click()"
-              @keyup.escape="hide()"
-            >
-              <SmartItem
-                ref="copyRequestAction"
-                :label="shareButtonText"
-                :icon="copyLinkIcon"
-                :loading="fetchingShareLink"
-                :shortcut="['C']"
-                @click="
-                  () => {
-                    copyRequest()
-                  }
-                "
+            <template #content="{ hide }">
+              <input
+                id="request-name"
+                v-model="requestName"
+                :placeholder="`${t('request.name')}`"
+                name="request-name"
+                type="text"
+                autocomplete="off"
+                class="mb-2 input !bg-primaryContrast"
+                @keyup.enter="hide()"
               />
-              <SmartItem
-                :icon="IconLink2"
-                :label="`${t('request.view_my_links')}`"
-                to="/profile"
-              />
-              <hr />
-              <SmartItem
-                ref="saveRequestAction"
-                :label="`${t('request.save_as')}`"
-                :icon="IconFolderPlus"
-                :shortcut="['S']"
-                @click="
-                  () => {
-                    showSaveRequestModal = true
-                    hide()
-                  }
-                "
-              />
-            </div>
-          </template>
-        </tippy>
+              <div
+                ref="saveTippyActions"
+                class="flex flex-col focus:outline-none"
+                tabindex="0"
+                role="menu"
+                @keyup.c="copyRequestAction.$el.click()"
+                @keyup.s="saveRequestAction.$el.click()"
+                @keyup.escape="hide()"
+              >
+                <SmartItem
+                  ref="copyRequestAction"
+                  :label="shareButtonText"
+                  :icon="copyLinkIcon"
+                  :loading="fetchingShareLink"
+                  :shortcut="['C']"
+                  @click="
+                    () => {
+                      copyRequest()
+                    }
+                  "
+                />
+                <SmartItem
+                  :icon="IconLink2"
+                  :label="`${t('request.view_my_links')}`"
+                  to="/profile"
+                />
+                <hr />
+                <SmartItem
+                  ref="saveRequestAction"
+                  :label="`${t('request.save_as')}`"
+                  :icon="IconFolderPlus"
+                  :shortcut="['S']"
+                  @click="
+                    () => {
+                      showSaveRequestModal = true
+                      hide()
+                    }
+                  "
+                />
+              </div>
+            </template>
+          </tippy>
+        </span>
       </span>
     </div>
     <HttpImportCurl
diff --git a/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue b/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue
index 41df1580..309fe2f0 100644
--- a/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/smart/ConfirmModal.vue b/packages/hoppscotch-app/src/components/smart/ConfirmModal.vue
index 1b667746..f327db6f 100644
--- a/packages/hoppscotch-app/src/components/smart/ConfirmModal.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/smart/Modal.vue b/packages/hoppscotch-app/src/components/smart/Modal.vue
index 901bdbc1..0a6be933 100644
--- a/packages/hoppscotch-app/src/components/smart/Modal.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/teams/Add.vue b/packages/hoppscotch-app/src/components/teams/Add.vue
index fe8a835d..488635f6 100644
--- a/packages/hoppscotch-app/src/components/teams/Add.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/teams/Edit.vue b/packages/hoppscotch-app/src/components/teams/Edit.vue
index 772494a4..35788dd5 100644
--- a/packages/hoppscotch-app/src/components/teams/Edit.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/teams/Invite.vue b/packages/hoppscotch-app/src/components/teams/Invite.vue
index c24784da..da7d663c 100644
--- a/packages/hoppscotch-app/src/components/teams/Invite.vue
+++ b/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
-          class="link"
+        <ButtonSecondary
+          class="link !p-0"
           :label="t('team.invite_more')"
           :icon="IconArrowLeft"
           @click="
@@ -310,15 +310,20 @@
             }
           "
         />
-        <SmartAnchor
-          class="link"
+        <ButtonSecondary
+          class="link !p-0"
           :label="`${t('action.dismiss')}`"
           @click="hideModal"
         />
       </p>
-      <span v-else>
-        <ButtonPrimary :label="t('team.invite')" @click="sendInvites" />
-        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+      <span v-else class="flex space-x-2">
+        <ButtonPrimary :label="t('team.invite')" outline @click="sendInvites" />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </SmartModal>