From 3d71b2e477f7d24677df56a2b09101d9bf24084d Mon Sep 17 00:00:00 2001
From: Arick Bulakali <85836702+NdekoCode@users.noreply.github.com>
Date: Thu, 14 Nov 2024 23:37:14 +0200
Subject: [PATCH] Fix colours for sidebar links in dark mode (#3325)

* fix(web): Fix colours for sidebar links in dark mode

* fix(web): Fix colours for team task title and search border

* fix(web): sub active menu
---
 apps/web/components/nav-main.tsx                     | 10 +++++++---
 .../components/pages/team/tasks/tasks-data-table.tsx | 12 +++++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/nav-main.tsx b/apps/web/components/nav-main.tsx
index 8dfd21d4b..de5446bdf 100644
--- a/apps/web/components/nav-main.tsx
+++ b/apps/web/components/nav-main.tsx
@@ -80,7 +80,9 @@ export function NavMain({
 										className={cn(
 											'hover:bg-[#eaeef4] text-[#1F2937] items-center dark:text-gray-50 data-[active=true]:bg-[#eaeef4] min-h-10 h-10 dark:hover:bg-sidebar-accent px-3 py-2 transition-colors duration-300',
 											state === 'collapsed' ? ' justify-center' : '',
-											index === activeMenuIndex ? 'font-medium bg-[#eaeef4]' : '!font-normal' // Style for active menu
+											index === activeMenuIndex
+												? 'font-medium bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
+												: '!font-normal' // Style for active menu
 										)}
 										asChild
 										tooltip={item.title}
@@ -110,7 +112,9 @@ export function NavMain({
 									className={cn(
 										'hover:bg-[#eaeef4] text-[#1F2937] items-center dark:text-gray-50 data-[active=true]:bg-[#eaeef4] min-h-10 h-10 dark:hover:bg-sidebar-accent px-3 py-2 transition-colors duration-300',
 										state === 'collapsed' ? ' justify-center' : '',
-										index === activeMenuIndex ? 'font-medium' : '!font-normal'
+										index === activeMenuIndex
+											? 'font-medium bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
+											: '!font-normal'
 									)}
 									asChild
 									tooltip={item.title}
@@ -154,7 +158,7 @@ export function NavMain({
 
 																// Style for active sub-menu
 																key === activeSubMenuIndex
-																	? 'font-medium bg-[#eaeef4]'
+																	? 'font-medium bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
 																	: '!font-light'
 															)}
 															onClick={() => handleSubMenuToggle(key)}
diff --git a/apps/web/components/pages/team/tasks/tasks-data-table.tsx b/apps/web/components/pages/team/tasks/tasks-data-table.tsx
index d8dd86767..65fc87cb8 100644
--- a/apps/web/components/pages/team/tasks/tasks-data-table.tsx
+++ b/apps/web/components/pages/team/tasks/tasks-data-table.tsx
@@ -7,6 +7,7 @@ import StatusBadge from './StatusBadge';
 import { ITaskStatus, ITeamTask } from '@/app/interfaces';
 import { Input } from '@components/ui/input';
 import { Search } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 interface DataTableProps<TData, TValue> {
 	columns: ColumnDef<TData, TValue>[];
 	data: TData[];
@@ -21,12 +22,13 @@ export function TasksDataTable<TData, TValue>({ columns, data, className }: Read
 		getFilteredRowModel: getFilteredRowModel()
 	});
 	const tasks = data as ITeamTask[];
+	const t = useTranslations();
 	return (
 		<>
 			<div className="flex flex-col my-5 leading-snug">
 				<div className="flex flex-wrap items-center justify-between w-full gap-10 py-2 max-md:max-w-full">
-					<h1 className="self-stretch my-auto text-4xl font-medium tracking-tighter text-indigo-950">
-						Team Tasks
+					<h1 className="self-stretch my-auto text-4xl font-medium tracking-tighter text-indigo-950 dark:text-gray-50">
+						{t('sidebar.TEAMTASKS')}
 					</h1>
 					<nav className="flex flex-wrap gap-3.5 items-center self-stretch my-auto text-sm font-medium tracking-tight min-w-[240px] text-indigo-950 max-md:max-w-full">
 						<div className="flex gap-2.5 justify-center items-center self-stretch my-auto font-medium text-slate-800">
@@ -42,15 +44,15 @@ export function TasksDataTable<TData, TValue>({ columns, data, className }: Read
 							</div>
 						</div>
 						<FilterButton table={table} />
-						<div className="w-px h-6 bg-gray-200" />
-						<div className="flex gap-2.5 items-center relative min-w-[122px] border border-gray-200 dark:border-gray-300 rounded-lg">
+						<div className="w-px h-6 bg-gray-200 dark:bg-gray-400" />
+						<div className="flex gap-2.5 items-center relative min-w-[122px] text-muted-foreground border border-gray-200 dark:border-gray-400 rounded-md">
 							<Search className="absolute w-4 h-4 left-3" />
 
 							<Input
 								placeholder="Search tasks..."
 								value={(table.getColumn('title')?.getFilterValue() as string) ?? ''}
 								onChange={(event) => table.getColumn('title')?.setFilterValue(event.target.value)}
-								className="max-w-sm pl-10 bg-transparent border-none placeholder:font-normal"
+								className="max-w-sm pl-10 bg-transparent border-none dark:focus-visible:!border-[#c8c8c8] transition-all duration-200  placeholder:font-normal"
 							/>
 						</div>
 						<Button className="text-[#B1AEBC]" variant="ghost" size="icon" aria-label="More options">