fix: use theme primary for project color

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -103,6 +103,7 @@ export function useProject(projectId?: MaybeRef<string>) {
 
   async function saveTheme(theme: Partial<ThemeConfig>) {
     await updateProject({
+      color: theme.primaryColor,
       meta: JSON.stringify({
         ...projectMeta.value,
         theme,

packages/nc-gui-v2/pages/index/index/[id].vue

@@ -2,7 +2,6 @@
 import type { Form } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
-import tinycolor from 'tinycolor2'
 import {
   extractSdkResponseErrorMsg,
   navigateTo,
@@ -38,11 +37,9 @@ const form = ref<typeof Form>()
 
 const formState = reactive<Partial<ProjectType>>({
   title: '',
-  color: '#FFFFFF00',
 })
 
 const renameProject = async () => {
-  formState.color = formState.color === '#FFFFFF00' ? '' : formState.color
   try {
     await updateProject(formState)
 
@@ -55,7 +52,6 @@ const renameProject = async () => {
 // select and focus title field on load
 onMounted(async () => {
   formState.title = project.value.title as string
-  formState.color = project.value.color && tinycolor(project.value.color).isValid() ? project.value.color : '#FFFFFF00'
   await nextTick(() => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
@@ -98,27 +94,6 @@ onMounted(async () => {
         <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
 
-      <div class="flex items-center">
-        <span>Project color: </span>
-        <a-menu class="!border-0 !m-0 !p-0">
-          <a-sub-menu key="project-color">
-            <template #title>
-              <button type="button" class="color-selector" :style="{ 'background-color': formState.color }">
-                <MdiNull v-if="formState.color === '#FFFFFF00'" />
-              </button>
-            </template>
-            <template #expandIcon></template>
-            <GeneralColorPicker v-model="formState.color" name="color" class="nc-metadb-project-color" />
-          </a-sub-menu>
-        </a-menu>
-        <MdiClose
-          v-show="formState.color !== '#FFFFFF00'"
-          class="cursor-pointer"
-          :style="{ color: 'red' }"
-          @click="formState.color = '#FFFFFF00'"
-        />
-      </div>
-
       <div class="text-center">
         <button type="submit" class="submit">
           <span class="flex items-center gap-2">
@@ -156,23 +131,4 @@ onMounted(async () => {
     }
   }
 }
-
-:deep(.ant-menu-submenu-title) {
-  @apply !p-0 !mx-2;
-}
-
-.color-selector {
-  position: relative;
-  height: 32px;
-  width: 32px;
-  border-radius: 5px;
-  -webkit-text-stroke-width: 1px;
-  -webkit-text-stroke-color: white;
-  @apply flex text-gray-500 border-4 items-center justify-center;
-}
-
-.color-selector:hover {
-  filter: brightness(90%);
-  -webkit-filter: brightness(90%);
-}
 </style>

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

@@ -160,10 +160,9 @@ await loadProjects()
         <a-table-column key="title" :title="$t('general.title')" data-index="title">
           <template #default="{ text, record }">
             <div
-              class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2"
-              :class="{ 'border-l-4': record.color }"
+              class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2 border-l-4"
               :style="{
-                'border-color': record.color,
+                'border-color': record.color || themeV2Colors['royal-blue'].DEFAULT,
               }"
             >
               {{ text }}