From 0444a20bd4526f1c4035e41e1ac160280c55ce5f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 19 Aug 2022 14:46:21 +0200
Subject: [PATCH] refactor(gui-v2): replace `pink-500` with `accent` color

---
 packages/nc-gui-v2/assets/style.scss          |  8 ++---
 .../components/cell/attachment/Carousel.vue   |  4 +--
 .../components/cell/attachment/Modal.vue      | 12 ++++----
 .../components/cell/attachment/index.vue      |  8 ++---
 .../components/dashboard/TreeView.vue         | 12 ++++----
 .../components/general/MiniSidebar.vue        | 10 +++----
 .../components/general/PreviewAs.vue          |  4 +--
 .../smartsheet-header/VirtualCellIcon.vue     |  6 ++--
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  2 +-
 .../nc-gui-v2/components/template/Editor.vue  |  8 ++---
 packages/nc-gui-v2/layouts/base.vue           | 14 ++++-----
 .../pages/[projectType]/[projectId]/index.vue | 30 +++++++++----------
 .../[projectId]/index/index/index.vue         |  2 +-
 packages/nc-gui-v2/pages/index/index.vue      | 12 ++++----
 14 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style.scss b/packages/nc-gui-v2/assets/style.scss
index af194fe601..8da9a28bda 100644
--- a/packages/nc-gui-v2/assets/style.scss
+++ b/packages/nc-gui-v2/assets/style.scss
@@ -49,7 +49,7 @@ a {
 
   &:hover {
     .nc-icon {
-      @apply text-pink-500;
+      @apply text-accent;
     }
   }
 }
@@ -191,11 +191,11 @@ a {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-pink-500;
+    @apply transform scale-110 ring ring-accent;
   }
 
   &:active::after {
-    @apply ring ring-pink-500;
+    @apply ring ring-accent;
   }
 }
 
@@ -232,7 +232,7 @@ a {
 }
 
 .ant-dropdown-menu-item, .ant-menu-item {
-  @apply !py-0 active:(ring ring-pink-500);
+  @apply !py-0 active:(ring ring-accent);
 }
 
 .ant-dropdown-menu-title-content,
diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index e57c41520a..74fcf8deb9 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -55,7 +55,7 @@ onClickOutside(carouselRef, () => {
         </div>
 
         <div
-          class="select-none group hover:ring active:ring-pink-500 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
+          class="select-none group hover:ring active:ring-accent cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
           @click.stop="downloadFile(selectedImage)"
         >
           <h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>
@@ -133,7 +133,7 @@ onClickOutside(carouselRef, () => {
 }
 
 .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
-  @apply text-4xl text-white hover:text-primary active:text-pink-500 opacity-100 cursor-pointer z-1;
+  @apply text-4xl text-white hover:text-primary active:text-accent opacity-100 cursor-pointer z-1;
 }
 .ant-carousel :deep(.custom-slick-arrow:before) {
   display: none;
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 3cf78de1ce..8b754b4bfd 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -66,7 +66,7 @@ function onClick(item: Record<string, any>) {
           class="nc-attach-file group"
           @click="open"
         >
-          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
+          <MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120)" />
           Attach File
         </div>
 
@@ -83,9 +83,9 @@ function onClick(item: Record<string, any>) {
         <general-overlay
           v-model="isOverDropZone"
           inline
-          class="text-white ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+          class="text-white ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
         >
-          <MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
+          <MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
           <div class="text-white text-3xl">Drop here</div>
         </general-overlay>
       </template>
@@ -155,7 +155,7 @@ function onClick(item: Record<string, any>) {
   .nc-attach-file {
     @apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
     @apply hover:(bg-primary bg-opacity-10 text-primary ring);
-    @apply active:(ring-pink-500 bg-primary bg-opacity-20);
+    @apply active:(ring-accent bg-primary bg-opacity-20);
   }
 
   .nc-attachment-item {
@@ -176,7 +176,7 @@ function onClick(item: Record<string, any>) {
       }
 
       &:active::after {
-        @apply ring ring-pink-500 shadow transform scale-103;
+        @apply ring ring-accent shadow transform scale-103;
       }
     }
   }
@@ -185,7 +185,7 @@ function onClick(item: Record<string, any>) {
     @apply bg-white absolute bottom-2 right-2;
     @apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
     @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
-    @apply active:(ring border-0 ring-pink-500);
+    @apply active:(ring border-0 ring-accent);
   }
 
   .nc-attachment-remove {
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 1dcabe7faf..7d534b761a 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -100,9 +100,9 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         v-model="isOverDropZone"
         inline
         :target="currentCellRef"
-        class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+        class="text-white text-lg ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
       >
-        <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+        <MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here
       </general-overlay>
     </template>
 
@@ -118,7 +118,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         <template #title> Click or drop a file into cell </template>
 
         <div class="flex items-center gap-2">
-          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120) text-gray-500 text-[10px]" />
+          <MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120) text-gray-500 text-[10px]" />
 
           <div v-if="!visibleItems.length" class="group-hover:text-primary text-gray-500 text-xs">Add file(s)</div>
         </div>
@@ -167,7 +167,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
           <template #title> View attachments </template>
 
           <MdiArrowExpand
-            class="select-none transform group-hover:(text-pink-500 scale-120) text-[10px] text-gray-500"
+            class="select-none transform group-hover:(text-accent scale-120) text-[10px] text-gray-500"
             @click.stop="modalVisible = true"
           />
         </a-tooltip>
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 793ce5b03f..33d08071a3 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -250,7 +250,7 @@ function openTableCreateDialog() {
                       @click="openAirtableImportDialog"
                     >
                       <div class="color-transition nc-project-menu-item group">
-                        <MdiTableLarge class="group-hover:text-pink-500" />
+                        <MdiTableLarge class="group-hover:text-accent" />
                         <!-- TODO: i18n -->
                         Airtable
                       </div>
@@ -258,7 +258,7 @@ function openTableCreateDialog() {
 
                     <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
                       <div class="color-transition nc-project-menu-item group">
-                        <MdiFileDocumentOutline class="group-hover:text-pink-500" />
+                        <MdiFileDocumentOutline class="group-hover:text-accent" />
                         <!-- TODO: i18n -->
                         CSV file
                       </div>
@@ -266,7 +266,7 @@ function openTableCreateDialog() {
 
                     <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
                       <div class="color-transition nc-project-menu-item group">
-                        <MdiCodeJson class="group-hover:text-pink-500" />
+                        <MdiCodeJson class="group-hover:text-accent" />
                         <!-- TODO: i18n -->
                         JSON file
                       </div>
@@ -278,7 +278,7 @@ function openTableCreateDialog() {
                       @click="openQuickImportDialog('excel')"
                     >
                       <div class="color-transition nc-project-menu-item group">
-                        <MdiFileExcel class="group-hover:text-pink-500" />
+                        <MdiFileExcel class="group-hover:text-accent" />
                         <!-- TODO: i18n -->
                         Microsoft Excel
                       </div>
@@ -294,7 +294,7 @@ function openTableCreateDialog() {
                       target="_blank"
                       class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
                     >
-                      <MdiOpenInNew class="group-hover:text-pink-500" />
+                      <MdiOpenInNew class="group-hover:text-accent" />
                       <!-- TODO: i18n -->
                       Request a data source you need?
                     </a>
@@ -505,7 +505,7 @@ function openTableCreateDialog() {
 }
 
 :deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-pink-500);
+  @apply !py-0 active:(ring ring-accent);
 }
 
 :deep(.ant-dropdown-menu-title-content) {
diff --git a/packages/nc-gui-v2/components/general/MiniSidebar.vue b/packages/nc-gui-v2/components/general/MiniSidebar.vue
index 06753cf2ce..8237b9c85f 100644
--- a/packages/nc-gui-v2/components/general/MiniSidebar.vue
+++ b/packages/nc-gui-v2/components/general/MiniSidebar.vue
@@ -74,24 +74,24 @@ const logout = () => {
                 </span>
               </template>
 
-              <a-menu-item class="active:(ring ring-pink-500)">
+              <a-menu-item class="active:(ring ring-accent)">
                 <div
                   v-t="['c:project:create:xcdb']"
                   class="group flex items-center gap-2 py-2 hover:text-primary"
                   @click="navigateTo('/project/create')"
                 >
-                  <MdiPlus class="text-lg group-hover:text-pink-500" />
+                  <MdiPlus class="text-lg group-hover:text-accent" />
                   {{ $t('activity.createProject') }}
                 </div>
               </a-menu-item>
 
-              <a-menu-item class="rounded-b active:(ring ring-pink-500)">
+              <a-menu-item class="rounded-b active:(ring ring-accent)">
                 <div
                   v-t="['c:project:create:extdb']"
                   class="group flex items-center gap-2 py-2 hover:text-primary"
                   @click="navigateTo('/project/create-external')"
                 >
-                  <MdiDatabaseOutline class="text-lg group-hover:text-pink-500" />
+                  <MdiDatabaseOutline class="text-lg group-hover:text-accent" />
                   <div v-html="$t('activity.createProjectExtended.extDB')" />
                 </div>
               </a-menu-item>
@@ -125,7 +125,7 @@ const logout = () => {
     @apply flex w-full justify-center items-center h-12 group p-2;
 
     &.active {
-      @apply bg-pink-500 border-t-1 border-b-1;
+      @apply bg-accent border-t-1 border-b-1;
     }
   }
 }
diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index 4fc6413ac0..2470447fd2 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -80,7 +80,7 @@ watch(previewAs, () => window.location.reload())
     <template v-for="role of roleList" :key="role.title">
       <a-menu-item @click="previewAs = role.title">
         <div class="nc-project-menu-item group">
-          <component :is="roleIcon[role.title]" class="group-hover:text-pink-500" />
+          <component :is="roleIcon[role.title]" class="group-hover:text-accent" />
 
           <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">
             {{ role.title }}
@@ -92,7 +92,7 @@ watch(previewAs, () => window.location.reload())
     <template v-if="previewAs">
       <a-menu-item @click="previewAs = null">
         <div class="nc-project-menu-item group">
-          <MdiClose class="group-hover:text-pink-500" />
+          <MdiClose class="group-hover:text-accent" />
           <!-- Reset Preview -->
           <span class="text-capitalize text-xs whitespace-nowrap">
             {{ $t('activity.resetReview') }}
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 15a53e5515..5301ba8079 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -38,7 +38,7 @@ const icon = computed(() => {
     case UITypes.LinkToAnotherRecord:
       switch ((column?.value?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return { icon: MMIcon, color: 'text-pink-500' }
+          return { icon: MMIcon, color: 'text-accent' }
         case RelationTypes.HAS_MANY:
           return { icon: HMIcon, color: 'text-yellow-500' }
         case RelationTypes.BELONGS_TO:
@@ -52,7 +52,7 @@ const icon = computed(() => {
     case UITypes.Lookup:
       switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return { icon: TableColumnPlusBefore, color: 'text-pink-500' }
+          return { icon: TableColumnPlusBefore, color: 'text-accent' }
         case RelationTypes.HAS_MANY:
           return { icon: TableColumnPlusBefore, color: 'text-yellow-500' }
         case RelationTypes.BELONGS_TO:
@@ -62,7 +62,7 @@ const icon = computed(() => {
     case UITypes.Rollup:
       switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return { icon: RollupIcon, color: 'text-pink-500' }
+          return { icon: RollupIcon, color: 'text-accent' }
         case RelationTypes.HAS_MANY:
           return { icon: RollupIcon, color: 'text-yellow-500' }
         case RelationTypes.BELONGS_TO:
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 1032626d81..b2600286d1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -412,7 +412,7 @@ const onNavigate = (dir: NavigateDir) => {
                           class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
                         >
                           <MdiArrowExpand
-                            class="select-none transform hover:(text-pink-500 scale-120) nc-row-expand"
+                            class="select-none transform hover:(text-accent scale-120) nc-row-expand"
                             @click="expandForm(row, state)"
                           />
                         </div>
diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index 8f678b6fb8..ef3620f802 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -700,7 +700,7 @@ onMounted(() => {
 
                 <a-button class="group" @click="addNewColumnRow(table, 'Number')">
                   <div class="flex items-center">
-                    <mdi-numeric class="group-hover:!text-pink-500 flex text-lg" />
+                    <mdi-numeric class="group-hover:!text-accent flex text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -713,7 +713,7 @@ onMounted(() => {
 
                 <a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
                   <div class="flex items-center">
-                    <mdi-alpha-a class="group-hover:!text-pink-500 text-lg" />
+                    <mdi-alpha-a class="group-hover:!text-accent text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -726,7 +726,7 @@ onMounted(() => {
 
                 <a-button class="group" @click="addNewColumnRow(table, 'LongText')">
                   <div class="flex items-center">
-                    <mdi-text class="group-hover:!text-pink-500 text-lg" />
+                    <mdi-text class="group-hover:!text-accent text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -739,7 +739,7 @@ onMounted(() => {
 
                 <a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
                   <div class="flex items-center gap-1">
-                    <mdi-plus class="group-hover:!text-pink-500 text-lg" />
+                    <mdi-plus class="group-hover:!text-accent text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 4758d222fb..6d0bd27b52 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -54,19 +54,19 @@ const logout = () => {
             <template #title> Switch language</template>
 
             <div class="flex pr-4 items-center">
-              <GeneralLanguage class="cursor-pointer text-2xl hover:text-pink-500" />
+              <GeneralLanguage class="cursor-pointer text-2xl hover:text-accent" />
             </div>
           </a-tooltip>
 
           <template v-if="signedIn && !isSharedBase">
             <a-dropdown :trigger="['click']">
-              <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-pink-500 nc-menu-accounts" @click.prevent />
+              <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts" @click.prevent />
 
               <template #overlay>
                 <a-menu class="!py-0 leading-8 !rounded">
                   <a-menu-item key="0" class="!rounded-t">
                     <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
-                      <MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
+                      <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
 
                       <span class="prose group-hover:text-primary"> {{ email }}</span>
                     </nuxt-link>
@@ -76,7 +76,7 @@ const logout = () => {
 
                   <a-menu-item key="1" class="!rounded-b group">
                     <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
-                      <MdiLogout class="group-hover:text-pink-500" />&nbsp;
+                      <MdiLogout class="group-hover:text-accent" />&nbsp;
 
                       <span class="prose group-hover:text-primary">
                         {{ $t('general.signOut') }}
@@ -109,7 +109,7 @@ const logout = () => {
 
 <style lang="scss" scoped>
 .nc-lang-btn {
-  @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-pink-500) hover:(ring ring-pink-500);
+  @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-accent) hover:(ring ring-accent);
 
   &::after {
     @apply rounded-full absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
@@ -118,11 +118,11 @@ const logout = () => {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-pink-500;
+    @apply transform scale-110 ring ring-accent;
   }
 
   &:active::after {
-    @apply ring ring-pink-500;
+    @apply ring ring-accent;
   }
 }
 </style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 31b13a837f..65f2ce7732 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -186,7 +186,7 @@ const copyAuthToken = async () => {
                 </a-tooltip>
                 <div v-else class="text-lg font-semibold truncate">{{ project.title }}</div>
 
-                <MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
+                <MdiChevronDown class="min-w-[28.5px] group-hover:text-accent text-2xl" />
               </template>
 
               <template v-else>
@@ -199,7 +199,7 @@ const copyAuthToken = async () => {
                 <a-menu-item-group>
                   <template #title>
                     <div class="group select-none flex items-center gap-4 py-1">
-                      <MdiFolder class="group-hover:text-pink-500 text-xl" />
+                      <MdiFolder class="group-hover:text-accent text-xl" />
 
                       <div class="flex flex-col">
                         <div class="text-lg group-hover:(!text-primary) font-semibold truncate">{{ project.title }}</div>
@@ -207,7 +207,7 @@ const copyAuthToken = async () => {
                         <div class="flex items-center gap-1">
                           <div class="group-hover:(!text-primary)">ID:</div>
 
-                          <div class="text-xs group-hover:text-pink-500 truncate font-italic">{{ project.id }}</div>
+                          <div class="text-xs group-hover:text-accent truncate font-italic">{{ project.id }}</div>
                         </div>
                       </div>
                     </div>
@@ -215,7 +215,7 @@ const copyAuthToken = async () => {
 
                   <a-menu-item key="copy">
                     <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
-                      <MdiContentCopy class="group-hover:text-pink-500" />
+                      <MdiContentCopy class="group-hover:text-accent" />
                       Copy Project Info
                     </div>
                   </a-menu-item>
@@ -229,14 +229,14 @@ const copyAuthToken = async () => {
                       class="nc-project-menu-item group"
                       @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
                     >
-                      <MdiApi class="group-hover:text-pink-500" />
+                      <MdiApi class="group-hover:text-accent" />
                       Swagger: Rest APIs
                     </div>
                   </a-menu-item>
 
                   <a-menu-item key="copy">
                     <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
-                      <MdiScriptTextKeyOutline class="group-hover:text-pink-500" />
+                      <MdiScriptTextKeyOutline class="group-hover:text-accent" />
                       Copy Auth Token
                     </div>
                   </a-menu-item>
@@ -250,7 +250,7 @@ const copyAuthToken = async () => {
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'teamAndAuth')"
                     >
-                      <MdiCog class="group-hover:text-pink-500" />
+                      <MdiCog class="group-hover:text-accent" />
                       Team & Settings
                     </div>
                   </a-menu-item>
@@ -260,13 +260,13 @@ const copyAuthToken = async () => {
                   <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
                     <template #title>
                       <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                        <MdiFileEyeOutline class="group-hover:text-pink-500" />
+                        <MdiFileEyeOutline class="group-hover:text-accent" />
                         Preview Project As
 
                         <div class="flex-1" />
 
                         <MaterialSymbolsChevronRightRounded
-                          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                          class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
                         />
                       </div>
                     </template>
@@ -279,12 +279,12 @@ const copyAuthToken = async () => {
                   <a-sub-menu key="language" class="lang-menu scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0">
                     <template #title>
                       <div class="nc-project-menu-item group">
-                        <MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
+                        <MaterialSymbolsTranslate class="group-hover:text-accent nc-language" />
                         Language
                         <div class="flex-1" />
 
                         <MaterialSymbolsChevronRightRounded
-                          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                          class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
                         />
                       </div>
                     </template>
@@ -297,12 +297,12 @@ const copyAuthToken = async () => {
                     <a-sub-menu v-if="isUIAllowed('previewAs')" key="account">
                       <template #title>
                         <div class="nc-project-menu-item group">
-                          <MdiAccount class="group-hover:text-pink-500" />
+                          <MdiAccount class="group-hover:text-accent" />
                           Account
                           <div class="flex-1" />
 
                           <MaterialSymbolsChevronRightRounded
-                            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                            class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
                           />
                         </div>
                       </template>
@@ -311,7 +311,7 @@ const copyAuthToken = async () => {
 
                       <a-menu-item key="0" class="!rounded-t">
                         <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
-                          <MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
+                          <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
 
                           <span class="prose-sm">{{ email }}</span>
                         </nuxt-link>
@@ -319,7 +319,7 @@ const copyAuthToken = async () => {
 
                       <a-menu-item key="1" class="!rounded-b">
                         <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
-                          <MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
+                          <MdiLogout class="group-hover:(!text-accent)" />&nbsp;
 
                           <span class="prose-sm">
                             {{ $t('general.signOut') }}
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
index 702f090510..709464f835 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
@@ -121,7 +121,7 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
         class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded hover:border-primary"
         @click="open"
       >
-        <template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here </template>
+        <template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here </template>
       </general-overlay>
 
       <div class="flex flex-col gap-6 items-center justify-center md:w-1/2 mx-auto text-center">
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 5b3f15200e..b5a4b13ee2 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -81,12 +81,12 @@ onMounted(() => {
 
             <a-tooltip title="Reload projects">
               <span
-                class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-pink-500) rounded-full mt-1"
+                class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1"
                 :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
               >
                 <MdiRefresh
                   v-t="['a:project:refresh']"
-                  class="text-xl text-gray-500 group-hover:text-pink-500 cursor-pointer"
+                  class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
                   :class="isLoading ? '!text-primary' : ''"
                   @click="loadProjects"
                 />
@@ -165,7 +165,7 @@ onMounted(() => {
               <a-table-column key="title" :title="$t('general.title')" data-index="title">
                 <template #default="{ text }">
                   <div
-                    class="capitalize color-transition group-hover:text-pink-500 !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
+                    class="capitalize color-transition group-hover:text-accent !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
                   >
                     {{ text }}
                   </div>
@@ -204,7 +204,7 @@ onMounted(() => {
 
 <style scoped>
 .nc-action-btn {
-  @apply text-gray-500 hover:(text-pink-500 ring) active:(ring ring-pink-500) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
+  @apply text-gray-500 hover:(text-accent ring) active:(ring ring-accent) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
 }
 
 .nc-new-project-menu {
@@ -217,11 +217,11 @@ onMounted(() => {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-pink-500;
+    @apply transform scale-110 ring ring-accent;
   }
 
   &:active::after {
-    @apply ring ring-pink-500;
+    @apply ring ring-accent;
   }
 }