refactor(ui): minor ui improvements

packages/hoppscotch-app/components/app/PowerSearch.vue

@@ -1,5 +1,10 @@
 <template>
-  <SmartModal v-if="show" full-width @close="$emit('hide-modal')">
+  <SmartModal
+    v-if="show"
+    max-width="sm:max-w-md"
+    full-width
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <input
         id="command"

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -1,6 +1,6 @@
 <template>
   <aside class="flex h-full justify-between md:flex-col">
-    <nav class="flex flex-nowrap md:flex-col">
+    <nav class="flex flex-nowrap md:flex-col flex-1 md:flex-none">
       <NuxtLink
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"

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

@@ -3,7 +3,7 @@
     <transition v-if="show" name="fade" appear>
       <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
         <div
-          class="bg-primaryDark opacity-90 inset-0 absolute"
+          class="bg-primaryLight opacity-90 inset-0 absolute"
           tabindex="0"
           @click="close()"
         ></div>

packages/hoppscotch-app/components/app/Support.vue

@@ -2,6 +2,7 @@
   <SmartModal
     v-if="show"
     :title="$t('support.title')"
+    max-width="sm:max-w-md"
     @close="$emit('hide-modal')"
   >
     <template #body>

packages/hoppscotch-app/components/collections/ImportExport.vue

@@ -2,6 +2,7 @@
   <SmartModal
     v-if="show"
     :title="`${$t('modal.import_export')} ${$t('modal.collections')}`"
+    max-width="sm:max-w-md"
     @close="hideModal"
   >
     <template #actions>

packages/hoppscotch-app/components/collections/graphql/ImportExport.vue

@@ -2,6 +2,7 @@
   <SmartModal
     v-if="show"
     :title="`${$t('modal.import_export')} ${$t('modal.collections')}`"
+    max-width="sm:max-w-md"
     @close="hideModal"
   >
     <template #actions>

packages/hoppscotch-app/components/environments/ImportExport.vue

@@ -2,6 +2,7 @@
   <SmartModal
     v-if="show"
     :title="`${$t('modal.import_export')} ${$t('environment.title')}`"
+    max-width="sm:max-w-md"
     @close="hideModal"
   >
     <template #actions>

packages/hoppscotch-app/components/firebase/Login.vue

@@ -2,6 +2,7 @@
   <SmartModal
     v-if="show"
     :title="`${$t('auth.login_to_hoppscotch')}`"
+    max-width="sm:max-w-md"
     dialog
     @close="hideModal"
   >

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

@@ -9,7 +9,7 @@
       >
         <transition name="fade" appear>
           <div
-            class="bg-primaryDark opacity-90 inset-0 transition fixed"
+            class="bg-primaryLight opacity-90 inset-0 transition fixed"
             @touchstart="!dialog ? close() : null"
             @touchend="!dialog ? close() : null"
             @mouseup="!dialog ? close() : null"
@@ -34,7 +34,7 @@
           <div
             class="
               bg-primary
-              shadow-lg
+              shadow-xl
               text-left
               w-full
               transform
@@ -42,12 +42,12 @@
               inline-block
               align-bottom
               overflow-hidden
-              sm:max-w-md sm:align-middle
-              md:rounded-lg
+              sm:align-middle sm:rounded-xl
             "
             :class="[
               { 'mt-24 md:mb-8': placement === 'top' },
               { 'p-4': !fullWidth },
+              maxWidth,
             ]"
           >
             <div
@@ -122,6 +122,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    maxWidth: {
+      type: String,
+      default: "sm:max-w-lg",
+    },
   },
   setup() {
     const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()