chore(gui-v2): resolve conflicts

packages/nc-gui-v2/app.vue

@@ -36,7 +36,7 @@ const sidebarOpen = computed({
       <div class="flex-1" />
 
       <div class="ml-4 flex justify-center flex-1">
-        <div class="flex items-center gap-2 cursor-pointer" @click="navigateTo('/')">
+        <div class="flex items-center gap-2 cursor-pointer nc-noco-brand-icon" @click="navigateTo('/')">
           <img width="35" src="~/assets/img/icons/512x512-trans.png" />
           <span class="prose-xl">NocoDB</span>
         </div>
@@ -59,14 +59,14 @@ const sidebarOpen = computed({
 
         <template v-if="$state.signedIn.value">
           <a-dropdown :trigger="['click']">
-            <MdiDotsVertical class="md:text-xl cursor-pointer" @click.prevent />
+            <MdiDotsVertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />
 
             <template #overlay>
               <a-menu class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded">
                 <a-menu-item key="0" class="!rounded-t">
                   <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
                     <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
-                    <span class="prose group-hover:text-black">{{ email }}</span>
+                    <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
                   </nuxt-link>
                 </a-menu-item>
 
@@ -75,7 +75,9 @@ const sidebarOpen = computed({
                 <a-menu-item key="1" class="!rounded-b">
                   <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="signOut">
                     <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
-                    <span class="prose font-semibold text-gray-500 group-hover:text-black">{{ $t('general.signOut') }}</span>
+                    <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">{{
+                      $t('general.signOut')
+                    }}</span>
                   </div>
                 </a-menu-item>
               </a-menu>

packages/nc-gui-v2/components/dashboard/TabView.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import useTabs from '~/composables/useTabs'
-import MdiCloseIcon from '~icons/mdi/close'
 import MdiPlusIcon from '~icons/mdi/plus'
 import MdiTableIcon from '~icons/mdi/table'
 import MdiCsvIcon from '~icons/mdi/file-document-outline'

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -198,7 +198,7 @@ const addTableTab = (table: TableType) => {
 
 <template>
   <div class="nc-treeview-container flex flex-column">
-    <div class="p-1">
+    <div class="px-3 py-2">
       <a-input-search
         v-model:value="filterQuery"
         size="small"
@@ -215,7 +215,7 @@ const addTableTab = (table: TableType) => {
           @contextmenu="setMenuContext('main')"
         >
           <MdiTable class="mr-1 text-gray-500" />
-          <span class="flex-grow text-bold"
+          <span class="flex-grow text-bold nc-project-tree"
             >{{ $t('objects.tables') }} <template v-if="tables?.length">({{ tables.length }})</template></span
           >
           <MdiPlus v-t="['c:table:create:navdraw']" class="text-gray-500" @click.stop="tableCreateDlg = true" />
@@ -231,17 +231,19 @@ const addTableTab = (table: TableType) => {
                 v-for="table in tables"
                 :key="table.id"
                 v-t="['a:table:open']"
-                :class="{ hidden: !filteredTables?.includes(table) }"
-                class="!pl-1 py-1 !h-[28px] !my-0 text-sm pointer group"
+                :class="[{ hidden: !filteredTables?.includes(table) }, `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`]"
+                class="!pl-1 py-1 !h-[28px] !my-0 text-sm cursor-pointer group"
                 :data-order="table.order"
                 :data-id="table.id"
                 @click="addTableTab(table)"
               >
                 <div class="flex align-center gap-1 h-full" @contextmenu="setMenuContext('table', table)">
-                  <MdiDrag class="transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 nc-drag-icon cursor-move" />
+                  <MdiDrag
+                    :class="`transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 nc-drag-icon cursor-move nc-child-draggable-icon-${table.title}`"
+                  />
                   <component :is="icon(table)" class="text-[10px] text-gray-500" />
 
-                  <span class="text-xs flex-1 ml-2">{{ table.title }}</span>
+                  <span class="nc-tbl-title text-xs flex-1 ml-2">{{ table.title }}</span>
                   <a-dropdown :trigger="['click']" @click.stop>
                     <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
                     <template #overlay>
@@ -298,12 +300,8 @@ const addTableTab = (table: TableType) => {
 </template>
 
 <style scoped>
-.pointer {
-  cursor: pointer;
-}
-
 .nc-treeview-container {
-  height: calc(100vh - var(--header-height));
+  @apply h-[calc(100vh_-_var(--header-height))];
 }
 
 .nc-treeview-footer-item {
@@ -317,4 +315,8 @@ const addTableTab = (table: TableType) => {
 :deep(.ant-dropdown-menu-title-content) {
   @apply !p-2;
 }
+
+:deep(.ant-input-group-addon:last-child) {
+  @apply top-[-0.5px];
+}
 </style>

packages/nc-gui-v2/components/dashboard/settings/AppStore.vue

@@ -95,24 +95,24 @@ onMounted(async () => {
     <a-card
       v-for="(app, i) in apps"
       :key="i"
-      class="relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full"
+      :class="`relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full nc-app-store-card-${app.title}`"
       :body-style="{ width: '100%' }"
     >
       <div class="install-btn flex flex-row justify-end space-x-1">
         <a-button v-if="app.parsedInput" size="small" outlined @click="showInstallPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize">
+          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-edit">
             <MdiEditIcon class="pr-0.5" :height="12" />
             Edit
           </div>
         </a-button>
         <a-button v-if="app.parsedInput" size="small" outlined @click="showResetPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize">
+          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-reset">
             <MdiCloseCircleIcon />
             <div class="flex ml-0.5">Reset</div>
           </div>
         </a-button>
         <a-button v-else size="small" outlined @click="showInstallPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize">
+          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-install">
             <MdiPlusIcon />
             Install
           </div>

packages/nc-gui-v2/components/general/Language.vue

@@ -36,7 +36,7 @@ onMounted(() => {
 <template>
   <v-menu class="select-none">
     <template #activator="{ props }">
-      <MaterialSymbolsTranslate class="md:text-xl cursor-pointer" @click="props.onClick" />
+      <MaterialSymbolsTranslate class="md:text-xl cursor-pointer nc-menu-translate" @click="props.onClick" />
     </template>
     <v-list class="scrollbar min-w-50 max-h-90vh overflow-auto !py-0 dark:(!bg-gray-800 !text-white)">
       <v-list-item

packages/nc-gui-v2/composables/useGlobalState.ts

@@ -27,8 +27,8 @@ export const useGlobalState = (): GlobalState => {
   const preferredLanguages = $(usePreferredLanguages())
   /** todo: reimplement; get the preferred dark mode setting, according to browser settings */
   //   const prefersDarkMode = $(usePreferredDark())
-
   const prefersDarkMode = false
+
   /** get current breakpoints (for enabling sidebar) */
   const breakpoints = useBreakpoints(breakpointsTailwind)
 
@@ -72,6 +72,9 @@ export const useGlobalState = (): GlobalState => {
   /** saves a reactive state, any change to these values will write/delete to localStorage */
   const storage = $(useStorage<StoredState>(storageKey, initialState))
 
+  /** force turn off of dark mode, regardless of previously stored settings */
+  storage.darkMode = false
+
   /** current token ref, used by `useJwt` to reactively parse our token payload */
   let token = $computed({
     get: () => storage.token || '',

packages/nc-gui-v2/pages/signin.vue

@@ -74,7 +74,7 @@ const resetError = () => {
       ref="formValidator"
       :model="form"
       layout="vertical"
-      class="signin h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
+      class="signin h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center nc-form-signin"
       @finish="signIn"
     >
       <div class="h-full w-full flex flex-col flex-wrap items-center pt-[100px]">

packages/nc-gui-v2/pages/signup.vue

@@ -71,7 +71,7 @@ const resetError = () => {
       ref="formValidator"
       :model="form"
       layout="vertical"
-      class="signup h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
+      class="signup h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center nc-form-signup"
       @finish="signUp"
     >
       <div class="h-full w-full flex flex-col flex-wrap pt-[100px]">