Skip to content

fix: improve dark mode text readability #1598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akil9979 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: improve dark mode text readability #1598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions frontend/src/components/Dashboard/ContributionHeatmap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,24 +135,24 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
</div>

<div className="space-y-1.5">
<div className="flex justify-between text-slate-500 dark:text-slate-400">
<div className="flex justify-between text-slate-500 dark:text-slate-300">
<span>Tasks Done:</span>
<span className="font-semibold text-slate-800 dark:text-slate-200">
{hoveredDay.tasksCompleted} / {hoveredDay.tasksTotal}
</span>
</div>
<div className="flex justify-between text-slate-500 dark:text-slate-400">
<div className="flex justify-between text-slate-500 dark:text-slate-300">
<span>Routines Completed:</span>
<span className="font-semibold text-slate-800 dark:text-slate-200">
{hoveredDay.routinesCompleted}
</span>
</div>
<div className="flex justify-between text-slate-500 dark:text-slate-400">
<div className="flex justify-between text-slate-500 dark:text-slate-300">
<span>Productivity:</span>
<span className={`font-bold ${
hoveredDay.score === 3 ? "text-emerald-600 dark:text-emerald-400 text-glow" :
hoveredDay.score === 2 ? "text-cyan-600 dark:text-cyan-400" :
hoveredDay.score === 1 ? "text-teal-600 dark:text-teal-500" : "text-slate-500"
hoveredDay.score === 1 ? "text-teal-600 dark:text-teal-505" : "text-slate-500 dark:text-slate-300"
}`}>
{getProductivityColorDetails(hoveredDay.score).label.split(" (")[0]}
</span>
Expand All @@ -169,7 +169,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
⚡ Keep it going!
</span>
) : (
<span className="text-slate-500 font-bold">No active completions</span>
<span className="text-slate-500 dark:text-slate-300 font-bold">No active completions</span>
)}
</div>
</div>
Expand Down Expand Up @@ -198,7 +198,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
Live Tracker
</span>
</div>
<p className="text-xs font-semibold text-slate-700 dark:text-slate-400 mt-1">
<p className="text-xs font-semibold text-slate-700 dark:text-slate-300 mt-1">
Tracking real routines & task completions from your live daily workflow.
</p>
</div>
Expand All @@ -217,7 +217,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
<h3 className="text-xl font-black text-slate-900 dark:text-slate-100 mt-0.5">
{stats.currentStreak} <span className="text-xs font-bold text-slate-700 dark:text-slate-400">days</span>
</h3>
<p className="text-[9px] font-bold text-slate-600 dark:text-slate-400 mt-0.5">Keep the fire burning!</p>
<p className="text-[9px] font-bold text-slate-600 dark:text-slate-300 mt-0.5">Keep the fire burning!</p>
</div>
</div>

Expand All @@ -231,7 +231,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
<h3 className="text-xl font-black text-slate-900 dark:text-slate-100 mt-0.5">
{stats.longestStreak} <span className="text-xs font-bold text-slate-700 dark:text-slate-400">days</span>
</h3>
<p className="text-[9px] font-bold text-slate-600 dark:text-slate-400 mt-0.5">Your peak productivity</p>
<p className="text-[9px] font-bold text-slate-600 dark:text-slate-300 mt-0.5">Your peak productivity</p>
</div>
</div>

Expand All @@ -245,7 +245,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
<h3 className="text-xl font-black text-slate-900 dark:text-slate-100 mt-0.5">
{stats.totalProductiveDays} <span className="text-xs font-bold text-slate-700 dark:text-slate-400">days</span>
</h3>
<p className="text-[9px] font-bold text-slate-600 dark:text-slate-400 mt-0.5">Days with active completions</p>
<p className="text-[9px] font-bold text-slate-600 dark:text-slate-300 mt-0.5">Days with active completions</p>
</div>
</div>

