Merge pull request #5627 from DarkPhoenix2704/ui-consist

fix: UI Inconsitency

packages/nc-gui/components/account/AppStore.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
-    <div class="text-xl mt-4 mb-8 text-center font-weight-bold">{{ $t('title.appStore') }}</div>
+    <div class="text-xl mt-4 mb-8 text-left font-weight-bold">{{ $t('title.appStore') }}</div>
     <div>
       <LazyDashboardSettingsAppStore />
     </div>

packages/nc-gui/components/account/License.vue

@@ -40,7 +40,9 @@ loadLicense()
       <div>
         <a-textarea v-model:value="key" placeholder="License key" class="!mt-2 !max-w-[600px]"></a-textarea>
       </div>
-      <div class="text-center"><a-button class="mt-4" @click="setLicense" type="primary">Save license key</a-button></div>
+      <div class="text-center">
+        <a-button class="mt-4 !h-[2.2rem] !rounded-md" @click="setLicense" type="primary">Save license key</a-button>
+      </div>
     </div>
   </div>
 </template>

packages/nc-gui/components/account/ResetPassword.vue

@@ -65,13 +65,13 @@ const resetError = () => {
 </script>
 
 <template>
-  <div class="mx-auto relative flex flex-col justify-center gap-2 w-full px-8 md:(bg-white) max-w-[900px]">
-    <div class="text-xl mt-4 mb-8 text-center font-weight-bold">{{ $t('activity.changePwd') }}</div>
+  <div class="mx-auto relative flex flex-col justify-start gap-2 w-full px-8 md:(bg-white) max-w-[900px]">
+    <div class="text-xl my-4 text-left font-weight-bold">{{ $t('activity.changePwd') }}</div>
     <a-form
       ref="formValidator"
       data-testid="nc-user-settings-form"
       layout="vertical"
-      class="change-password lg:max-w-3/4 w-full !mx-auto"
+      class="change-password lg:max-w-3/4 w-full"
       no-style
       :model="form"
       @finish="passwordChange"
@@ -118,13 +118,19 @@ const resetError = () => {
         />
       </a-form-item>
 
-      <div class="text-center">
-        <button data-testid="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit">
-          <span class="flex items-center gap-2">
+      <div class="text-right">
+        <a-button
+          size="middle"
+          data-testid="nc-user-settings-form__submit"
+          class="!rounded-md !h-[2.5rem]"
+          type="primary"
+          html-type="submit"
+        >
+          <div class="flex justify-center items-center gap-2">
             <component :is="iconMap.passwordChange" />
             {{ $t('activity.changePwd') }}
-          </span>
-        </button>
+          </div>
+        </a-button>
       </div>
     </a-form>
   </div>

packages/nc-gui/components/account/Token.vue

@@ -100,12 +100,18 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 <template>
   <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
-    <div class="text-xl mt-4 mb-8 text-center font-weight-bold">Token Management</div>
     <div class="max-w-[900px] mx-auto p-4" data-testid="nc-token-list">
+      <div class="text-xl my-4 text-left font-weight-bold">Token Management</div>
       <div class="py-2 flex gap-4 items-center">
         <div class="flex-grow"></div>
         <component :is="iconMap.reload" class="cursor-pointer" @click="loadTokens" />
-        <a-button data-testid="nc-token-create" size="small" type="primary" @click="showNewTokenModal = true">
+        <a-button
+          class="!rounded-md"
+          data-testid="nc-token-create"
+          size="middle"
+          type="primary"
+          @click="showNewTokenModal = true"
+        >
           <div class="flex items-center gap-1">
             <component :is="iconMap.plus" />
             Add new token
@@ -197,9 +203,9 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                 <template #overlay>
                   <a-menu data-testid="nc-token-row-action-icon">
                     <a-menu-item>
-                      <div class="flex flex-row items-center py-3 h-[1rem] nc-delete-token" @click="deleteToken(record.token)">
+                      <div class="flex flex-row items-center py-3 h-[2rem] nc-delete-token" @click="deleteToken(record.token)">
                         <component :is="iconMap.delete" class="flex" />
-                        <div class="text-xs pl-2">{{ $t('general.remove') }}</div>
+                        <div class="text-sm pl-2">{{ $t('general.remove') }}</div>
                       </div>
                     </a-menu-item>
                   </a-menu>
@@ -228,7 +234,7 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
         </a-button>
 
         <!-- Generate Token -->
-        <div class="flex flex-row justify-center w-full -mt-1 mb-3">
+        <div class="flex flex-row w-full -mt-1 mb-3">
           <a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
         </div>
 
@@ -248,11 +254,12 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
             v-model:value="selectedTokenData.description"
             data-testid="nc-token-modal-description"
             :placeholder="$t('labels.description')"
+            class="h-9 rounded-md"
           />
 
           <!-- Generate -->
-          <div class="flex flex-row justify-center">
-            <a-button type="primary" html-type="submit" data-testid="nc-token-modal-save">
+          <div class="flex flex-row justify-end">
+            <a-button size="middle" class="!rounded-md" type="primary" html-type="submit" data-testid="nc-token-modal-save">
               {{ $t('general.generate') }}
             </a-button>
           </div>

packages/nc-gui/components/account/UserList.vue

@@ -131,14 +131,14 @@ const copyPasswordResetUrl = async (user: User) => {
 
 <template>
   <div data-testid="nc-super-user-list">
-    <div class="text-xl mt-4 mb-8 text-center font-weight-bold">User Management</div>
-    <div class="max-w-[900px] mx-auto p-4">
+    <div class="max-w-[900px] mx-auto">
+      <div class="text-xl my-4 text-left font-weight-bold">User Management</div>
       <div class="py-2 flex gap-4 items-center">
         <a-input-search
           v-model:value="searchText"
-          size="small"
+          size="middle"
           class="max-w-[300px]"
-          placeholder="Filter by email"
+          placeholder="Search Users"
           @blur="loadUsers"
           @keydown.enter="loadUsers"
         >
@@ -147,7 +147,8 @@ const copyPasswordResetUrl = async (user: User) => {
         <component :is="iconMap.reload" class="cursor-pointer" @click="loadUsers" />
         <a-button
           data-testid="nc-super-user-invite"
-          size="small"
+          size="middle"
+          class="!rounded-md"
           type="primary"
           @click="
             () => {

packages/nc-gui/components/account/UsersModal.vue

@@ -125,13 +125,13 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
       <div class="px-2 mt-1.5">
         <template v-if="usersData.invitationToken">
-          <div class="flex flex-col mt-1 border-b-1 pb-5">
+          <div class="flex flex-col mt-1 pb-5">
             <div class="flex flex-row items-center pl-1.5 pb-1 h-[1.1rem]">
               <component :is="iconMap.account" />
               <div class="text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
             </div>
 
-            <a-alert class="mt-1" type="success" show-icon>
+            <a-alert class="!mt-2" type="success" show-icon>
               <template #message>
                 <div class="flex flex-row justify-between items-center py-1">
                   <div class="flex pl-2 text-green-700 text-xs">
@@ -152,8 +152,8 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
               {{ usersData.invitationToken && usersData.emails }}
             </div>
 
-            <div class="flex flex-row justify-start mt-4 ml-2">
-              <a-button size="small" outlined @click="clickInviteMore">
+            <div class="flex flex-row justify-end mt-4 ml-2">
+              <a-button size="middle" outlined @click="clickInviteMore">
                 <div class="flex flex-row justify-center items-center space-x-0.5">
                   <MaterialSymbolsSendOutline class="flex mx-auto text-gray-600 h-[0.8rem]" />
 
@@ -165,11 +165,6 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
         </template>
 
         <div v-else class="flex flex-col pb-4">
-          <div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
-            <component :is="iconMap.account" />
-            <div class="text-xs ml-0.5 mt-0.5">{{ $t('activity.inviteUser') }}</div>
-          </div>
-
           <div class="border-1 py-3 px-4 rounded-md mt-1">
             <a-form
               ref="formRef"
@@ -190,6 +185,7 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
                     <a-input
                       :ref="emailInput"
+                      size="middle"
                       v-model:value="usersData.emails"
                       validate-trigger="onBlur"
                       :placeholder="$t('labels.email')"
@@ -228,8 +224,8 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                 </div>
               </div>
 
-              <div class="flex flex-row justify-center">
-                <a-button type="primary" html-type="submit">
+              <div class="flex flex-row justify-end">
+                <a-button type="primary" class="!rounded-md" html-type="submit">
                   <div class="flex flex-row justify-center items-center space-x-1.5">
                     <MaterialSymbolsSendOutline class="flex h-[0.8rem]" />
                     <div>{{ $t('activity.invite') }}</div>

packages/nc-gui/components/api-client/Headers.vue

@@ -74,11 +74,11 @@ const filterOption = (input: string, option: Option) => {
           </th>
 
           <th>
-            <div class="text-center font-normal mb-2">Header Name</div>
+            <div class="text-left font-normal ml-2">Header Name</div>
           </th>
 
           <th>
-            <div class="text-center font-normal mb-2">Value</div>
+            <div class="text-left font-normal ml-2">Value</div>
           </th>
 
           <th>

packages/nc-gui/components/api-client/Params.vue

@@ -15,7 +15,7 @@ const deleteParamRow = (i: number) => vModel.value.splice(i, 1)
 </script>
 
 <template>
-  <div class="flex flex-row justify-center">
+  <div class="flex flex-row justify-start">
     <table>
       <thead>
         <tr>
@@ -24,11 +24,11 @@ const deleteParamRow = (i: number) => vModel.value.splice(i, 1)
           </th>
 
           <th>
-            <div class="text-center font-normal mb-2">Param Name</div>
+            <div class="text-left font-normal ml-2">Param Name</div>
           </th>
 
           <th>
-            <div class="text-center font-normal mb-2">Value</div>
+            <div class="text-left font-normal ml-2">Value</div>
           </th>
 
           <th>

packages/nc-gui/components/dashboard/settings/AuditTab.vue

@@ -92,8 +92,8 @@ const columns = [
 <template>
   <div class="flex flex-col gap-4 w-full">
     <div v-if="!appInfo.auditEnabled" class="text-red-500">Audit logs are currently disabled by administrators.</div>
-    <div class="flex flex-row justify-between items-center">
-      <a-button class="self-start" @click="loadAudits">
+    <div class="flex flex-row justify-end items-center">
+      <a-button class="self-start !rounded-md" @click="loadAudits">
         <!-- Reload -->
         <div class="flex items-center gap-2 text-gray-600 font-light">
           <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
@@ -101,14 +101,6 @@ const columns = [
           {{ $t('general.reload') }}
         </div>
       </a-button>
-
-      <a-pagination
-        v-model:current="currentPage"
-        v-model:page-size="currentLimit"
-        :total="totalRows"
-        show-less-items
-        @change="loadAudits"
-      />
     </div>
 
     <a-table
@@ -124,6 +116,15 @@ const columns = [
         <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
       </template>
     </a-table>
+    <div class="flex flex-row justify-center items-center">
+      <a-pagination
+        v-model:current="currentPage"
+        v-model:page-size="currentLimit"
+        :total="totalRows"
+        show-less-items
+        @change="loadAudits"
+      />
+    </div>
   </div>
 </template>
 

packages/nc-gui/components/dashboard/settings/Metadata.vue

@@ -90,7 +90,11 @@ const columns = [
     <div class="flex flex-col w-3/5">
       <div class="flex flex-row justify-end items-center w-full mb-4">
         <!--        Reload -->
-        <a-button v-e="['a:proj-meta:meta-data:reload']" class="self-start nc-btn-metasync-reload" @click="loadMetaDiff">
+        <a-button
+          v-e="['a:proj-meta:meta-data:reload']"
+          class="self-start !rounded-md nc-btn-metasync-reload"
+          @click="loadMetaDiff"
+        >
           <div class="flex items-center gap-2 text-gray-600 font-light">
             <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
             {{ $t('general.reload') }}

packages/nc-gui/components/dashboard/settings/Modal.vue

@@ -178,13 +178,9 @@ watch(
       <!-- Side tabs -->
       <a-layout-sider>
         <a-menu v-model:selected-keys="selectedTabKeys" class="tabs-menu h-full" :open-keys="[]">
-          <a-menu-item
-            v-for="(tab, key) of tabsInfo"
-            :key="key"
-            class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)"
-          >
+          <a-menu-item v-for="(tab, key) of tabsInfo" :key="key" class="active:(!ring-0) hover:(!bg-primary !bg-opacity-25)">
             <div class="flex items-center space-x-2" @click="tab.onClick">
-              <component :is="tab.icon" class="group-hover:text-accent" />
+              <component :is="tab.icon" />
 
               <div class="select-none">
                 {{ tab.title }}
@@ -223,10 +219,11 @@ watch(
             <div v-if="vDataState === ''" class="flex flex-row justify-end items-center w-full gap-1">
               <a-button
                 v-if="dataSourcesAwakened"
-                class="self-start nc-btn-new-datasource"
+                type="primary"
+                class="self-start !rounded-md nc-btn-new-datasource"
                 @click="vDataState = DataSourcesSubTab.New"
               >
-                <div v-if="vDataState === ''" class="flex items-center gap-2 text-primary font-light">
+                <div v-if="vDataState === ''" class="flex items-center gap-2 font-light">
                   <component :is="iconMap.plusCircle" class="group-hover:text-accent" />
                   New
                 </div>
@@ -234,7 +231,8 @@ watch(
               <!--        Reload -->
               <a-button
                 v-e="['a:proj-meta:data-sources:reload']"
-                class="self-start nc-btn-metasync-reload"
+                type="text"
+                class="self-start !rounded-md nc-btn-metasync-reload"
                 @click="dataSourcesReload = true"
               >
                 <div class="flex items-center gap-2 text-gray-600 font-light">

packages/nc-gui/components/dashboard/settings/UIAcl.vue

@@ -125,15 +125,15 @@ const columns = [
           </template>
         </a-input>
 
-        <a-button class="self-start nc-acl-reload" @click="loadTableList">
+        <a-button type="text" ghost class="self-start !rounded-md nc-acl-reload" @click="loadTableList">
           <div class="flex items-center gap-2 text-gray-600 font-light">
             <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
             Reload
           </div>
         </a-button>
 
-        <a-button class="self-start nc-acl-save" @click="saveUIAcl">
-          <div class="flex items-center gap-2 text-gray-600 font-light">
+        <a-button type="primary" class="!rounded-md self-start nc-acl-save" @click="saveUIAcl">
+          <div class="flex items-center gap-2 text-white font-light">
             <component :is="iconMap.save" />
             Save
           </div>

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"

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

@@ -346,8 +346,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="edit-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">Edit Base</h1>
+  <div class="edit-base max-w-800px bg-white relative flex flex-col justify-start gap-2 w-full p-2">
+    <h1 class="prose-2xl font-bold self-start">Edit Base</h1>
 
     <a-form
       ref="form"
@@ -465,15 +465,16 @@ onMounted(async () => {
         >
           <a-input v-model:value="formState.dataSource.searchPath[0]" />
         </a-form-item>
-
+        <!--                Use Connection URL -->
+        <div class="flex justify-end gap-2">
+          <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>
             </template>
@@ -572,7 +573,7 @@ onMounted(async () => {
             </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>
@@ -581,13 +582,13 @@ onMounted(async () => {
         </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" @click="testConnection">
             {{ $t('activity.testDbConn') }}
           </a-button>
 
-          <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="editBase">
+          <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !rounded-md" @click="editBase">
             {{ $t('general.submit') }}
           </a-button>
         </div>

packages/nc-gui/components/dlg/QuickImport.vue

@@ -433,7 +433,7 @@ const beforeUpload = (file: UploadFile) => {
               </template>
 
               <div class="pr-10 pt-5">
-                <a-form :model="importState" name="quick-import-url-form" layout="horizontal" class="mb-0">
+                <a-form :model="importState" name="quick-import-url-form" layout="vertical" class="mb-0">
                   <a-form-item :label="importMeta.urlInputLabel" v-bind="validateInfos.url">
                     <a-input v-model:value="importState.url" size="large" />
                   </a-form-item>
@@ -482,13 +482,14 @@ const beforeUpload = (file: UploadFile) => {
       </div>
     </a-spin>
     <template #footer>
-      <a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button>
+      <a-button v-if="templateEditorModal" key="back" class="!rounded-md" @click="templateEditorModal = false">Back</a-button>
 
-      <a-button v-else key="cancel" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+      <a-button v-else key="cancel" class="!rounded-md" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
       <a-button
         v-if="activeKey === 'jsonEditorTab' && !templateEditorModal"
         key="format"
+        class="!rounded-md"
         :disabled="disableFormatJsonButton"
         @click="formatJson"
       >
@@ -499,7 +500,7 @@ const beforeUpload = (file: UploadFile) => {
         v-if="!templateEditorModal"
         key="pre-import"
         type="primary"
-        class="nc-btn-import"
+        class="nc-btn-import !rounded-md"
         :loading="preImportLoading"
         :disabled="disablePreImportButton"
         @click="handlePreImport"
@@ -507,7 +508,15 @@ const beforeUpload = (file: UploadFile) => {
         {{ $t('activity.import') }}
       </a-button>
 
-      <a-button v-else key="import" type="primary" :loading="importLoading" :disabled="disableImportButton" @click="handleImport">
+      <a-button
+        v-else
+        key="import"
+        type="primary"
+        class="!rounded-md"
+        :loading="importLoading"
+        :disabled="disableImportButton"
+        @click="handleImport"
+      >
         {{ $t('activity.import') }}
       </a-button>
     </template>

packages/nc-gui/components/dlg/TableCreate.vue

@@ -118,24 +118,21 @@ onMounted(() => {
   <a-modal
     v-model:visible="dialogShow"
     :class="{ active: dialogShow }"
-    width="max(30vw, 600px)"
+    :title="$t('activity.createTable')"
     centered
     wrap-class-name="nc-modal-table-create"
     @keydown.esc="dialogShow = false"
   >
     <template #footer>
-      <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="back" size="middle" class="!rounded-md" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
-      <a-button key="submit" size="large" type="primary" :loading="creating" @click="_createTable"
+      <a-button key="submit" size="middle" class="!rounded-md" type="primary" :loading="creating" @click="_createTable"
         >{{ $t('general.submit') }}
       </a-button>
     </template>
 
-    <div class="pl-10 pr-10 pt-5">
+    <div>
       <a-form :model="table" name="create-new-table-form" @keydown.enter="_createTable">
-        <!-- Create A New Table -->
-        <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
-
         <!-- hint="Enter table name" -->
         <!--        Table name -->
         <div class="mb-2">{{ $t('labels.tableName') }}</div>
@@ -206,7 +203,7 @@ onMounted(() => {
   overflow: hidden;
 
   &.active {
-    max-height: 200px;
+    max-height: 100px;
   }
 }
 </style>

packages/nc-gui/components/dlg/TableDuplicate.vue

@@ -50,29 +50,24 @@ const isEaster = ref(false)
   <a-modal
     v-model:visible="dialogShow"
     :class="{ active: dialogShow }"
-    width="max(30vw, 600px)"
     centered
     wrap-class-name="nc-modal-table-duplicate"
     @keydown.esc="dialogShow = false"
   >
     <template #footer>
-      <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="back" size="middle" class="!rounded-md" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
-      <a-button key="submit" size="large" type="primary" :loading="isLoading" @click="_duplicate"
+      <a-button key="submit" size="middle" type="primary" class="!rounded-md" :loading="isLoading" @click="_duplicate"
         >{{ $t('general.confirm') }}
       </a-button>
     </template>
 
-    <div class="pl-10 pr-10 pt-5">
-      <div class="prose-xl font-bold self-center my-4" @dblclick="isEaster = !isEaster">{{ $t('general.duplicate') }}</div>
-
-      <div class="mb-2">Are you sure you want to duplicate the `{{ table.title }}` table?</div>
-
-      <div class="prose-md self-center text-gray-500 mt-4">{{ $t('title.advancedSettings') }}</div>
-
-      <a-divider class="!m-0 !p-0 !my-2" />
+    <div>
+      <div class="prose-xl font-bold self-center my-4" @dblclick="isEaster = !isEaster">
+        {{ $t('general.duplicate') }} {{ table.title }}
+      </div>
 
-      <div class="text-xs p-2">
+      <div class="text-xs">
         <a-checkbox v-model:checked="options.includeData">Include data</a-checkbox>
         <a-checkbox v-model:checked="options.includeViews">Include views</a-checkbox>
         <a-checkbox v-show="isEaster" v-model:checked="options.includeHooks">Include hooks</a-checkbox>

packages/nc-gui/components/dlg/TableRename.vue

@@ -177,31 +177,33 @@ const renameTable = async (undo = false) => {
     :class="{ active: dialogShow }"
     :title="$t('activity.renameTable')"
     :mask-closable="false"
+    centered
     wrap-class-name="nc-modal-table-rename"
     @keydown.esc="dialogShow = false"
     @finish="renameTable"
   >
     <template #footer>
-      <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="back" class="!rounded-md" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
-      <a-button key="submit" type="primary" :loading="loading" @click="renameTable()">{{ $t('general.submit') }}</a-button>
+      <a-button key="submit" class="!rounded-md" type="primary" :loading="loading" @click="renameTable()">{{
+        $t('general.submit')
+      }}</a-button>
     </template>
 
-    <div class="pl-10 pr-10 pt-5">
-      <a-form :model="formState" name="create-new-table-form">
-        <!-- hint="Enter table name" -->
-        <div class="mb-2">{{ $t('msg.info.enterTableName') }}</div>
-
-        <a-form-item v-bind="validateInfos.title">
-          <a-input
-            ref="inputEl"
-            v-model:value="formState.title"
-            hide-details
-            :placeholder="$t('msg.info.enterTableName')"
-            @keydown.enter="renameTable()"
-          />
-        </a-form-item>
-      </a-form>
-    </div>
+    <a-form :model="formState" name="create-new-table-form">
+      <!-- hint="Enter table name" -->
+      <div class="mb-2">{{ $t('msg.info.enterTableName') }}</div>
+
+      <a-form-item v-bind="validateInfos.title">
+        <a-input
+          ref="inputEl"
+          v-model:value="formState.title"
+          hide-details
+          size="large"
+          :placeholder="$t('msg.info.enterTableName')"
+          @keydown.enter="renameTable()"
+        />
+      </a-form-item>
+    </a-form>
   </a-modal>
 </template>

packages/nc-gui/components/dlg/ViewCreate.vue

@@ -207,7 +207,7 @@ async function onSubmit() {
 <template>
   <a-modal
     v-model:visible="vModel"
-    class="!top-[35%]"
+    centered
     :class="{ active: vModel }"
     :confirm-loading="loading"
     wrap-class-name="nc-modal-view-create"
@@ -219,7 +219,7 @@ async function onSubmit() {
 
     <a-form ref="formValidator" layout="vertical" :model="form">
       <a-form-item :label="$t('labels.viewName')" name="title" :rules="viewNameRules">
-        <a-input ref="inputEl" v-model:value="form.title" autofocus @keydown.enter="onSubmit" />
+        <a-input ref="inputEl" size="large" v-model:value="form.title" autofocus @keydown.enter="onSubmit" />
       </a-form-item>
       <a-form-item
         v-if="form.type === ViewTypes.KANBAN"
@@ -254,8 +254,10 @@ async function onSubmit() {
     </a-form>
 
     <template #footer>
-      <a-button key="back" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
-      <a-button key="submit" type="primary" :loading="loading" @click="onSubmit">{{ $t('general.submit') }}</a-button>
+      <a-button key="back" class="!rounded-md" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="submit" class="!rounded-md" type="primary" :loading="loading" @click="onSubmit">{{
+        $t('general.submit')
+      }}</a-button>
     </template>
   </a-modal>
 </template>

packages/nc-gui/components/dlg/ViewDelete.vue

@@ -50,7 +50,7 @@ async function onDelete() {
 <template>
   <a-modal
     v-model:visible="vModel"
-    class="!top-[35%]"
+    centered
     :class="{ active: vModel }"
     :confirm-loading="isLoading"
     wrap-class-name="nc-modal-view-delete"
@@ -60,9 +60,9 @@ async function onDelete() {
     {{ $t('msg.info.deleteViewConfirmation') }}
 
     <template #footer>
-      <a-button key="back" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="back" class="!rounded-md" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
 
-      <a-button key="submit" danger html-type="submit" :loading="isLoading" @click="onDelete">
+      <a-button key="submit" class="!rounded-md" danger html-type="submit" :loading="isLoading" @click="onDelete">
         {{ $t('general.submit') }}
       </a-button>
     </template>

packages/nc-gui/components/general/ShareBaseButton.vue

@@ -43,7 +43,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         <template #title>
           <span class="text-xs">{{ $t('activity.inviteTeam') }}</span>
         </template>
-        <a-button type="primary" class="!rounded-md mr-1" size="medium">
+        <a-button type="primary" class="!rounded-md mr-1" size="middle">
           <div class="flex items-center space-x-1 cursor-pointer text-xs font-weight-bold">
             <component :is="iconMap.accountPlus" class="mr-1 nc-share-base hover:text-accent text-sm" />
             {{ $t('activity.share') }}

packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue

@@ -119,7 +119,7 @@ onMounted(() => {
         </a-button>
 
         <!-- Generate Token -->
-        <div class="flex flex-row justify-center w-full -mt-1 mb-3">
+        <div class="flex flex-row justify-start w-full -mt-1 mb-3">
           <a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
         </div>
 
@@ -129,16 +129,16 @@ onMounted(() => {
           :model="selectedTokenData"
           name="basic"
           layout="vertical"
-          class="flex flex-col justify-center space-y-6"
+          class="flex flex-col justify-center space-y-3"
           no-style
           autocomplete="off"
           @finish="generateToken"
         >
-          <a-input v-model:value="selectedTokenData.description" :placeholder="$t('labels.description')" />
+          <a-input v-model:value="selectedTokenData.description" size="middle" :placeholder="$t('labels.description')" />
 
           <!-- Generate -->
-          <div class="flex flex-row justify-center">
-            <a-button type="primary" html-type="submit">
+          <div class="flex flex-row justify-end">
+            <a-button type="primary" html-type="submit" class="!rounded-md">
               {{ $t('general.generate') }}
             </a-button>
           </div>
@@ -157,14 +157,14 @@ onMounted(() => {
       <div class="flex flex-col h-full">
         <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
 
-        <div class="flex mt-6 justify-center space-x-2">
-          <a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }}</a-button>
-          <a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }}</a-button>
+        <div class="flex mt-6 justify-end space-x-2">
+          <a-button class="!rounded-md" @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }}</a-button>
+          <a-button class="!rounded-md" type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }}</a-button>
         </div>
       </div>
     </a-modal>
 
-    <div class="flex flex-col px-10 mt-6">
+    <div class="flex flex-col px-10">
       <div class="flex flex-row justify-end">
         <div class="flex flex-row space-x-1">
           <a-button size="middle" type="text" @click="loadApiTokens()">
@@ -175,7 +175,7 @@ onMounted(() => {
           </a-button>
 
           <!--        Add New Token -->
-          <a-button size="middle" type="primary" ghost @click="openNewTokenModal">
+          <a-button type="primary" size="middle" class="!rounded-md" @click="openNewTokenModal">
             <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
               <component :is="iconMap.plus" />
               <div>{{ $t('activity.newToken') }}</div>
@@ -244,7 +244,7 @@ onMounted(() => {
                 <template #overlay>
                   <a-menu>
                     <a-menu-item>
-                      <div class="flex flex-row items-center py-3 h-[1rem]" @click="openDeleteModal(item)">
+                      <div class="flex flex-row items-center py-4 h-[1rem]" @click="openDeleteModal(item)">
                         <component :is="iconMap.delete" class="flex" />
                         <div class="text-xs pl-2">{{ $t('general.remove') }}</div>
                       </div>

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -204,6 +204,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
       :closable="false"
       width="28rem"
       centered
+      class="!rounded-md"
       :footer="null"
       wrap-class-name="nc-modal-delete-user"
     >
@@ -211,9 +212,9 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
         <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
           This action will remove this user from this project
         </div>
-        <div class="flex mt-6 justify-center space-x-2">
-          <a-button @click="showUserDeleteModal = false"> {{ $t('general.cancel') }}</a-button>
-          <a-button type="primary" danger @click="deleteUser"> {{ $t('general.confirm') }}</a-button>
+        <div class="flex mt-6 justify-end space-x-2">
+          <a-button class="!rounded-md" @click="showUserDeleteModal = false"> {{ $t('general.cancel') }}</a-button>
+          <a-button class="!rounded-md" type="primary" danger @click="deleteUser"> {{ $t('general.confirm') }}</a-button>
         </div>
       </div>
     </a-modal>
@@ -240,8 +241,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
           v-e="['c:user:invite']"
           size="middle"
           type="primary"
-          ghost
-          class="nc-invite-team"
+          class="nc-invite-team !rounded-md"
           @click="onInvite"
         >
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
@@ -254,12 +254,12 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
 
     <div class="px-5">
       <div class="flex flex-row border-b-1 pb-2 px-2">
-        <div class="flex flex-row w-4/6 space-x-1 items-center pl-1">
+        <div class="flex flex-row w-3/6 space-x-1 items-center pl-1">
           <component :is="iconMap.email" class="flex text-gray-500 -mt-0.5" />
 
           <div class="text-gray-600 text-xs space-x-1">{{ $t('labels.email') }}</div>
         </div>
-        <div class="flex flex-row justify-center w-1/6 space-x-1 items-center pl-1">
+        <div class="flex flex-row justify-start w-2/6 space-x-1 items-center pl-1">
           <component :is="iconMap.role" class="flex text-gray-500 -mt-0.5" />
 
           <div class="text-gray-600 text-xs">{{ $t('objects.role') }}</div>
@@ -270,21 +270,21 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
       </div>
 
       <div v-for="(user, index) of users" :key="index" class="flex flex-row items-center border-b-1 py-2 px-2 nc-user-row">
-        <div class="flex w-4/6 flex-wrap nc-user-email">
+        <div class="flex w-3/6 flex-wrap nc-user-email">
           {{ user.email }}
         </div>
 
-        <div class="flex w-1/6 justify-center flex-wrap ml-4">
+        <div class="flex w-2/6 justify-start gap-2 flex-wrap ml-4">
           <div
             v-if="isSuperAdmin(user)"
-            class="rounded-full px-2 py-1 nc-user-role"
+            class="rounded-full px-3 py-1 nc-user-role"
             :style="{ backgroundColor: projectRoleTagColors[OrgUserRoles.SUPER_ADMIN] }"
           >
             Super Admin
           </div>
           <div
             v-if="user.roles"
-            class="rounded-full px-2 py-1 nc-user-role"
+            class="rounded-full px-3 py-1 nc-user-role"
             :style="{ backgroundColor: projectRoleTagColors[user.roles] }"
           >
             {{ $t(`objects.roleType.${user.roles}`) }}

packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue

@@ -152,13 +152,55 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col w-full" data-testid="nc-share-base-sub-modal">
-    <div class="flex flex-row items-center space-x-0.5 pl-2 h-[0.8rem]">
-      <component :is="iconMap.share" />
+  <div class="flex flex-col gap-2 w-full" data-testid="nc-share-base-sub-modal">
+    <!--    Generate publicly shareable readonly base -->
+    <div class="flex text-xs text-gray-500 justify-start ml-1">{{ $t('msg.info.generatePublicShareableReadonlyBase') }}</div>
 
-      <div class="text-xs">{{ $t('activity.shareBase.link') }}</div>
-    </div>
+    <div class="flex flex-row justify-between mx-1">
+      <a-dropdown v-model="showEditBaseDropdown" class="flex" overlay-class-name="nc-dropdown-shared-base-toggle">
+        <a-button>
+          <div class="flex flex-row rounded-md items-center space-x-2 nc-disable-shared-base">
+            <div v-if="base?.uuid">{{ $t('activity.shareBase.enable') }}</div>
+            <div v-else>{{ $t('activity.shareBase.disable') }}</div>
+            <IcRoundKeyboardArrowDown class="h-[1rem]" />
+          </div>
+        </a-button>
 
+        <template #overlay>
+          <a-menu>
+            <a-menu-item>
+              <div v-if="base?.uuid" class="py-3" @click="disableSharedBase">{{ $t('activity.shareBase.disable') }}</div>
+              <div v-else class="py-3" @click="createShareBase(ShareBaseRole.Viewer)">{{ $t('activity.shareBase.enable') }}</div>
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+
+      <a-select
+        v-if="base?.uuid"
+        v-model:value="base.role"
+        class="flex nc-shared-base-role"
+        dropdown-class-name="nc-dropdown-share-base-role"
+      >
+        <template #suffixIcon>
+          <div class="flex flex-row">
+            <IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" />
+          </div>
+        </template>
+
+        <a-select-option
+          v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]"
+          :key="index"
+          :value="role"
+          dropdown-class-name="capitalize"
+          @click="createShareBase(role)"
+        >
+          <div class="w-full px-2 capitalize">
+            {{ role }}
+          </div>
+        </a-select-option>
+      </a-select>
+    </div>
     <div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm w-full justify-between">
       <span class="flex text-xs overflow-x-hidden overflow-ellipsis text-gray-700 pl-2 nc-url">{{ url }}</span>
 
@@ -212,54 +254,5 @@ onMounted(() => {
         </a-tooltip>
       </div>
     </div>
-
-    <!--    Generate publicly shareable readonly base -->
-    <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">{{ $t('msg.info.generatePublicShareableReadonlyBase') }}</div>
-
-    <div class="mt-4 flex flex-row justify-between mx-1">
-      <a-dropdown v-model="showEditBaseDropdown" class="flex" overlay-class-name="nc-dropdown-shared-base-toggle">
-        <a-button>
-          <div class="flex flex-row items-center space-x-2 nc-disable-shared-base">
-            <div v-if="base?.uuid">{{ $t('activity.shareBase.enable') }}</div>
-            <div v-else>{{ $t('activity.shareBase.disable') }}</div>
-            <IcRoundKeyboardArrowDown class="h-[1rem]" />
-          </div>
-        </a-button>
-
-        <template #overlay>
-          <a-menu>
-            <a-menu-item>
-              <div v-if="base?.uuid" class="py-3" @click="disableSharedBase">{{ $t('activity.shareBase.disable') }}</div>
-              <div v-else class="py-3" @click="createShareBase(ShareBaseRole.Viewer)">{{ $t('activity.shareBase.enable') }}</div>
-            </a-menu-item>
-          </a-menu>
-        </template>
-      </a-dropdown>
-
-      <a-select
-        v-if="base?.uuid"
-        v-model:value="base.role"
-        class="flex nc-shared-base-role"
-        dropdown-class-name="nc-dropdown-share-base-role"
-      >
-        <template #suffixIcon>
-          <div class="flex flex-row">
-            <IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" />
-          </div>
-        </template>
-
-        <a-select-option
-          v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]"
-          :key="index"
-          :value="role"
-          dropdown-class-name="capitalize"
-          @click="createShareBase(role)"
-        >
-          <div class="w-full px-2 capitalize">
-            {{ role }}
-          </div>
-        </a-select-option>
-      </a-select>
-    </div>
   </div>
 </template>

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -230,19 +230,13 @@ watch(
         </template>
 
         <div v-else class="flex flex-col pb-4">
-          <div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
+          <div v-if="selectedUser" class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
             <component :is="iconMap.account" />
             <div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? $t('activity.editUser') : $t('activity.inviteTeam') }}</div>
           </div>
 
-          <div class="border-1 py-3 px-4 rounded-md mt-1">
-            <a-form
-              ref="formRef"
-              :validate-on-rule-change="false"
-              :model="usersData"
-              validate-trigger="onBlur"
-              @finish="saveUser"
-            >
+          <a-form ref="formRef" :validate-on-rule-change="false" :model="usersData" validate-trigger="onBlur" @finish="saveUser">
+            <div class="border-1 py-3 px-4 rounded-md mt-1">
               <div class="flex flex-row space-x-4">
                 <div class="flex flex-col w-3/4">
                   <a-form-item
@@ -256,6 +250,7 @@ watch(
                     <a-input
                       ref="emailField"
                       v-model:value="usersData.emails"
+                      size="middle"
                       validate-trigger="onBlur"
                       :placeholder="$t('labels.email')"
                       :disabled="!!selectedUser"
@@ -267,11 +262,16 @@ watch(
                   <a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
 
-                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
+                    <a-select
+                      v-model:value="usersData.role"
+                      size="middle"
+                      class="nc-user-roles !rounded-md"
+                      dropdown-class-name="nc-dropdown-user-role"
+                    >
                       <a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role" class="nc-role-option">
                         <div class="flex flex-row h-full justify-start items-center">
                           <div
-                            class="px-2 py-1 flex rounded-full text-xs"
+                            class="px-3 py-1 flex rounded-full text-xs"
                             :style="{ backgroundColor: projectRoleTagColors[role] }"
                           >
                             {{ role }}
@@ -283,8 +283,8 @@ watch(
                 </div>
               </div>
 
-              <div class="flex flex-row justify-center">
-                <a-button type="primary" html-type="submit">
+              <div class="flex flex-row justify-end">
+                <a-button type="primary" html-type="submit" class="!rounded-md">
                   <div v-if="selectedUser">{{ $t('general.save') }}</div>
 
                   <div v-else class="flex flex-row justify-center items-center space-x-1.5">
@@ -293,11 +293,11 @@ watch(
                   </div>
                 </a-button>
               </div>
-            </a-form>
-          </div>
+            </div>
+          </a-form>
         </div>
 
-        <div class="flex mt-4">
+        <div class="flex">
           <LazyTabsAuthUserManagementShareBase />
         </div>
       </div>

packages/nc-gui/components/webhook/Drawer.vue

@@ -44,7 +44,13 @@ async function addHook() {
       </a-layout-content>
 
       <a-layout-footer class="!bg-white border-t flex">
-        <a-button v-e="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
+        <a-button
+          v-e="['e:hiring']"
+          class="mx-auto mb-4 !rounded-md"
+          href="https://angel.co/company/nocodb"
+          target="_blank"
+          size="large"
+        >
           🚀 {{ $t('labels.weAreHiring') }}! 🚀
         </a-button>
       </a-layout-footer>

packages/nc-gui/components/webhook/Editor.vue

@@ -460,15 +460,15 @@ onMounted(async () => {
       </div>
     </div>
 
-    <div>
-      <a-button class="mr-3 nc-btn-webhook-test" size="large" @click="testWebhook">
+    <div class="flex flex-row gap-2">
+      <a-button class="nc-btn-webhook-test !rounded-md" size="middle" @click="testWebhook">
         <div class="flex items-center">
           <MdiGestureDoubleTap class="mr-2" />
           {{ $t('activity.testWebhook') }}
         </div>
       </a-button>
 
-      <a-button class="nc-btn-webhook-save" type="primary" size="large" @click.prevent="saveHooks">
+      <a-button class="nc-btn-webhook-save !rounded-md" type="primary" size="middle" @click.prevent="saveHooks">
         <div class="flex items-center">
           <component :is="iconMap.save" class="mr-2" />
           <!-- Save -->

packages/nc-gui/components/webhook/List.vue

@@ -108,9 +108,9 @@ onMounted(() => {
 
       <a-button
         v-e="['c:webhook:add']"
-        class="float-right nc-btn-create-webhook"
+        class="float-right !rounded-md nc-btn-create-webhook"
         type="primary"
-        size="large"
+        size="middle"
         @click="emit('add')"
       >
         {{ $t('activity.addWebhook') }}

packages/nc-gui/lang/en.json

@@ -385,10 +385,10 @@
     "nextRecord": "Next record",
     "previousRecord": "Previous record",
     "copyApiURL": "Copy API URL",
-    "createTable": "Table Create",
+    "createTable": "Create New Table",
     "refreshTable": "Tables Refresh",
-    "renameTable": "Table Rename",
-    "deleteTable": "Table Delete",
+    "renameTable": "Rename Table",
+    "deleteTable": "Delete Table",
     "addField": "Add new field to this table",
     "setDisplay": "Set as Display value",
     "addRow": "Add new row",