Skip to content

fix : made ErrorBoundary fallback UI adapt to light mode #2028

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
tmdeveloper007 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fix : made ErrorBoundary fallback UI adapt to light mode #2028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
696b259
fix : removed emoji characters from LandingPage feature cards
Aug 3, 2026
c8e6221
fix : replaced emoji characters in TaskItem dependsOn display
Aug 3, 2026
7835650
fix : removed console.log statements from useTasks hook
Aug 3, 2026
8b639e3
fix : removed hardcoded Render URL from CORS allowedOrigins
Aug 3, 2026
51650cf
fix : made ErrorBoundary fallback UI adapt to light mode
Aug 3, 2026
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
1 change: 0 additions & 1 deletion backend/src/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ const allowedOrigins = [
process.env.FRONTEND_URL,
"http://localhost:5173",
"http://127.0.0.1:5173",
"https://dailyforge-frontend-lhjq.onrender.com",
].filter(Boolean);

app.use(
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/components/ErrorBoundary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,22 +31,22 @@ class ErrorBoundary extends React.Component {
render() {
if (this.state.hasError) {
return (
<div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center text-white p-4">
<div className="max-w-md w-full bg-gray-800 rounded-xl shadow-2xl p-8 text-center border border-gray-700">
<div className="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center text-gray-900 dark:text-white p-4">
<div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 text-center border border-gray-200 dark:border-gray-700">
<div className="flex justify-center mb-6">
<div className="p-3 bg-red-500/10 rounded-full">
<svg className="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</div>
</div>
<h1 className="text-2xl font-bold mb-3 text-gray-100">Oops! Something went wrong</h1>
<p className="text-gray-400 dark:text-slate-300 mb-6 text-sm leading-relaxed">
<h1 className="text-2xl font-bold mb-3 text-gray-900 dark:text-gray-100">Oops! Something went wrong</h1>
<p className="text-gray-500 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 && (
<div className="bg-gray-950 rounded-lg p-4 mb-6 text-left overflow-auto max-h-32 border border-gray-700/50 shadow-inner">
<p className="text-red-400/90 text-xs font-mono whitespace-pre-wrap break-words">
<div className="bg-gray-100 dark:bg-gray-950 rounded-lg p-4 mb-6 text-left overflow-auto max-h-32 border border-gray-200 dark:border-gray-700/50 shadow-inner">
<p className="text-red-500 dark:text-red-400/90 text-xs font-mono whitespace-pre-wrap break-words">
{this.state.error.toString()}
</p>
</div>
Expand All @@ -60,7 +60,7 @@ class ErrorBoundary extends React.Component {
</button>
<button
onClick={this.handleReturnHome}
className="px-5 py-2.5 bg-gray-700 hover:bg-gray-600 text-white text-sm rounded-lg transition-all font-medium focus:outline-none focus:ring-2 focus:ring-gray-500/50 w-full sm:w-auto"
className="px-5 py-2.5 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100 text-sm rounded-lg transition-all font-medium focus:outline-none focus:ring-2 focus:ring-gray-500/50 w-full sm:w-auto"
>
Return Home
</button>
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/components/Task/TaskItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Check, Trash2, Pencil, Calendar, Play } from "lucide-react";
import { Check, Trash2, Pencil, Calendar, Play, Link2 } from "lucide-react";
import { useState } from "react";
import TaskFormModal from "./TaskFormModal";
import { getCategoryColor } from "../../utils/categoryUtils";
Expand Down Expand Up @@ -104,7 +104,7 @@ export default function TaskItem({

{task.dependsOn && (
<div className="text-[11px] text-muted flex items-center gap-1 mt-1 bg-white/40 dark:bg-slate-800/40 px-2 py-1 rounded border border-soft/30">
<span className="shrink-0 text-amber-500">🔗</span>
<span className="shrink-0 text-amber-500"><Link2 size={12} /></span>
<span className="truncate" title={task.dependsOn.title}>
Depends on: {task.dependsOn.title}
</span>
Expand Down Expand Up @@ -225,8 +225,9 @@ export default function TaskItem({
</div>

{task.dependsOn && (
<p className="text-xs text-muted mt-1">
🔗 Depends on: {task.dependsOn.title}
<p className="text-xs text-muted mt-1 flex items-center gap-1">
<Link2 size={11} className="shrink-0 text-amber-500" />
Depends on: {task.dependsOn.title}
</p>
)}

Expand Down
16 changes: 3 additions & 13 deletions frontend/src/hooks/useTasks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,7 @@ const useTasks = ({
currentPage: data.currentPage || pageToFetch,
limit: data.limit || initialLimit,
});
} catch (error) {
console.log(error?.response?.data?.message || "Failed to load tasks");
} catch {
setTasks([]);
} finally {
setLoading(false);
Expand All @@ -64,9 +63,7 @@ const useTasks = ({
// create new task
const addTask = async (taskData) => {
try {
const response = await api.post("/tasks", taskData);

console.log("Task added:", response.data);
await api.post("/tasks", taskData);

invalidateTasks();

Expand All @@ -76,12 +73,6 @@ const useTasks = ({
setPage(DEFAULT_PAGE);
}
} catch (error) {
console.log("FULL ERROR:", error);
console.log(
error?.response?.data?.message ||
error?.response?.data ||
error.message,
);
alert(error?.response?.data?.message || "Failed to create task");
throw error;
}
Expand Down Expand Up @@ -113,8 +104,7 @@ const useTasks = ({
await api.put(`/tasks/${id}`, updates);
invalidateTasks();
await getTasks(page);
} catch (error) {
console.log(error?.response?.data?.message || "Failed to update task");
} catch {
invalidateTasks();
await getTasks(page);
}
Expand Down
13 changes: 7 additions & 6 deletions frontend/src/pages/LandingPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Link } from "react-router-dom";
import { Clipboard, CalendarDays, BarChart2 } from "lucide-react";

const LandingPage = () => {
return (
Expand Down Expand Up @@ -66,8 +67,8 @@ const LandingPage = () => {
shadow-lg hover:shadow-2xl
"
>
<div className="w-14 h-14 rounded-2xl bg-[#d0f6e3] flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition">
📋
<div className="w-14 h-14 rounded-2xl bg-[#d0f6e3] flex items-center justify-center mb-6 group-hover:scale-110 transition">
<Clipboard size={24} className="text-[#4eb7b3]" />
</div>

<h3 className="text-xl font-bold text-slate-800 dark:text-white mb-3">
Expand Down Expand Up @@ -95,8 +96,8 @@ const LandingPage = () => {
shadow-lg hover:shadow-2xl
"
>
<div className="w-14 h-14 rounded-2xl bg-[#d0f6e3] flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition">
🗓️
<div className="w-14 h-14 rounded-2xl bg-[#d0f6e3] flex items-center justify-center mb-6 group-hover:scale-110 transition">
<CalendarDays size={24} className="text-[#4eb7b3]" />
</div>

<h3 className="text-xl font-bold text-slate-800 dark:text-white mb-3">
Expand Down Expand Up @@ -124,8 +125,8 @@ const LandingPage = () => {
shadow-lg hover:shadow-2xl
"
>
<div className="w-14 h-14 rounded-2xl bg-[#d0f6e3] flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition">
📊
<div className="w-14 h-14 rounded-2xl bg-[#d0f6e3] flex items-center justify-center mb-6 group-hover:scale-110 transition">
<BarChart2 size={24} className="text-[#4eb7b3]" />
</div>

<h3 className="text-xl font-bold text-slate-800 dark:text-white mb-3">
Expand Down