[Bug] Duration modal in TaskPreview component not styled for dark mode

[NikithaDineshKumar]

Problem

In frontend/src/components/Dashboard/TaskPreview.jsx, the
"Complete Task" duration modal uses hardcoded light mode colors:

• bg-white for the modal background
• text-black for text

This makes the modal appear with a jarring white background
when the app is in dark mode, inconsistent with the rest of the UI.

Expected Behavior

The modal should use theme-aware classes like bg-(--surface)
and text-main to support both light and dark modes, consistent
with other modals in the app.

Files to Change

• frontend/src/components/Dashboard/TaskPreview.jsx

Labels

bug, frontend, good first issue

@aryandas2911 I would like to work on this. Could you please
assign it to me?

[Iniya-008]

Hi @aryandas2911!

I would love to work on this bug fix under GSSoC '26. Here's my plan:

1. Locate the File

• Open frontend/src/components/Dashboard/TaskPreview.jsx
• Find the duration modal with hardcoded bg-white and text-black classes

2. Replace Hardcoded Colors

// Before
className="bg-white text-black"

// After
className="bg-(--surface) text-main"

3. Testing

• Verify modal looks correct in Light Mode
• Verify modal looks correct in Dark Mode
• Ensure consistent styling with other modals in the app

This is a purely visual fix with no functionality changes.

Please assign this issue to me under GSSoC '26. Thank you!

[saloni840]

Hii @maintainer,
I have reviewed the project and would like to work on this issue. Could you please assign this issue to me under GSSoc?

Thank you

[NikithaDineshKumar]

/assign

[github-actions]

Hi @NikithaDineshKumar, please wait 6h before claiming this issue again (cooldown active).