From d1df4fb89fac4f6069c517bda039440ccb75ea89 Mon Sep 17 00:00:00 2001 From: KushMiryala Date: Tue, 5 Aug 2025 16:38:42 -0400 Subject: [PATCH] Fixed comments --- frontend/src/App.css | 33 +++----- frontend/src/EditTaskModal.jsx | 2 +- frontend/src/index.css | 146 ++++++++++++++++++--------------- 3 files changed, 90 insertions(+), 91 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index e1f73df..682e936 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,13 +1,11 @@ -/* ======================================================= - GLOBAL THEME & UTILS - ======================================================= */ + @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); :root { /* palette */ - --bg : #f8fafc; /* page background */ - --text : #0f172a; /* primary text */ - --accent : #3b82f6; /* indigo buttons / links */ + --bg : #f8fafc; + --text : #0f172a; + --accent : #3b82f6; --accent-hover : #2563eb; --danger : #ef4444; @@ -28,7 +26,7 @@ html, body, #root { ul { margin: 0; padding: 0; list-style: none; } h1,h2,h3,h4,h5,h6 { margin: 0; } -/* ---------- button utility ---------- */ + .btn { background: var(--accent); color: #fff; @@ -45,9 +43,7 @@ h1,h2,h3,h4,h5,h6 { margin: 0; } box-shadow: 0 4px 12px rgba(59,130,246,.35); } -/* ======================================================= - LOGIN / REGISTER (center-page + auth card) - ======================================================= */ + .center-page { width: 100vw; height: 100vh; display: flex; @@ -108,9 +104,7 @@ h1,h2,h3,h4,h5,h6 { margin: 0; } .auth a { color: var(--accent); font-weight: 600; text-decoration: none; } .auth a:hover { text-decoration: underline; } -/* ======================================================= - TOP BAR - ======================================================= */ + .topbar { background: var(--text); color: #fff; @@ -128,9 +122,7 @@ h1,h2,h3,h4,h5,h6 { margin: 0; } box-shadow: 0 4px 12px rgba(239,68,68,.35); } -/* ======================================================= - TASKS WRAPPER - ======================================================= */ + .tasks-wrapper { max-width: 960px; margin: 2.5rem auto; @@ -146,7 +138,6 @@ h1,h2,h3,h4,h5,h6 { margin: 0; } font-weight: 600; } -/* ---------- new task form ---------- */ .task-form { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); @@ -161,9 +152,7 @@ h1,h2,h3,h4,h5,h6 { margin: 0; } font-size: .95rem; } -/* ======================================================= - TASK CARDS GRID - ======================================================= */ + .task-grid { display: grid; gap: 1rem; @@ -203,7 +192,7 @@ h1,h2,h3,h4,h5,h6 { margin: 0; } font-size: .95rem; } -/* meta row */ + .meta { display: flex; justify-content: space-between; @@ -221,7 +210,7 @@ h1,h2,h3,h4,h5,h6 { margin: 0; } .badge.med { background: #f97316; } .badge.high { background: var(--danger); } -/* delete icon */ + .del { position: absolute; top: 9px; diff --git a/frontend/src/EditTaskModal.jsx b/frontend/src/EditTaskModal.jsx index b4bf8e5..632008b 100644 --- a/frontend/src/EditTaskModal.jsx +++ b/frontend/src/EditTaskModal.jsx @@ -6,7 +6,7 @@ const EditTaskModal = ({ task, onUpdate, onClose }) => { deadline: '', importance: '2', difficulty: '3', - category: 'Personal', // Default category + category: 'Personal', }); useEffect(() => { diff --git a/frontend/src/index.css b/frontend/src/index.css index 6509724..91c4c3b 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,15 +1,15 @@ -/* ---- Global theme (light) ---- */ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); + +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); :root { - font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; - /* light mode by default */ + color-scheme: light; - color: #0f172a; /* dark slate text */ - background-color: #f8fafc; /* soft light background */ + color: #0f172a; + background-color: #f8fafc; font-synthesis: none; text-rendering: optimizeLegibility; @@ -17,10 +17,10 @@ -moz-osx-font-smoothing: grayscale; } -/* ---- Elements ---- */ + body { - margin: 0; /* remove default margin */ - /* remove the old flex + place-items that pushed content left */ + margin: 0; + min-width: 320px; min-height: 100vh; } @@ -34,7 +34,10 @@ a:hover { color: #2563eb; } -h1 { font-size: 3.2em; line-height: 1.1; } +h1 { + font-size: 3.2em; + line-height: 1.1; +} button { border-radius: 8px; @@ -48,20 +51,32 @@ button { cursor: pointer; transition: border-color 0.25s, background-color 0.25s; } -button:hover { background-color: #2563eb; } +button:hover { + background-color: #2563eb; +} button:focus, -button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + -/* ---- Dark-mode override ---- */ @media (prefers-color-scheme: dark) { :root { color: rgba(255, 255, 255, 0.87); - background-color: #1e293b; /* slate-900 */ + background-color: #1e293b; + } + a { + color: #93c5fd; + } + a:hover { + color: #bfdbfe; + } + button { + background-color: #3b82f6; + } + button:hover { + background-color: #60a5fa; } - a { color: #93c5fd; } - a:hover { color: #bfdbfe; } - button { background-color: #3b82f6; } - button:hover { background-color: #60a5fa; } } .modal-backdrop { position: fixed; @@ -76,7 +91,6 @@ button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } z-index: 1000; } -/* This is the white box that holds the form */ .modal-content { background-color: white; padding: 2rem; @@ -116,63 +130,63 @@ button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } gap: 1rem; } -/* Button styling for inside the modal */ + .modal-actions .btn { - padding: 10px 20px; - border-radius: 5px; - border: none; - cursor: pointer; - font-weight: bold; + padding: 10px 20px; + border-radius: 5px; + border: none; + cursor: pointer; + font-weight: bold; } .modal-actions .btn[type="submit"] { - background-color: #007bff; - color: white; + background-color: #007bff; + color: white; } .modal-actions .btn[type="button"] { - background-color: #e9ecef; - color: #333; + background-color: #e9ecef; + color: #333; } -/* Style for the new blue edit button on the card*/ + .card .edit { - position: absolute; - top: 8px; - right: 45px; /* Positioned next to the delete button */ - background-color: #007bff; /* Blue background */ - color: white; /* White text */ - border: none; - border-radius: 5px; - padding: 5px 12px; /* Adjusted padding for a button look */ - font-size: 13px; - font-weight: 600; - cursor: pointer; - line-height: 1.2; - transition: background-color 0.2s; + position: absolute; + top: 8px; + right: 45px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + padding: 5px 12px; + font-size: 13px; + font-weight: 600; + cursor: pointer; + line-height: 1.2; + transition: background-color 0.2s; } .card .edit:hover { - background-color: #0056b3; /* Darker blue on hover */ + background-color: #0056b3; } -/* Style for the delete button */ + .card .del { - position: absolute; - top: 10px; - right: 10px; - background: none; - border: none; - cursor: pointer; - font-size: 22px; - color: #aaa; - padding: 0 5px; - line-height: 1; + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + cursor: pointer; + font-size: 22px; + color: #aaa; + padding: 0 5px; + line-height: 1; } .card .del:hover { - color: #dc3545; /* Red on hover */ + color: #dc3545; } -/* View Toggle Styling*/ + .view-toggle { display: flex; justify-content: center; @@ -199,15 +213,14 @@ button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } .view-toggle button.active { background-color: #ffffff; color: #007bff; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } -/*Calendar Container Styling */ .calendar-container { background-color: #ffffff; padding: 1.5rem; border-radius: 8px; - box-shadow: 0 4px 12px rgba(0,0,0,0.08); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .rbc-event { @@ -250,22 +263,19 @@ button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } color: #111827; } - .card { - border-left: 5px solid transparent; + border-left: 5px solid transparent; } -/* Assign a color to the border based on the category class */ + .card.category-personal { - border-left-color: #db5d2f; /* Orange */ + border-left-color: #db5d2f; } .card.category-work { - border-left-color: #3b82f6; /* Blue */ + border-left-color: #3b82f6; } .card.category-school { - border-left-color: #10b981; /* Green */ + border-left-color: #10b981; } - -