feat(gui-v2): update styles

packages/nc-gui-v2/assets/style.css

@@ -1,3 +1,10 @@
+html,
+body,
+#__nuxt {
+  margin: 0;
+  height: 100%;
+}
+
 html, body {
   @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
 }

packages/nc-gui-v2/pages/projects/create-external.vue

@@ -2,9 +2,10 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
-import { useNuxtApp, useRouter } from '#app'
+import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { clientTypes, getDefaultConnectionConfig, getTestDatabaseName } from '~/utils/projectCreateUtils'
+import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
 const name = ref('')
 const loading = ref(false)
@@ -16,10 +17,9 @@ const inflection = reactive({
   columnName: 'camelize',
 })
 
-const $router = useRouter()
 const { $api, $e } = useNuxtApp()
 const toast = useToast()
-const { t: $t } = useI18n()
+const { t } = useI18n()
 
 const titleValidationRule = [
   (v: string) => !!v || 'Title is required',
@@ -42,7 +42,7 @@ const createProject = async () => {
       external: true,
     })
 
-    await $router.push(`/nc/${result.id}`)
+    await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
     // todo: toast
     toast.error(await extractSdkResponseErrorMsg(e))
@@ -72,7 +72,7 @@ const testConnection = async () => {
         testSuccess.value = true
       } else {
         testSuccess.value = false
-        toast.error($t('msg.error.dbConnectionFailed') + result.message)
+        toast.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
       }
     }
   } catch (e: any) {
@@ -84,24 +84,25 @@ const testConnection = async () => {
 
 <template>
   <NuxtLayout>
-    <div class="main justify-center d-flex mx-auto" style="min-height: 600px; overflow: auto">
+    <v-container fluid class="d-flex justify-center align-center h-75">
       <v-form ref="form" v-model="valid" @submit.prevent="createProject">
-        <v-card style="width: 530px; margin-top: 100px" class="mx-auto">
+        <v-card max-width="600">
           <!-- Create Project -->
-          <v-container class="pb-10 px-12" style="padding-top: 43px !important">
+          <v-container class="pb-10 px-12">
-            <h1 class="mt-4 mb-4 text-center">
+            <h1 class="mb-4 text-center">
-              <!--            {{ $t('activity.createProject') }} -->
+              {{ $t('activity.createProject') }}
-              Create Project
             </h1>
-            <div class="mx-auto" style="width: 350px">
-              <!-- label="Enter Project Name" -->
-              <!-- rule text: Required -->
-              <v-text-field v-model="name" :rules="titleValidationRule" class="nc-metadb-project-name" label="Project name" />
-              <!--                :rules="titleValidationRule" -->
-            </div>
 
-            <v-container fluid>
             <v-row>
+              <v-col offset="2" cols="8">
+                <v-text-field
+                  v-model="name"
+                  :rules="titleValidationRule"
+                  class="nc-metadb-project-name"
+                  :label="$t('labels.projName')"
+                />
+              </v-col>
+
               <v-col cols="6">
                 <v-select
                   v-model="projectDatasource.client"
@@ -114,27 +115,33 @@ const testConnection = async () => {
                 />
               </v-col>
               <v-col cols="6">
-                  <v-text-field v-model="projectDatasource.connection.host" density="compact" label="Host" />
+                <v-text-field v-model="projectDatasource.connection.host" density="compact" :label="$t('labels.hostAddress')" />
               </v-col>
               <v-col cols="6">
-                  <v-text-field v-model="projectDatasource.connection.port" density="compact" label="Port" type="number" />
+                <v-text-field
+                  v-model="projectDatasource.connection.port"
+                  density="compact"
+                  :label="$t('labels.port')"
+                  type="number"
+                />
               </v-col>
               <v-col cols="6">
-                  <v-text-field v-model="projectDatasource.connection.user" density="compact" label="Username" />
+                <v-text-field v-model="projectDatasource.connection.user" density="compact" :label="$t('labels.username')" />
               </v-col>
               <v-col cols="6">
                 <v-text-field
                   v-model="projectDatasource.connection.password"
                   density="compact"
                   type="password"
-                    label="Password"
+                  :label="$t('labels.password')"
                 />
               </v-col>
               <v-col cols="6">
                 <v-text-field v-model="projectDatasource.connection.database" density="compact" label="Database name" />
               </v-col>
 
-                <!--                <v-col cols="6">
+              <!-- todo: reimplement?
+              <v-col cols="6">
                 <v-text-field
                   v-model="inflection.tableName"
                   density="compact"
@@ -148,26 +155,24 @@ const testConnection = async () => {
                   density="compact"
                   label="Database name"
                 />
-                </v-col> -->
+              </v-col>
+              -->
             </v-row>
-            </v-container>
 
             <div class="d-flex justify-center" style="gap: 4px">
-              <v-btn :disabled="!testSuccess" class="" large :loading="loading" color="primary" @click="createProject">
+              <v-btn :disabled="!testSuccess" large :loading="loading" color="primary" @click="createProject">
-                <v-icon class="mr-1 mt-n1"> mdi-rocket-launch-outline</v-icon>
+                <MaterialSymbolsRocketLaunchOutline class="mr-1" />
-                <!-- Create -->
+                <span> {{ $t('general.create') }} </span>
-                <span class="mr-1">{{ $t('general.create') }} </span>
               </v-btn>
 
-              <v-btn size="sm" class="text-sm text-capitalize">
+              <v-btn small class="px-2">
-                <!-- Test Database Connection -->
                 {{ $t('activity.testDbConn') }}
               </v-btn>
             </div>
           </v-container>
         </v-card>
       </v-form>
-    </div>
+    </v-container>
   </NuxtLayout>
 </template>
 

packages/nc-gui-v2/pages/projects/create.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useNuxtApp, useRouter } from '#app'
+import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
 const name = ref('')
 const loading = ref(false)
 const valid = ref(false)
 
 const { $api, $toast } = useNuxtApp()
-const $router = useRouter()
 
 const titleValidationRule = [
   (v: string) => !!v || 'Title is required',
@@ -22,9 +22,8 @@ const createProject = async () => {
       title: name.value,
     })
 
-    await $router.push(`/nc/${result.id}`)
+    await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
-    // todo: toast
     $toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
   }
   loading.value = false
@@ -32,33 +31,26 @@ const createProject = async () => {
 </script>
 
 <template>
-  <div class="main justify-center d-flex mx-auto" style="min-height: 600px; overflow: auto">
+  <NuxtLayout>
+    <v-container fluid class="d-flex justify-center align-center h-75">
       <v-form ref="form" v-model="valid" @submit.prevent="createProject">
-      <v-card style="width: 530px; margin-top: 100px" class="mx-auto">
+        <v-card max-width="500">
-        <!-- Create Project -->
+          <v-container class="pb-10 px-12">
-        <v-container class="pb-10 px-12" style="padding-top: 43px !important">
             <h1 class="mt-4 mb-4 text-center">
-            <!--            {{ $t('activity.createProject') }} -->
+              {{ $t('activity.createProject') }}
-            Create Project
             </h1>
             <div class="mx-auto" style="width: 350px">
-            <!-- label="Enter Project Name" -->
+              <v-text-field v-model="name" class="nc-metadb-project-name" :label="$t('labels.projName')" />
-            <!-- rule text: Required -->
-            <v-text-field v-model="name" class="nc-metadb-project-name" label="Project name" />
-            <!--                :rules="titleValidationRule" -->
             </div>
-          <div class="text-center">
+            <v-btn class="mx-auto" large :loading="loading" color="primary" @click="createProject">
-            <v-btn class="mt-3 mx-auto" large :loading="loading" color="primary" @click="createProject">
+              <MaterialSymbolsRocketLaunchOutline class="mr-1" />
-              <v-icon class="mr-1 mt-n1"> mdi-rocket-launch-outline </v-icon>
+              <span> {{ $t('general.create') }} </span>
-              <!-- Create -->
-              <!--                <span class="mr-1">{{ // $t("general.create") }}</span> -->
-              <span class="mr-1"> Create project </span>
             </v-btn>
-          </div>
           </v-container>
         </v-card>
       </v-form>
-  </div>
+    </v-container>
+  </NuxtLayout>
 </template>
 
 <style scoped>

packages/nc-gui-v2/pages/projects/index.vue

@@ -19,7 +19,7 @@ const projects = ref(response.list)
         <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateTo('/projects/create')">
           {{ $t('activity.createProject') }}
         </v-btn>
-        <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateTo('/projects/create')">
+        <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateTo('/projects/create-external')">
           {{ $t('activity.createProjectExtended.extDB') }}
         </v-btn>
       </div>