style: add text color when board theme is not light

DDD-Community · Dec 17, 2024 · e536848 · e536848
1 parent 402c6f4
commit e536848
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/app/board/[boardId]/_components/Header/DefaultHeader.tsx b/src/app/board/[boardId]/_components/Header/DefaultHeader.tsx
@@ -9,12 +9,11 @@ import { Step1Tooltip } from '@/app/board/[boardId]/_components/Tutorial/Tooltip
 import ShareBtn from '@/app/board/[boardId]/_components/Share'
 import { useSession } from 'next-auth/react'
 import { useBoard } from '@/app/board/[boardId]/_contexts/BoardContext'
-import { BOARDTHEMAS } from '@/lib/constants/boardConfig'
+import { twMerge } from 'tailwind-merge'
 
-const DefaultHeader = () => {
+const DefaultHeader = ({ className }: { className: string }) => {
   const { data: session } = useSession()
   const { board } = useBoard()
-  const boardTheme = BOARDTHEMAS[board.options.THEMA].theme
 
   return (
     <Header
@@ -34,7 +33,7 @@ const DefaultHeader = () => {
           <ShareBtn />
         )
       }
-      className={`bg-transparent ${boardTheme === 'LIGHT' ? 'text-gray-900' : 'text-gray-0'}`}
+      className={twMerge('bg-transparent', className)}
       shadow={false}
     />
   )

diff --git a/src/app/board/[boardId]/_components/Header/SelectModeHeader.tsx b/src/app/board/[boardId]/_components/Header/SelectModeHeader.tsx
@@ -2,8 +2,9 @@ import React from 'react'
 import Header from '@/components/Header'
 import { useSelect } from '@/app/board/[boardId]/_contexts/SelectModeContext'
 import { useBoard } from '@/app/board/[boardId]/_contexts/BoardContext'
+import { twMerge } from 'tailwind-merge'
 
-const SelectModeHeader = () => {
+const SelectModeHeader = ({ className }: { className: string }) => {
   const { selectedIds, MAX_SELECT_COUNT } = useSelect()
   const { board } = useBoard()
   const maxLength = Math.min(board.items.length, MAX_SELECT_COUNT)
@@ -20,7 +21,7 @@ const SelectModeHeader = () => {
           </h2>
         </div>
       }
-      className="bg-transparent"
+      className={twMerge('bg-transparent', className)}
       shadow={false}
     />
   )

diff --git a/src/app/board/[boardId]/_components/Header/index.tsx b/src/app/board/[boardId]/_components/Header/index.tsx
@@ -4,14 +4,19 @@ import React from 'react'
 import { useSelect } from '@/app/board/[boardId]/_contexts/SelectModeContext'
 import DefaultHeader from '@/app/board/[boardId]/_components/Header/DefaultHeader'
 import SelectModeHeader from '@/app/board/[boardId]/_components/Header/SelectModeHeader'
+import { useBoard } from '@/app/board/[boardId]/_contexts/BoardContext'
+import { BOARDTHEMAS } from '@/lib/constants/boardConfig'
 
 const Header = () => {
   const { isSelectMode } = useSelect()
+  const { board } = useBoard()
+  const boardTheme = BOARDTHEMAS[board.options.THEMA].theme
+  const className = boardTheme === 'LIGHT' ? 'text-gray-900' : 'text-gray-0'
 
   if (isSelectMode) {
-    return <SelectModeHeader />
+    return <SelectModeHeader className={className} />
   }
-  return <DefaultHeader />
+  return <DefaultHeader className={className} />
 }
 
 export default Header