chore: minor ui improvements

2022-09-30 09:47:12 +05:30
parent 045dc10a0d
commit 1b23c5ea4a
33 changed files with 304 additions and 181 deletions
--- 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;
--- 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>
--- 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()
  }
 }

--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>