fix: modernize design system, improve responsiveness and resolve UI inconsistencies

frontend/src/App.jsx

@@ -23,7 +23,7 @@ import ShareRoutine from "./pages/ShareRoutine.jsx";
 import DailyJournal from "./pages/DailyJournal.jsx";
 
 const AuthLayout = ({ children }) => (
-  <div className="min-h-[calc(100vh-3.75rem)] flex items-center justify-center">
+  <div className="min-h-[calc(100vh-3.75rem)] w-full flex items-center justify-center">
     {children}
   </div>
 );
@@ -38,9 +38,9 @@ const AnimatedRoutes = () => {
           path="/"
           element={
             <PublicRoute>
-              <AuthLayout>
-                <Login />
-              </AuthLayout>
+              <PageTransition>
+                <LandingPage />
+              </PageTransition>
             </PublicRoute>
           }
         />
@@ -49,7 +49,9 @@ const AnimatedRoutes = () => {
           element={
             <PublicRoute>
               <AuthLayout>
-                <Login />
+                <PageTransition>
+                  <Login />
+                </PageTransition>
               </AuthLayout>
             </PublicRoute>
           }
@@ -59,7 +61,9 @@ const AnimatedRoutes = () => {
           element={
             <PublicRoute>
               <AuthLayout>
-                <Signup />
+                <PageTransition>
+                  <Signup />
+                </PageTransition>
               </AuthLayout>
             </PublicRoute>
           }
@@ -77,9 +81,7 @@ const AnimatedRoutes = () => {
           element={
             <ProtectedRoutes>
               <ErrorBoundary>
-                <PageTransition>
-                  <Dashboard />
-                </PageTransition>
+                <Dashboard />
               </ErrorBoundary>
             </ProtectedRoutes>
           }
@@ -89,9 +91,7 @@ const AnimatedRoutes = () => {
           element={
             <ProtectedRoutes>
               <ErrorBoundary>
-                <PageTransition>
-                  <Tasks />
-                </PageTransition>
+                <Tasks />
               </ErrorBoundary>
             </ProtectedRoutes>
           }
@@ -101,9 +101,17 @@ const AnimatedRoutes = () => {
           element={
             <ProtectedRoutes>
               <ErrorBoundary>
-                <PageTransition>
-                  <RoutineBuilder />
-                </PageTransition>
+                <RoutineBuilder />
+              </ErrorBoundary>
+            </ProtectedRoutes>
+          }
+        />
+        <Route
+          path="/focus-mode"
+          element={
+            <ProtectedRoutes>
+              <ErrorBoundary>
+                <Pomodoro />
               </ErrorBoundary>
             </ProtectedRoutes>
           }
@@ -112,19 +120,15 @@ const AnimatedRoutes = () => {
           path="/profile"
           element={
             <ProtectedRoutes>
-              <PageTransition>
-                <Profile />
-              </PageTransition>
+              <Profile />
             </ProtectedRoutes>
           }
         />
         <Route
           path="/analytics"
           element={
             <ProtectedRoutes>
-              <PageTransition>
-                <Analytics />
-              </PageTransition>
+              <Analytics />
             </ProtectedRoutes>
           }
         />
@@ -271,4 +275,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

frontend/src/components/Dashboard/DashboardTasks.jsx

@@ -2,7 +2,6 @@ import { useNavigate } from "react-router-dom";
 import { Plus, ArrowRight, CheckCircle2 } from "lucide-react";
 import { useState } from "react";
 
-
 export default function DashboardTasks({ tasks, updateTask }) {
   const navigate = useNavigate();
   const [durationModalTask, setDurationModalTask] = useState(null);
@@ -15,15 +14,15 @@ export default function DashboardTasks({ tasks, updateTask }) {
   };
 
   const priorityBorder = {
-    Low: "border-green-400",
-    Medium: "border-yellow-400",
-    High: "border-red-500",
+    Low: "border-emerald-400 dark:border-emerald-500",
+    Medium: "border-amber-400 dark:border-amber-500",
+    High: "border-rose-500",
   };
 
   const priorityBadge = {
-    Low: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-    Medium: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
-    High: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+    Low: "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400",
+    Medium: "bg-amber-50 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400",
+    High: "bg-rose-50 text-rose-700 dark:bg-rose-950/30 dark:text-rose-400",
   };
 
   const today = new Date();
@@ -75,19 +74,18 @@ export default function DashboardTasks({ tasks, updateTask }) {
   };
 
   return (
-    <div className="card w-full">
-      {/* Header */}
+    <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-sm transition-colors duration-300 w-full">
       <div className="flex justify-between items-center mb-5">
         <div>
-          <h2 className="text-lg font-semibold text-main">Today’s Focus</h2>
-          <p className="text-xs text-muted">Top priorities for today</p>
+          <h2 className="text-lg font-semibold text-slate-900 dark:text-white">Today’s Focus</h2>
+          <p className="text-xs text-slate-500 dark:text-slate-400">Top priorities for today</p>
         </div>
 
         <button
-          className="mt-3 group flex gap-2 self-center px-4 py-2 rounded-lg bg-(--primary) text-white text-sm font-medium hover:opacity-90 active:scale-95 transition-all duration-150 cursor-pointer"
+          className="group flex gap-2 items-center px-4 py-2 rounded-lg bg-[#3b8ea0] hover:bg-[#4eb7b3] text-white text-sm font-medium active:scale-95 transition-all duration-150 cursor-pointer"
           onClick={() => navigate("/tasks")}
         >
-          Manage <ArrowRight className="transition-transform duration-150 group-hover:translate-x-1" />
+          Manage <ArrowRight size={16} className="transition-transform duration-150 group-hover:translate-x-1" />
         </button>
       </div>
 
@@ -98,56 +96,53 @@ export default function DashboardTasks({ tasks, updateTask }) {
               key={task._id}
               className={`group relative flex items-center gap-4 border-l-4 rounded-xl p-4 transition-all duration-200
               ${priorityBorder[task.priority]}
-              bg-white/80 hover:bg-white dark:bg-slate-800/80 dark:hover:bg-slate-800 shadow-sm hover:shadow-md`}
+              bg-slate-50 hover:bg-slate-100/70 dark:bg-slate-800/40 dark:hover:bg-slate-800/80 border-y border-r border-slate-200/60 dark:border-slate-800 shadow-xs`}
             >
-              {/* Checkbox */}
               <input
                 type="checkbox"
-                className="h-4 w-4 accent-(--primary) cursor-pointer"
+                className="h-4 w-4 rounded border-slate-300 dark:border-slate-700 text-[#3b8ea0] focus:ring-[#3b8ea0] accent-[#3b8ea0] cursor-pointer"
                 checked={task.status === "Completed"}
                 onChange={() => handleCheckboxChange(task)}
               />
 
-              {/* Task content */}
               <div className="flex-1 min-w-0">
                 <p
                   className={`text-sm font-medium transition-colors break-words ${
                     task.status === "Completed"
-                      ? "line-through text-muted dark:text-gray-300"
-                      : "text-main dark:text-white"
+                      ? "line-through text-slate-400 dark:text-slate-500"
+                      : "text-slate-800 dark:text-slate-200"
                   }`}
                 >
                   {task.title}
                 </p>
 
                 <div className="flex items-center gap-2 mt-1">
                   <span
-                    className={`text-[11px] px-2 py-0.5 rounded-full font-medium ${
+                    className={`text-[11px] px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider ${
                       priorityBadge[task.priority]
                     }`}
                   >
                     {task.priority}
                   </span>
 
                   {task.status === "Completed" && (
-                    <span className="text-[11px] text-muted dark:text-gray-300">Completed</span>
+                    <span className="text-[11px] text-slate-400 dark:text-slate-500 font-medium">Completed</span>
                   )}
                 </div>
               </div>
 
-              {/* Hover affordance */}
-              <span className="absolute right-4 top-1/2 -translate-y-1/2 text-xs text-muted dark:text-gray-300 opacity-0 group-hover:opacity-100 transition">
+              <span className="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-400 dark:text-slate-500 opacity-0 group-hover:opacity-100 transition duration-150">
                 ✓
               </span>
             </div>
           ))}
         </div>
       ) : (
-        <div className="text-sm text-muted dark:text-gray-300 text-center py-6 flex flex-col">
+        <div className="text-sm text-slate-500 dark:text-slate-400 text-center py-8 flex flex-col items-center justify-center">
           No tasks for today.
 
           <button
-            className="mt-3 self-center px-4 py-2 rounded-lg bg-(--primary) text-white text-sm font-medium hover:opacity-90 active:scale-95 transition-all duration-150 cursor-pointer"
+            className="mt-4 px-4 py-2 rounded-lg bg-[#3b8ea0] hover:bg-[#4eb7b3] text-white text-sm font-medium active:scale-95 transition-all duration-150 cursor-pointer"
             onClick={() => navigate("/tasks")}
           >
             + Add your first task
@@ -156,37 +151,37 @@ export default function DashboardTasks({ tasks, updateTask }) {
       )}
 
       {durationModalTask && (
-        <div className="fixed inset-0 bg-black/10 flex items-center justify-center z-50 animate-in fade-in duration-200">
-          <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6">
-            <h2 className="text-xl font-semibold mb-2 text-black/90">
+        <div className="fixed inset-0 bg-black/40 backdrop-blur-xs flex items-center justify-center z-50 animate-in fade-in duration-200 px-4">
+          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl w-full max-w-sm p-6 transition-all transform scale-100">
+            <h2 className="text-xl font-bold mb-2 text-slate-900 dark:text-white">
               Complete Task
             </h2>
 
-            <p className="text-sm mb-4 text-black">
+            <p className="text-sm mb-4 text-slate-500 dark:text-slate-400 leading-relaxed">
               How long did you actually take to complete "
-              {durationModalTask.title}"?
+              <span className="font-semibold text-slate-800 dark:text-slate-200">{durationModalTask.title}</span>"?
             </p>
             <input
               type="number"
               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 px-4 py-2.5 text-sm border border-slate-200 dark:border-slate-700 bg-transparent text-slate-900 dark:text-white rounded-xl outline-none focus:ring-2 focus:ring-[#3b8ea0] transition-all box-border"
               placeholder="Actual duration in minutes"
             />
-            <div className="flex justify-end gap-3 mt-5">
+            <div className="flex justify-end gap-3 mt-6">
               <button
                 onClick={() => {
                   setDurationModalTask(null);
                   setActualDuration("");
                 }}
-                className="px-4 py-2 rounded-lg border border-soft text-black hover:bg-gray-100 transition"
+                className="px-4 py-2 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 text-sm font-medium hover:bg-slate-50 dark:hover:bg-slate-800 transition cursor-pointer"
               >
                 Cancel
               </button>
               <button
                 onClick={handleActualDurationSubmit}
-                className="btn btn-primary px-4 py-2"
+                className="px-4 py-2 bg-[#3b8ea0] hover:bg-[#4eb7b3] text-white text-sm font-semibold rounded-lg transition-colors shadow-xs cursor-pointer"
               >
                 Mark Completed
               </button>
@@ -196,4 +191,4 @@ export default function DashboardTasks({ tasks, updateTask }) {
       )}
     </div>
   );
-}
+}

frontend/src/components/Dashboard/InsightCard.jsx

@@ -1,15 +1,23 @@
 export default function InsightCard({ insights }) {
   return (
-    <div className="bg-(--surface) rounded-xl shadow-md p-5">
-      <h2 className="text-lg font-semibold text-main mb-4">Insights</h2>
-      <ul className="space-y-3 text-sm text-main">
-        {insights?.map((insight, i) => (
-          <li key={i} className="flex items-start gap-2">
-            <span className="text-(--primary)">{insight.icon}</span>
-            <span>{insight.message}</span>
-          </li>
-        ))}
-      </ul>
+    <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-sm transition-colors duration-300 w-full box-border">
+      <h2 className="text-lg font-bold text-slate-900 dark:text-white mb-4 uppercase tracking-wide">Insights</h2>
+      {(!insights || insights.length === 0) ? (
+        <p className="text-sm font-medium text-slate-400 dark:text-slate-500 italic py-2">
+          No automated baseline insights compiled for this scheduling window yet.
+        </p>
+      ) : (
+        <ul className="space-y-4 text-sm text-slate-600 dark:text-slate-400 pl-0 mt-0 list-none">
+          {insights.map((insight, i) => (
+            <li key={i} className="flex items-start gap-3 font-semibold leading-relaxed transition-all animate-in">
+              <span className="text-[#3b8ea0] dark:text-[#4eb7b3] mt-0.5 shrink-0 flex items-center justify-center">
+                {insight.icon}
+              </span>
+              <span className="text-slate-700 dark:text-slate-300 break-words">{insight.message}</span>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
-}
+}

frontend/src/components/Dashboard/LiveClock.jsx

@@ -24,7 +24,7 @@ const LiveClock = () => {
   }, []);
 
   return (
-    <p className="text-sm text-teal-500 mt-2">
+    <p className="text-xs font-bold text-[#3b8ea0] dark:text-[#4eb7b3] font-mono tracking-wider select-none mt-1">
       {currentTime}
     </p>
   );

frontend/src/components/Dashboard/ReflectionSummary.jsx

@@ -20,25 +20,22 @@ export default function ReflectionSummary({
   return (
     <div className="w-full animate-in delay-150">
       <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-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>
+        <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-sm transition-colors duration-300">
+          <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-semibold tracking-wider">Daily Completion</p>
+          <p className="text-2xl font-bold text-slate-900 dark:text-white mt-1.5">{completedToday} / {totalToday}</p>
+          <p className="text-xs text-slate-400 dark:text-slate-500 mt-1.5">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-2xl font-semibold text-main mt-1">{weeklyCompletionPercent}%</p>
-          <p className="text-xs text-muted mt-1">{weeklyText}</p>
+        <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-sm transition-colors duration-300">
+          <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-semibold tracking-wider">Weekly Momentum</p>
+          <p className="text-2xl font-bold text-slate-900 dark:text-white mt-1.5">{weeklyCompletionPercent}%</p>
+          <p className="text-xs text-slate-400 dark:text-slate-500 mt-1.5">{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-sm text-main font-medium mt-1">{insightText}</p>
-          <p className="text-xs text-muted mt-2">
+        <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-sm transition-colors duration-300">
+          <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-semibold tracking-wider">Productivity Insight</p>
+          <p className="text-sm text-slate-800 dark:text-slate-200 font-semibold mt-1.5 leading-relaxed">{insightText}</p>
+          <p className="text-xs text-slate-400 dark:text-slate-500 mt-2 font-medium">
             {upcomingCount > 0 ? `Next: ${upcomingCount} upcoming task${upcomingCount > 1 ? "s" : ""}` : "No upcoming tasks"}
             {" · "}
             {tasks?.length ? `${tasks.length} total` : "0 total"}
@@ -47,4 +44,4 @@ export default function ReflectionSummary({
       </section>
     </div>
   );
-}
+}