fix: update design

packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

@@ -374,8 +374,8 @@ watch(
 </script>
 
 <template>
-  <div class="create-base max-w-800px mx-auto bg-white relative flex flex-col justify-center gap-2 w-full p-8">
-    <h1 class="prose-2xl font-bold self-center my-4">New Base</h1>
+  <div class="create-base max-w-800px bg-white relative flex flex-col justify-center gap-2 w-full p-8">
+    <h1 class="prose-2xl font-bold self-start my-4">New Base</h1>
 
     <a-form
       ref="form"
@@ -493,17 +493,17 @@ watch(
         >
           <a-input v-model:value="formState.dataSource.searchPath[0]" />
         </a-form-item>
+        <div class="flex items-right justify-end gap-2">
+          <!--                Use Connection URL -->
+          <a-button type="primary" class="nc-extdb-btn-import-url !rounded-md" @click.stop="importURLDlg = true">
+            {{ $t('activity.useConnectionUrl') }}
+          </a-button>
+        </div>
 
         <a-collapse ghost expand-icon-position="right" class="!mt-6">
           <a-collapse-panel key="1">
             <template #header>
-              <div class="flex items-center gap-2">
-                <!--                Use Connection URL -->
-                <a-button type="default" class="nc-extdb-btn-import-url" @click.stop="importURLDlg = true">
-                  {{ $t('activity.useConnectionUrl') }}
-                </a-button>
-                <span>{{ $t('title.advancedParameters') }}</span>
-              </div>
+              <span>{{ $t('title.advancedParameters') }}</span>
             </template>
             <a-form-item label="SSL mode">
               <a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange">
@@ -600,7 +600,7 @@ watch(
             </a-form-item>
 
             <div class="flex justify-end">
-              <a-button class="!shadow-md" @click="handleEditJSON()">
+              <a-button type="primary" class="!rounded-md" @click="handleEditJSON()">
                 <!-- Edit connection JSON -->
                 {{ $t('activity.editConnJson') }}
               </a-button>
@@ -609,13 +609,13 @@ watch(
         </a-collapse>
       </template>
 
-      <a-form-item class="flex justify-center !mt-5">
-        <div class="flex justify-center gap-2">
-          <a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection">
+      <a-form-item class="flex justify-end !mt-5">
+        <div class="flex justify-end gap-2">
+          <a-button type="text" class="nc-extdb-btn-test-connection !rounded-md" @click="testConnection">
             {{ $t('activity.testDbConn') }}
           </a-button>
 
-          <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="createBase">
+          <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !rounded-md" @click="createBase">
             {{ $t('general.submit') }}
           </a-button>
         </div>
@@ -636,7 +636,7 @@ watch(
     <a-modal
       v-model:visible="importURLDlg"
       :title="$t('activity.useConnectionUrl')"
-      width="600px"
+      width="500px"
       :ok-text="$t('general.ok')"
       :cancel-text="$t('general.cancel')"
       wrap-class-name="nc-modal-connection-url"