From 9698932bde2ef1019bedc120e4d6f46ff9b9831c Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 20 Sep 2021 21:33:36 +0530
Subject: [PATCH] refactor(ui): minor ui improvements

---
 .../hoppscotch-app/components/app/PowerSearch.vue    |  7 ++++++-
 packages/hoppscotch-app/components/app/Sidenav.vue   |  2 +-
 packages/hoppscotch-app/components/app/SlideOver.vue |  2 +-
 packages/hoppscotch-app/components/app/Support.vue   |  1 +
 .../components/collections/ImportExport.vue          |  1 +
 .../components/collections/graphql/ImportExport.vue  |  1 +
 .../components/environments/ImportExport.vue         |  1 +
 .../hoppscotch-app/components/firebase/Login.vue     |  1 +
 packages/hoppscotch-app/components/smart/Modal.vue   | 12 ++++++++----
 9 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/PowerSearch.vue b/packages/hoppscotch-app/components/app/PowerSearch.vue
index 054440755..8825d2bb2 100644
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/app/Sidenav.vue b/packages/hoppscotch-app/components/app/Sidenav.vue
index 529c2a824..d9b1b8a5a 100644
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/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}`"
diff --git a/packages/hoppscotch-app/components/app/SlideOver.vue b/packages/hoppscotch-app/components/app/SlideOver.vue
index 0bab56418..eb519cd7e 100644
--- a/packages/hoppscotch-app/components/app/SlideOver.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/components/app/Support.vue b/packages/hoppscotch-app/components/app/Support.vue
index a2a4a2649..19f217c24 100644
--- a/packages/hoppscotch-app/components/app/Support.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/components/collections/ImportExport.vue b/packages/hoppscotch-app/components/collections/ImportExport.vue
index d3855dbd0..7a686d040 100644
--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
index dd859d761..925850000 100644
--- a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/components/environments/ImportExport.vue b/packages/hoppscotch-app/components/environments/ImportExport.vue
index 9fb533421..994fedc16 100644
--- a/packages/hoppscotch-app/components/environments/ImportExport.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/components/firebase/Login.vue b/packages/hoppscotch-app/components/firebase/Login.vue
index eb47483f1..04ce5020f 100644
--- a/packages/hoppscotch-app/components/firebase/Login.vue
+++ b/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"
   >
diff --git a/packages/hoppscotch-app/components/smart/Modal.vue b/packages/hoppscotch-app/components/smart/Modal.vue
index 5c5bacfa4..32b0bb10f 100644
--- a/packages/hoppscotch-app/components/smart/Modal.vue
+++ b/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()