From 798a324f17204ebf5f47e08d7ab6551c351ec9f6 Mon Sep 17 00:00:00 2001
From: arashsheyda <sheidaeearash1999@gmail.com>
Date: Wed, 26 Apr 2023 15:56:48 +0300
Subject: [PATCH] chore: styling

---
 client/components/CreateResource.vue | 10 +++++-----
 client/components/DrawerRight.vue    |  4 +++-
 client/pages/index.vue               |  9 ++++-----
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/client/components/CreateResource.vue b/client/components/CreateResource.vue
index c201865..8c1e591 100644
--- a/client/components/CreateResource.vue
+++ b/client/components/CreateResource.vue
@@ -155,8 +155,8 @@ const toggleSchema = computed({
 </script>
 
 <template>
-  <div relative h-full of-hidden>
-    <div sticky top-0 px8 py4 n-bg-base>
+  <div relative h-full>
+    <div sticky top-0 px8 py4 glass-effect z-1>
       <div mb2 flex items-center>
         <span text-2xl font-bold mt1>
           <NCheckbox v-model="hasBread" n="green">
@@ -210,8 +210,8 @@ const toggleSchema = computed({
         </NCheckbox>
       </div>
     </div>
-    <div v-if="schema" px8 h-full of-auto>
-      <div grid="~ cols-1" gap-2 mt4 mb4>
+    <div v-if="schema" px8>
+      <div grid="~ cols-1" gap-2 my4>
         <div grid="~ cols-6" text-center>
           <div v-for="label in fieldsLabels" :key="label">
             {{ label }}
@@ -252,7 +252,7 @@ const toggleSchema = computed({
         </div>
       </div>
     </div>
-    <NButton absolute right-8 bottom-8 px8 py2 icon="carbon-magic-wand-filled" n="green" @click="generate">
+    <NButton glass-effect fixed right-10 bottom-8 px8 py2 icon="carbon-magic-wand-filled" n="green" @click="generate">
       Create
     </NButton>
   </div>
diff --git a/client/components/DrawerRight.vue b/client/components/DrawerRight.vue
index e5d1231..ebaa982 100644
--- a/client/components/DrawerRight.vue
+++ b/client/components/DrawerRight.vue
@@ -16,7 +16,9 @@ const { height: top } = useElementSize(() => props.navbar, undefined, { box: 'bo
 onClickOutside(el, () => {
   if (props.modelValue && props.autoClose)
     emit('close')
-}, {})
+}, {
+  ignore: ['#open-drawer-right'],
+})
 </script>
 
 <script lang="ts">
diff --git a/client/pages/index.vue b/client/pages/index.vue
index 94aa2bf..6f7000f 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -3,8 +3,6 @@ const route = useRoute()
 const router = useRouter()
 
 const selectedCollection = ref()
-// TODO: check connection
-const connected = ref(true)
 const drawer = ref(false)
 const search = ref('')
 
@@ -34,6 +32,7 @@ async function dropCollection(table: any) {
 
 async function refresh() {
   collections.value = await rpc.listCollections()
+  drawer.value = false
 }
 </script>
 
@@ -43,9 +42,9 @@ async function refresh() {
       <div px4>
         <Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2>
           <div flex items-center gap2>
-            <NIconButton w-full mb1.5 icon="carbon-reset" title="Refresh" />
-            <NIconButton w-full mb1.5 icon="carbon-data-base" title="Connection Name" :class="connected ? 'text-green-5' : 'text-orange-5'" />
-            <NIconButton w-full mb1.5 icon="carbon-add" title="Create Table" @click="drawer = !drawer" />
+            <NIconButton w-full mb1.5 icon="carbon-reset" title="Refresh" @click="refresh" />
+            <NIconButton w-full mb1.5 icon="carbon-data-base" title="Default" text-green-5 />
+            <NIconButton id="open-drawer-right" w-full mb1.5 icon="carbon-add" title="Create Collection" @click="drawer = true" />
           </div>
         </Navbar>
         <div grid gird-cols-1 my2 mx1>