From ff5c2ba51c08cd25240c200dded231c9266fdbe9 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 12 Dec 2023 23:32:42 +0530
Subject: [PATCH] chore: minor ui improvements to modal

---
 .../importExport/ImportExportSourcesList.vue   |  2 +-
 .../src/components/smart/Modal.vue             | 18 +++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/importExport/ImportExportSourcesList.vue b/packages/hoppscotch-common/src/components/importExport/ImportExportSourcesList.vue
index 54d186b56..7414e322e 100644
--- a/packages/hoppscotch-common/src/components/importExport/ImportExportSourcesList.vue
+++ b/packages/hoppscotch-common/src/components/importExport/ImportExportSourcesList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col space-y-2">
     <HoppSmartItem
       v-for="source in sources"
       :key="source.id"
diff --git a/packages/hoppscotch-ui/src/components/smart/Modal.vue b/packages/hoppscotch-ui/src/components/smart/Modal.vue
index 41cf2f10e..447f60f37 100644
--- a/packages/hoppscotch-ui/src/components/smart/Modal.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Modal.vue
@@ -32,18 +32,22 @@
         <Transition name="bounce" appear>
           <div
             class="inline-block w-full transform overflow-hidden border-dividerDark bg-primary text-left align-bottom shadow-lg transition-all sm:rounded-xl sm:border sm:align-middle"
-            :class="[{ 'mt-24 md:mb-8': placement === 'top' }, styles]"
+            :class="[{ 'mt-16 md:mb-8': placement === 'top' }, styles]"
           >
             <div
               v-if="title"
               class="flex items-center justify-between border-b border-dividerLight"
               :class="{ 'p-4': !fullWidth }"
             >
-              <h3 class="heading" :class="{ 'ml-4': !fullWidth }">
-                {{ title }}
-              </h3>
-              <span class="flex items-center">
+              <div class="flex items-center flex-1 justify-start">
                 <slot name="actions"></slot>
+              </div>
+              <div class="flex items-center justify-center">
+                <h3 class="heading">
+                  {{ title }}
+                </h3>
+              </div>
+              <div class="flex items-center flex-1 justify-end">
                 <HoppButtonSecondary
                   v-if="dimissible"
                   v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
@@ -51,10 +55,10 @@
                   :icon="IconX"
                   @click="close"
                 />
-              </span>
+              </div>
             </div>
             <div
-              class="flex flex-col overflow-y-auto max-h-[50vh]"
+              class="flex flex-col overflow-y-auto max-h-[55vh]"
               :class="{ 'p-4': !fullWidth }"
             >
               <slot name="body"></slot>