Expand All @@ -259,7 +259,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
<h3 className="text-xl font-black text-slate-900 dark:text-slate-100 mt-0.5">
{stats.yearlyPercentage}%
</h3>
<p className="text-[9px] font-bold text-slate-600 dark:text-slate-400 mt-0.5">Average daily task completion rate</p>
<p className="text-[9px] font-bold text-slate-600 dark:text-slate-300 mt-0.5">Average daily task completion rate</p>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Dashboard/DashboardTasks.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export default function DashboardTasks({ tasks, updateTask }) {
min="1"
value={actualDuration}
onChange={(e) => setActualDuration(e.target.value)}
className="w-full p-2 border border-soft rounded-lg text-black"
className="w-full p-2 border border-soft rounded-lg text-black dark:placeholder-slate-500"
placeholder="Actual duration in minutes"
/>
<div className="flex justify-end gap-3 mt-5">
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/components/Dashboard/ReflectionSummary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,23 @@ export default function ReflectionSummary({
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Daily Completion */}
<div className="card p-6">
<p className="text-xs text-muted uppercase tracking-wide">Daily Completion</p>
<p className="text-xs text-muted dark:text-slate-300 uppercase tracking-wide">Daily Completion</p>
<p className="text-2xl font-semibold text-main mt-1">{completedToday} / {totalToday}</p>
<p className="text-xs text-muted mt-1">Tasks done today{totalToday > 0 ? ` — ${completionRate}%` : ""}</p>
<p className="text-xs text-muted dark:text-slate-400 mt-1">Tasks done today{totalToday > 0 ? ` — ${completionRate}%` : ""}</p>
</div>

{/* Weekly Momentum */}
<div className="card p-6">
<p className="text-xs text-muted uppercase tracking-wide">Weekly Momentum</p>
<p className="text-xs text-muted dark:text-slate-300 uppercase tracking-wide">Weekly Momentum</p>
<p className="text-2xl font-semibold text-main mt-1">{weeklyCompletionPercent}%</p>
<p className="text-xs text-muted mt-1">{weeklyText}</p>
<p className="text-xs text-muted dark:text-slate-400 mt-1">{weeklyText}</p>
</div>

{/* Productivity Insight */}
<div className="card p-6">
<p className="text-xs text-muted uppercase tracking-wide">Productivity Insight</p>
<p className="text-xs text-muted dark:text-slate-300 uppercase tracking-wide">Productivity Insight</p>
<p className="text-sm text-main font-medium mt-1">{insightText}</p>
<p className="text-xs text-muted mt-2">
<p className="text-xs text-muted dark:text-slate-400 mt-2">
{upcomingCount > 0 ? `Next: ${upcomingCount} upcoming task${upcomingCount > 1 ? "s" : ""}` : "No upcoming tasks"}
{" · "}
{tasks?.length ? `${tasks.length} total` : "0 total"}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Dashboard/StatCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ export default function StatCard({ label, value, subtitle, icon }) {
<div className="text-primary">{icon}</div>

<div>
<p className="text-xs text-muted uppercase tracking-wide">{label}</p>
<p className="text-xs text-muted dark:text-slate-400 uppercase tracking-wide">{label}</p>
<p className="text-2xl font-semibold text-main">{value}</p>
{subtitle && <p className="text-xs text-muted mt-1">{subtitle}</p>}
{subtitle && <p className="text-xs text-muted dark:text-slate-400 mt-1">{subtitle}</p>}
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Dashboard/TaskPreview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export default function TaskPreview({ tasks , updateTask}) {
min="1"
value={actualDuration}
onChange={(e) => setActualDuration(e.target.value)}
className="w-full p-2 border border-soft rounded-lg text-black"
className="w-full p-2 border border-soft rounded-lg text-black dark:placeholder-slate-500"
placeholder="Actual duration in minutes"
/>
<div className="flex justify-end gap-3 mt-5">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ErrorBoundary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class ErrorBoundary extends React.Component {
</div>
</div>
<h1 className="text-2xl font-bold mb-3 text-gray-100">Oops! Something went wrong</h1>
<p className="text-gray-400 mb-6 text-sm leading-relaxed">
<p className="text-gray-400 dark:text-slate-300 mb-6 text-sm leading-relaxed">
We're sorry, but an unexpected error occurred. The application has recovered from a crash, but you might need to refresh or return to the dashboard.
</p>
{this.state.error && (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const LogoutModal = ({ isOpen, onConfirm, onCancel }) => (
<h2 className="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">
Log out of DailyForge?
</h2>
<p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed mb-7">
<p className="text-sm text-slate-500 dark:text-slate-300 leading-relaxed mb-7">
You'll need to log back in to access your dashboard, tasks, and
routines.
</p>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Routine/TaskLibrary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export default function TaskLibrary({ tasks, onAddTask }) {
placeholder="Search tasks..."
value={query}
onChange={(e) => setQuery(e.target.value)}
className="mb-4 rounded-xl border border-soft/80 px-3 py-2 text-sm bg-transparent text-main placeholder:text-muted dark:bg-slate-800 dark:text-white dark:border-gray-700 dark:placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#4eb7b3]"
className="mb-4 rounded-xl border border-soft/80 px-3 py-2 text-sm bg-transparent text-main placeholder:text-muted dark:bg-slate-800 dark:text-white dark:border-gray-700 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#4eb7b3]"
/>

{/* Task List */}
Expand All @@ -132,7 +132,7 @@ export default function TaskLibrary({ tasks, onAddTask }) {
) : (
<div className="flex flex-col items-center justify-center h-full min-h-[150px] text-center px-4">
<p className="text-sm font-medium text-slate-400 mb-1">No tasks found</p>
<p className="text-xs text-slate-500">We couldn't find anything matching "{query}"</p>
<p className="text-xs text-slate-500 dark:text-slate-300">We couldn't find anything matching "{query}"</p>
</div>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Task/NotesWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export default function NotesWidget() {
}}
rows={1}
placeholder="Write a note..."
className="w-full bg-transparent outline-none text-base resize-none overflow-hidden"
className="w-full bg-transparent outline-none text-base resize-none overflow-hidden dark:placeholder-slate-500"
style={{
color: note.completed ? "var(--text-muted)" : "var(--text-main)",
textDecoration: note.completed ? "line-through" : "none",
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/Task/TaskFormModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ import FormError from "../common/FormError";
disabled={isSubmitting}
className="w-full mt-1 p-2 border border-soft rounded-lg
focus:ring-(--primary) focus:border-(--primary)
bg-transparent text-main dark:bg-slate-800"
bg-transparent text-main dark:bg-slate-800 dark:placeholder-slate-500"
placeholder="Task title"
maxLength={TITLE_MAX_LENGTH}
required
Expand Down Expand Up @@ -307,7 +307,7 @@ import FormError from "../common/FormError";
disabled={isSubmitting}
className="w-full mt-1 p-2 border border-soft rounded-lg
focus:ring-(--primary) focus:border-(--primary)
bg-transparent text-main dark:bg-slate-800"
bg-transparent text-main dark:bg-slate-800 dark:placeholder-slate-500"
placeholder="Optional task description"
rows={3}
maxLength={DESCRIPTION_MAX_LENGTH}
Expand Down Expand Up @@ -357,7 +357,7 @@ import FormError from "../common/FormError";
value={customTagInput}
onChange={(e) => setCustomTagInput(e.target.value)}
disabled={isSubmitting}
className="flex-1 p-2 border border-soft rounded-lg bg-transparent text-main dark:bg-slate-800"
className="flex-1 p-2 border border-soft rounded-lg bg-transparent text-main dark:bg-slate-800 dark:placeholder-slate-500"
placeholder="Enter custom tag (e.g., 'Essay')"
/>
<button
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/Task/TaskItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function TaskItem({
type="checkbox"
checked={isSelected}
onChange={() => onSelect(task._id)}
className="w-4 h-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700 accent-(--primary)"
className="w-4 h-4 cursor-pointer rounded border-gray-300 text-blue-600 dark:text-slate-100 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700 accent-(--primary)"
/>
<span className="text-[10px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded bg-white/70 dark:bg-slate-800/70 text-main shadow-xs border border-soft">
{task.priority}
Expand Down Expand Up @@ -148,7 +148,7 @@ export default function TaskItem({
{task.status === "Due" && (
<button
onClick={() => onUpdate(task._id, { status: "In Progress" })}
className="flex items-center gap-1 px-2.5 py-1.5 text-xs font-bold bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50 rounded-lg transition-colors cursor-pointer"
className="flex items-center gap-1 px-2.5 py-1.5 text-xs font-bold bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-900/30 dark:text-slate-100 dark:hover:bg-blue-900/50 rounded-lg transition-colors cursor-pointer"
title="Start Task"
>
<Play size={11} className="fill-current shrink-0" />
Expand Down Expand Up @@ -273,7 +273,7 @@ export default function TaskItem({
{task.status === "Due" && (
<button
onClick={() => onUpdate(task._id, { status: "In Progress" })}
className="flex items-center gap-1 px-2 py-1.5 text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition cursor-pointer"
className="flex items-center gap-1 px-2 py-1.5 text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-slate-100 rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition cursor-pointer"
title="Start Task"
>
<Play size={14} />{" "}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/TwoFactorSetup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const TwoFactorSetup = () => {
value={totpCode}
onChange={(e) => setTotpCode(e.target.value)}
maxLength={6}
className="w-full px-3 py-2.5 text-sm surface-bg border-soft rounded-sm shadow-xs input-focus"
className="w-full px-3 py-2.5 text-sm surface-bg border-soft rounded-sm shadow-xs input-focus dark:placeholder-slate-500"
/>
<button onClick={verifyAndEnable} className="btn btn-primary cursor-pointer hover-lift">
Verify & Activate
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/common/LoadingSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const LoadingSpinner = () => {
aria-live="polite"
>
<Loader2 className="w-12 h-12 text-blue-500 animate-spin mb-4" />
<p className="text-gray-500 text-lg font-medium animate-pulse">
<p className="text-gray-500 dark:text-slate-400 text-lg font-medium animate-pulse">
Loading data...
</p>
</div>
Expand Down
Loading