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

@@ -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:focus-within ~ label,
-.floating-input:not(:placeholder-shown)~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;

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") }}
-          {{ 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,80 +132,84 @@
           </template>
         </tippy>
       </span>
-      <ButtonSecondary
+      <span
-        class="flex-1 ml-2 rounded rounded-r-none"
+        class="flex ml-2 border rounded border-dividerLight hover:border-dividerDark transition"
-        :label="COLUMN_LAYOUT ? `${t('request.save')}` : ''"
+      >
-        filled
+        <ButtonSecondary
-        :icon="IconSave"
+          class="flex-1 rounded rounded-r-none"
-        @click="saveRequest()"
+          :label="COLUMN_LAYOUT ? `${t('request.save')}` : ''"
-      />
+          filled
-      <span class="flex">
+          :icon="IconSave"
-        <tippy
+          @click="saveRequest()"
-          ref="saveOptions"
+        />
-          interactive
+        <span class="flex">
-          trigger="click"
+          <tippy
-          theme="popover"
+            ref="saveOptions"
-          arrow
+            interactive
-          :on-shown="() => saveTippyActions.focus()"
+            trigger="click"
-        >
+            theme="popover"
-          <ButtonSecondary
+            arrow
-            :icon="IconChevronDown"
+            :on-shown="() => saveTippyActions.focus()"
-            filled
+          >
-            class="rounded rounded-l-none"
+            <ButtonSecondary
-          />
+              :icon="IconChevronDown"
-          <template #content="{ hide }">
+              filled
-            <input
+              class="rounded rounded-l-none"
-              id="request-name"
-              v-model="requestName"
-              :placeholder="`${t('request.name')}`"
-              name="request-name"
-              type="text"
-              autocomplete="off"
-              class="mb-2 input"
-              @keyup.enter="hide()"
             />
-            <div
+            <template #content="{ hide }">
-              ref="saveTippyActions"
+              <input
-              class="flex flex-col focus:outline-none"
+                id="request-name"
-              tabindex="0"
+                v-model="requestName"
-              role="menu"
+                :placeholder="`${t('request.name')}`"
-              @keyup.c="copyRequestAction.$el.click()"
+                name="request-name"
-              @keyup.s="saveRequestAction.$el.click()"
+                type="text"
-              @keyup.escape="hide()"
+                autocomplete="off"
-            >
+                class="mb-2 input !bg-primaryContrast"
-              <SmartItem
+                @keyup.enter="hide()"
-                ref="copyRequestAction"
-                :label="shareButtonText"
-                :icon="copyLinkIcon"
-                :loading="fetchingShareLink"
-                :shortcut="['C']"
-                @click="
-                  () => {
-                    copyRequest()
-                  }
-                "
               />
-              <SmartItem
+              <div
-                :icon="IconLink2"
+                ref="saveTippyActions"
-                :label="`${t('request.view_my_links')}`"
+                class="flex flex-col focus:outline-none"
-                to="/profile"
+                tabindex="0"
-              />
+                role="menu"
-              <hr />
+                @keyup.c="copyRequestAction.$el.click()"
-              <SmartItem
+                @keyup.s="saveRequestAction.$el.click()"
-                ref="saveRequestAction"
+                @keyup.escape="hide()"
-                :label="`${t('request.save_as')}`"
+              >
-                :icon="IconFolderPlus"
+                <SmartItem
-                :shortcut="['S']"
+                  ref="copyRequestAction"
-                @click="
+                  :label="shareButtonText"
-                  () => {
+                  :icon="copyLinkIcon"
-                    showSaveRequestModal = true
+                  :loading="fetchingShareLink"
-                    hide()
+                  :shortcut="['C']"
-                  }
+                  @click="
-                "
+                    () => {
-              />
+                      copyRequest()
-            </div>
+                    }
-          </template>
+                  "
-        </tippy>
+                />
+                <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

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>