From 001c653e90774312f631b9731f1b347994e2c344 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 18 Oct 2022 08:45:37 +0200
Subject: [PATCH] chore(nc-gui): cleanup styles

---
 packages/nc-gui/components/erd/Flow.vue | 10 ++++++----
 packages/nc-gui/components/erd/View.vue |  9 +--------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/erd/Flow.vue b/packages/nc-gui/components/erd/Flow.vue
index 1690eeb4e0..f77955adfe 100644
--- a/packages/nc-gui/components/erd/Flow.vue
+++ b/packages/nc-gui/components/erd/Flow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Background, Controls } from '@vue-flow/additional-components'
+import { Background, Controls, Panel } from '@vue-flow/additional-components'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import type { TableType } from 'nocodb-sdk'
 import type { ERDConfig } from './utils'
@@ -78,13 +78,15 @@ onScopeDispose($destroy)
     <Background :size="showSkeleton ? 2 : undefined" :gap="showSkeleton ? 50 : undefined" />
 
     <Transition name="layout">
-      <div
+      <Panel
         v-if="showSkeleton && config.showAllColumns"
-        class="color-transition z-5 cursor-pointer absolute bottom-4 left-[50%] transform translate-x-[-50%] text-slate-400 hover:(text-slate-900 ring ring-accent ring-opacity-100) font-semibold px-4 py-2 bg-slate-100/50 hover:bg-slate-100/90 rounded"
+        position="bottom-center"
+        class="color-transition z-5 cursor-pointer rounded shadow-sm text-slate-400 font-semibold px-4 py-2 bg-slate-100/50 hover:(text-slate-900 ring ring-accent ring-opacity-100 bg-slate-100/90)"
         @click="zoomIn"
       >
+        <!-- todo: i18n -->
         Zoom in to view columns
-      </div>
+      </Panel>
     </Transition>
 
     <slot />
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 0701e7a615..16fff82885 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -85,14 +85,7 @@ watch(
 </script>
 
 <template>
-  <div
-    class="w-full"
-    style="height: inherit"
-    :class="{
-      'nc-erd-vue-flow': !config.singleTableMode,
-      'nc-erd-vue-flow-single-table': config.singleTableMode,
-    }"
-  >
+  <div class="w-full" style="height: inherit" :class="[`nc-erd-vue-flow${config.singleTableMode ? '-single-table' : ''}`]">
     <div class="relative h-full">
       <LazyErdFlow :tables="tables" :config="config">
         <GeneralOverlay v-model="isLoading" inline class="bg-gray-300/50">