Merge pull request #3529 from ever-co/fix/task-status-dark-mode

Fix(task-status): Improve Dark Mode Text Visibility
ever-co · Jan 19, 2025 · 342e2b2 · 342e2b2
2 parents 3d31ece + 3e8808a
commit 342e2b2
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 21 deletions.
diff --git a/apps/web/lib/features/auth-user-task-input.tsx b/apps/web/lib/features/auth-user-task-input.tsx
@@ -17,36 +17,36 @@ export function AuthUserTaskInput({ className }: IClassName) {
 	const { isTrackingEnabled } = useOrganizationTeams();
 
 	return (
-		<div className={clsxm('flex-1 flex flex-col mr-10 lg:mt-0 mt-8', className)}>
+		<div className={clsxm('flex flex-col flex-1 mt-8 mr-10 lg:mt-0', className)}>
 			<TaskInput
 				fullWidthCombobox={true}
 				createOnEnterClick={true}
 				showTaskNumber={true}
 				autoAssignTaskAuth={isTrackingEnabled}
 			/>
-			<div className="flex gap-5 flex-row lg:items-center justify-between ml-2">
-				<div className="xl:flex mb-4 lg:mb-0">
-					<span className="font-normal text-gray-500 pr-2">{t('common.ESTIMATE')}:</span>
+			<div className="flex flex-row gap-5 justify-between ml-2 lg:items-center">
+				<div className="mb-4 xl:flex lg:mb-0">
+					<span className="pr-2 font-normal text-gray-500">{t('common.ESTIMATE')}:</span>
 					<TaskEstimate />
 				</div>
 
-				<div className="flex-grow justify-end hidden flex-1 gap-2 md:flex">
+				<div className="hidden flex-1 flex-grow gap-2 justify-end md:flex">
 					<ActiveTaskStatusDropdown
-						className="lg:max-w-[190px] grow"
+						className="lg:max-w-[190px] grow dark:text-white dark:border-white"
 						disabled={!activeTeamTask}
-						taskStatusClassName="text-xs py-1.5 w-full"
+						taskStatusClassName="text-xs py-1.5 w-full dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] "
 					/>
 
 					<ActiveTaskPropertiesDropdown
-						className="lg:max-w-[190px] grow"
+						className="lg:max-w-[190px] grow dark:text-white dark:border-white"
 						disabled={!activeTeamTask}
-						taskStatusClassName="w-full py-1.5 text-xs"
+						taskStatusClassName="w-full py-1.5 text-xs dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33]"
 					/>
 
 					<ActiveTaskSizesDropdown
-						className="lg:max-w-[190px] grow"
+						className="lg:max-w-[190px] grow dark:text-white dark:border-white"
 						disabled={!activeTeamTask}
-						taskStatusClassName="w-full py-1.5 text-xs"
+						taskStatusClassName="w-full py-1.5 text-xs dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33]"
 					/>
 
 					<TaskLabels
@@ -67,11 +67,11 @@ export function AuthUserTaskInput({ className }: IClassName) {
 				</div>
 				{/* <div className="grid justify-items-center md:hidden">
 					<div className="flex">
-						<ActiveTaskStatusDropdown className="w-32 mr-2" disabled={!activeTeamTask} />
+						<ActiveTaskStatusDropdown className="mr-2 w-32" disabled={!activeTeamTask} />
 						<ActiveTaskPropertiesDropdown className="w-32" disabled={!activeTeamTask} />
 					</div>
 					<div className="flex mt-2">
-						<ActiveTaskSizesDropdown className="w-32 mr-2" disabled={!activeTeamTask} />
+						<ActiveTaskSizesDropdown className="mr-2 w-32" disabled={!activeTeamTask} />
 						<TaskLabels task={activeTeamTask} className="lg:min-w-[170px]" forDetails={false} />
 					</div>
 				</div> */}

diff --git a/apps/web/lib/features/task/task-status.tsx b/apps/web/lib/features/task/task-status.tsx
@@ -977,18 +977,31 @@ export function StatusDropdown<T extends TStatusItem>({
 			issueType={issueType}
 			sidebarUI={sidebarUI}
 			className={clsxm(
-				`justify-between capitalize`,
+				`justify-between capitalize whitespace-nowrap overflow-hidden max-w-[90%]`,
+				!forDetails && 'w-full max-w-[190px]',
+				'flex items-center gap-x-2',
 				sidebarUI && ['text-xs'],
-				!value && ['!text-dark/40 dark:text-white'],
+				!value && [
+					'!text-dark/40 dark:text-white/70',
+					'bg-white dark:bg-[#1B1D22] border border-gray-200 dark:border-[#FFFFFF33]'
+				],
+				value && [
+					'text-black dark:text-black',
+					'bg-white dark:bg-white border border-gray-200'
+				],
 				isVersion || (forDetails && !value)
-					? 'bg-transparent border border-solid border-color-[#F2F2F2]'
-					: 'bg-white border',
-				'dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33]',
-				taskStatusClassName,
+					? ['text-xs font-normal']
+					: ['text-sm font-normal'],
+				className,
 				isVersion && 'dark:text-white',
-				'h-full'
+				'h-full transition-colors duration-200'
+			)}
+			titleClassName={clsxm(
+				hasBtnIcon && [
+					'whitespace-nowrap overflow-hidden max-w-[90%] text-ellipsis',
+					value ? 'text-black dark:text-black' : 'text-dark/40 dark:text-white/70'
+				]
 			)}
-			titleClassName={clsxm(hasBtnIcon && ['whitespace-nowrap overflow-hidden max-w-[90%]'])}
 			isVersion={isVersion}
 			isEpic={isEpic}
 		>