From ade11881be480ace603e877c6b97687b8185902a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 27 May 2022 17:37:37 +0530
Subject: [PATCH] enhancement: ui improvement

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/import/ImportFromAirtable.vue  | 49 +++++++++++++++----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/import/ImportFromAirtable.vue b/packages/nc-gui/components/import/ImportFromAirtable.vue
index f58b86df4f..1050809630 100644
--- a/packages/nc-gui/components/import/ImportFromAirtable.vue
+++ b/packages/nc-gui/components/import/ImportFromAirtable.vue
@@ -1,14 +1,22 @@
 <template>
-  <v-dialog v-model="airtableModal" max-width="min(600px, 90%)">
+  <v-dialog v-model="airtableModal" max-width="min(600px, 90%)" persistent>
     <v-card class="nc-import-card h-100">
       <v-toolbar class="elevation-0 align-center" height="68">
         <h3 class="mt-2">
           {{ $t('title.importFromAirtable') }}
         </h3>
-        <div v-t="['c:airtable-import:turbo-mode']" class="ml-2 mt-3 title pointer nc-btn-enable-turbo" @click="enableTurbo">
+        <div
+          v-t="['c:airtable-import:turbo-mode']"
+          class="ml-2 mt-3 title pointer nc-btn-enable-turbo"
+          @click="enableTurbo"
+        >
           🚀
         </div>
         <v-spacer />
+
+        <v-icon color="warning" class="" @click="airtableModal = false">
+          mdi-close
+        </v-icon>
       </v-toolbar>
 
       <v-divider />
@@ -21,11 +29,18 @@
           >
             <template v-if="step === 1">
               <div class="d-flex flex-column justify-center align-center pt-2 pb-6">
-                <span class="subtitle-1 font-weight-medium" @dblclick="$set(syncSource.details.options,'syncViews',true)">
+                <span
+                  class="subtitle-1 font-weight-medium"
+                  @dblclick="$set(syncSource.details.options,'syncViews',true)"
+                >
                   Credentials
                 </span>
 
-                <a href="https://docs.nocodb.com/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free/#get-airtable-credentials" class="caption grey--text" target="_blank">Where to find this?</a>
+                <a
+                  href="https://docs.nocodb.com/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free/#get-airtable-credentials"
+                  class="caption grey--text"
+                  target="_blank"
+                >Where to find this?</a>
               </div>
 
               <v-form v-model="valid">
@@ -55,30 +70,39 @@
                     :rules="[(v) => !!v || 'Shared Base ID / URL is required']"
                   />
                 </div>
-                <v-expansion-panels class="mx-auto" style="width: 50%;" flat>
+                <v-expansion-panels v-model="advanceOptionsPanel" class="mx-auto" style="width: 50%;" flat>
                   <v-expansion-panel>
-                    <v-expansion-panel-header>Advanced Options</v-expansion-panel-header>
+                    <v-expansion-panel-header hide-actions>
+                      <v-spacer />
+                      <span class="grey--text caption">More Options <v-icon color="grey" small>
+                        mdi-chevron-{{ advanceOptionsPanel === 0 ? 'up' : 'down' }}
+                      </v-icon></span>
+                    </v-expansion-panel-header>
                     <v-expansion-panel-content>
                       <v-checkbox
                         v-model="syncSource.details.options.syncData"
+                        class="caption mt-n4"
                         label="Import Data"
                         hide-details
                         dense
                       />
                       <v-checkbox
                         v-model="syncSource.details.options.syncRollup"
+                        class="caption"
                         label="Import Rollup Columns"
                         hide-details
                         dense
                       />
                       <v-checkbox
                         v-model="syncSource.details.options.syncLookup"
+                        class="caption"
                         label="Import Lookup Columns"
                         hide-details
                         dense
                       />
                       <v-checkbox
                         v-model="syncSource.details.options.syncAttachment"
+                        class="caption"
                         label="Import Attachment Columns"
                         hide-details
                         dense
@@ -88,6 +112,7 @@
                           <div v-on="on">
                             <v-checkbox
                               v-model="syncSource.details.options.syncFormula"
+                              class="caption"
                               label="Import Formula Columns"
                               hide-details
                               dense
@@ -101,7 +126,7 @@
                   </v-expansion-panel>
                 </v-expansion-panels>
               </v-form>
-              <v-card-actions class="justify-center pb-6">
+              <v-card-actions class="justify-center pb-6 pt-6">
                 <v-btn
                   v-t="['c:sync-airtable:save-and-sync']"
                   class="nc-btn-airtable-import"
@@ -160,9 +185,14 @@
               </div>
             </template>
             <div class="text-center pa-4 pb-0">
-              <a class="caption grey--text" href="https://github.com/nocodb/nocodb/issues/2052" target="_blank">Questions / Help - reach out here</a>
+              <a class="caption grey--text" href="https://github.com/nocodb/nocodb/issues/2052" target="_blank">Questions
+                / Help - reach out here</a>
               <br>
-              <span class="caption grey--text"> This feature is currently in beta and more information can be found <a href="https://github.com/nocodb/nocodb/discussions/2122" class="caption grey--text" target="_blank">here</a>.</span>
+              <span class="caption grey--text"> This feature is currently in beta and more information can be found <a
+                href="https://github.com/nocodb/nocodb/discussions/2122"
+                class="caption grey--text"
+                target="_blank"
+              >here</a>.</span>
             </div>
           </v-card>
         </div>
@@ -180,6 +210,7 @@ export default {
     value: Boolean
   },
   data: () => ({
+    advanceOptionsPanel: false,
     isPasswordVisible: false,
     valid: false,
     socket: null,