refactor(gui): ui rearrangements

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -97,7 +97,7 @@ const descriptionInput = ref((el) => {
 </script>
 
 <template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
+  <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-cy="nc-token-list">
       <div class="py-2 flex gap-4 items-center">

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

@@ -184,18 +184,18 @@ const copyPasswordResetUrl = async (user: User) => {
               <a-select
                 v-else
                 v-model:value="record.roles"
-                class="w-[220px]"
+                class="w-[220px] nc-user-roles"
                 :dropdown-match-select-width="false"
                 @change="updateRole(record.id, record.roles)"
               >
-                <a-select-option :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
+                <a-select-option class="nc-role-option" :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
                   <div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
                   <span class="text-gray-500 text-xs whitespace-normal">
                     {{ $t('msg.info.roles.orgCreator') }}
                   </span>
                 </a-select-option>
 
-                <a-select-option :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
+                <a-select-option class="nc-role-option" :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
                   <div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
                   <span class="text-gray-500 text-xs whitespace-normal">
                     {{ $t('msg.info.roles.orgViewer') }}

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

@@ -213,14 +213,14 @@ const emailInput = ref((el) => {
                     <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-option :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
+                      <a-select-option class="nc-role-option" :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
                         <div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
                         <span class="text-gray-500 text-xs whitespace-normal">
                           {{ $t('msg.info.roles.orgCreator') }}
                         </span>
                       </a-select-option>
 
-                      <a-select-option :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
+                      <a-select-option class="nc-role-option" :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
                         <div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
                         <span class="text-gray-500 text-xs whitespace-normal">
                           {{ $t('msg.info.roles.orgViewer') }}

packages/nc-gui/layouts/base.vue

@@ -22,6 +22,8 @@ const logout = () => {
 
 const { hooks } = useNuxtApp()
 
+const isDashboard = computed(() => !!route.params.projectType)
+
 /** when page suspensions have finished, check if a sidebar element was teleported into the layout */
 hooks.hook('page:finish', () => {
   if (sidebar.value) {
@@ -39,7 +41,7 @@ hooks.hook('page:finish', () => {
     <a-layout class="!flex-col">
       <a-layout-header
         v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
-        class="flex !bg-primary items-center text-white pl-4 pr-5"
+        class="flex !bg-primary items-center text-white !pl-2 !pr-5"
       >
         <div
           v-if="!route.params.projectType"
@@ -52,7 +54,10 @@ hooks.hook('page:finish', () => {
             <template #title>
               {{ currentVersion }}
             </template>
-            <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+            <div class="flex items-center gap-2">
+              <img width="25" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+              <img width="90" v-show="!isDashboard" alt="NocoDB" src="~/assets/img/brand/text.png" />
+            </div>
           </a-tooltip>
         </div>
 

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -189,20 +189,20 @@ onBeforeUnmount(reset)
         <div
           style="height: var(--header-height)"
           :class="isOpen ? 'pl-4' : ''"
-          class="flex items-center !bg-primary text-white px-1 gap-2"
+          class="flex items-center !bg-primary text-white px-1 gap-1"
         >
           <div
             v-if="isOpen && !isSharedBase"
             v-e="['c:navbar:home']"
             data-testid="nc-noco-brand-icon"
-            class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
+            class="w-[29px] min-w-[29px] transition-all duration-200 py-1 pl-1 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
             @click="navigateTo('/')"
           >
             <a-tooltip placement="bottom">
               <template #title>
                 {{ currentVersion }}
               </template>
-              <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+              <img width="25" class="-mr-1" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
             </a-tooltip>
           </div>
 
@@ -216,7 +216,7 @@ onBeforeUnmount(reset)
               <template #title>
                 {{ currentVersion }}
               </template>
-              <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+              <img width="25" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
             </a-tooltip>
           </a>
 
@@ -234,12 +234,12 @@ onBeforeUnmount(reset)
             >
               <template v-if="isOpen">
                 <a-tooltip v-if="project.title?.length > 12" placement="bottom">
-                  <div class="text-lg font-semibold truncate">{{ project.title }}</div>
+                  <div class="text-md font-semibold truncate">{{ project.title }}</div>
                   <template #title>
                     <div class="text-sm">{{ project.title }}</div>
                   </template>
                 </a-tooltip>
-                <div v-else class="text-lg font-semibold truncate">{{ project.title }}</div>
+                <div v-else class="text-md font-semibold truncate capitalize">{{ project.title }}</div>
 
                 <MdiChevronDown class="min-w-[17px] group-hover:text-accent text-md" />
               </template>
@@ -257,7 +257,7 @@ onBeforeUnmount(reset)
                       <MdiFolder class="group-hover:text-accent text-xl" />
 
                       <div class="flex flex-col">
-                        <div class="text-lg group-hover:(!text-primary) font-semibold">
+                        <div class="text-lg group-hover:(!text-primary) font-semibold capitalize">
                           <GeneralTruncateText>{{ project.title }}</GeneralTruncateText>
                         </div>
 

packages/nc-gui/pages/account/index.vue

@@ -9,12 +9,12 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
 </script>
 
 <template>
-  <div class="container mx-auto h-full">
+  <div class="mx-auto h-full">
     <a-layout class="h-full overflow-y-auto flex">
       <!-- Side tabs -->
       <a-layout-sider>
-        <div class="pt-4 h-full bg-white nc-user-sidebar">
+        <div class="h-full bg-white nc-user-sidebar">
-          <a-menu :inline-indent="12" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys"
+          <a-menu :inline-indent="16" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys"
                   class="tabs-menu h-full" mode="inline">
             <!--            <a-menu-item
                           key="users-old"
@@ -28,21 +28,25 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
                           </div>
                         </a-menu-item> -->
 
+
+            <div class="text-xs text-gray-500 ml-4 pt-4 pb-2 font-weight-bold">Account Settings</div>
+
             <a-sub-menu key="users" class="!bg-white">
               <template #icon>
                 <MdiAccountSupervisorOutline />
               </template>
               <template #title>Users</template>
+
               <a-menu-item v-if="isUIAllowed('superAdminUserManagement')" key="list" class="text-xs"
                            @click="navigateTo('/account/users/list')">
                 <span class="ml-4">User Management</span>
               </a-menu-item>
-              <a-menu-item key="settings" class="text-xs" @click="navigateTo('/account/users/settings')">
-                <span class="ml-4">Settings</span>
-              </a-menu-item>
               <a-menu-item key="password-reset" class="text-xs" @click="navigateTo('/account/users/password-reset')">
                 <span class="ml-4">Reset Password</span>
               </a-menu-item>
+              <a-menu-item key="settings" class="text-xs" @click="navigateTo('/account/users/settings')">
+                <span class="ml-4">Settings</span>
+              </a-menu-item>
             </a-sub-menu>
 
             <a-menu-item
@@ -73,7 +77,9 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
 
       <!-- Sub Tabs -->
       <a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500">
-        <NuxtPage />
+        <div class="container mx-auto">
+          <NuxtPage />
+        </div>
       </a-layout-content>
     </a-layout>
   </div>
@@ -83,4 +89,20 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
 :deep(.nc-user-sidebar .ant-menu-sub.ant-menu-inline) {
   @apply bg-transparent;
 }
+
+:deep(.nc-user-sidebar .ant-menu-item-only-child), :deep(.ant-menu-submenu-title) {
+  @apply !h-[30px] !leading-[30px];
+}
+
+:deep(.ant-menu-submenu-arrow){
+  @apply !text-gray-400;
+}
+
+
+:deep(.ant-menu-submenu-selected .ant-menu-submenu-arrow){
+  @apply !text-inherit;
+}
+
+
+
 </style>