From dc1841a9ebe5174c21d15c8e87fc84379872e85f Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 11 Mar 2026 19:58:33 +0000
Subject: [PATCH 1/2] Improve calendar time picker styling

- Add day labels (Mon-Fri) above each time picker column
- Add 'to' separator between start and end time inputs
- Restyle time inputs with subtle background, rounded corners, and
  orange focus ring matching the app's accent color
- Align time picker columns horizontally with the calendar grid
- Update test to handle duplicate day text from labels and calendar headers

Co-Authored-By: Rahul Chalamala <rahul@chalamala.com>
---
 src/Planner.test.tsx |   6 +--
 src/Planner.tsx      | 105 +++++++++++++++++++++++++++++++++----------
 src/css/planner.css  |  62 +++++++++++++------------
 3 files changed, 114 insertions(+), 59 deletions(-)

diff --git a/src/Planner.test.tsx b/src/Planner.test.tsx
index f73d045..a4a1b3e 100644
--- a/src/Planner.test.tsx
+++ b/src/Planner.test.tsx
@@ -104,9 +104,9 @@ describe("Planner", () => {
   it("renders the calendar without errors when no courses are added", () => {
     renderPlanner();
 
-    // react-big-calendar renders day headers: Mon, Tue, Wed, Thu, Fri
-    expect(screen.getByText("Mon")).toBeInTheDocument();
-    expect(screen.getByText("Fri")).toBeInTheDocument();
+    // react-big-calendar renders day headers and time-picker labels: Mon, Tue, Wed, Thu, Fri
+    expect(screen.getAllByText("Mon").length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText("Fri").length).toBeGreaterThanOrEqual(1);
   });
 
   it("renders time pickers for 5 weekdays", () => {
diff --git a/src/Planner.tsx b/src/Planner.tsx
index 24a6b05..65e4cd0 100644
--- a/src/Planner.tsx
+++ b/src/Planner.tsx
@@ -76,34 +76,91 @@ function Planner() {
 
   return (
     <div>
-      <div className="time-controls">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "stretch",
+          gap: 8,
+          padding: "12px 0",
+          marginLeft: 65,
+          marginRight: 20,
+        }}
+      >
         {[0, 1, 2, 3, 4].map((idx) => {
+          const dayLabels = ["Mon", "Tue", "Wed", "Thu", "Fri"];
           return (
-            <div className="time-picker" key={idx}>
-              <Flatpickr
-                data-enable-time
-                options={{
-                  dateFormat: "H:i",
-                  enableTime: true,
-                  noCalendar: true,
-                }}
-                value={state.availableTimes[idx][0]}
-                onChange={([day]) => {
-                  state.updateAvailableTimes(idx, true, day);
-                }}
-              />
-              <Flatpickr
-                data-enable-time
-                options={{
-                  dateFormat: "H:i",
-                  enableTime: true,
-                  noCalendar: true,
+            <div
+              className="time-picker"
+              key={idx}
+              style={{
+                display: "flex",
+                flex: 1,
+                minWidth: 0,
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 4,
+              }}
+            >
+              <span
+                aria-hidden="true"
+                style={{
+                  fontSize: "0.7rem",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em",
+                  color: "#737373",
+                  userSelect: "none",
                 }}
-                value={state.availableTimes[idx][1]}
-                onChange={([day]) => {
-                  state.updateAvailableTimes(idx, false, day);
+              >
+                {dayLabels[idx]}
+              </span>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 2,
+                  width: "100%",
                 }}
-              />
+              >
+                <Flatpickr
+                  className="time-input"
+                  data-enable-time
+                  options={{
+                    dateFormat: "H:i",
+                    enableTime: true,
+                    noCalendar: true,
+                  }}
+                  value={state.availableTimes[idx][0]}
+                  onChange={([day]) => {
+                    state.updateAvailableTimes(idx, true, day);
+                  }}
+                />
+                <span
+                  style={{
+                    fontSize: "0.6rem",
+                    color: "#a3a3a3",
+                    lineHeight: 1,
+                    userSelect: "none",
+                  }}
+                >
+                  to
+                </span>
+                <Flatpickr
+                  className="time-input"
+                  data-enable-time
+                  options={{
+                    dateFormat: "H:i",
+                    enableTime: true,
+                    noCalendar: true,
+                  }}
+                  value={state.availableTimes[idx][1]}
+                  onChange={([day]) => {
+                    state.updateAvailableTimes(idx, false, day);
+                  }}
+                />
+              </div>
             </div>
           );
         })}
diff --git a/src/css/planner.css b/src/css/planner.css
index 57818a1..3fe9961 100644
--- a/src/css/planner.css
+++ b/src/css/planner.css
@@ -6,46 +6,44 @@
   border-bottom: none;
 }
 
-.time-picker {
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-  max-width: 4rem;
-}
-
-.time-picker > input {
+/* ── Time Input Styling ── */
+input.time-input {
+  width: 100%;
+  max-width: 4.5rem;
+  padding: 4px 6px;
   text-align: center;
+  font-size: 0.8rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: #262626;
+  background-color: #fafafa;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  outline: none;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    background-color 0.15s ease;
+  cursor: pointer;
 }
 
-.flatpickr-input {
-  border: 1px solid lightgrey;
-  border-radius: 4px;
+input.time-input:hover {
+  border-color: #d4d4d4;
+  background-color: #fff;
 }
 
-.time-controls {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  margin-left: 65px;
-  margin-right: 20px;
-  padding-top: 5px;
-  padding-bottom: 5px;
+input.time-input:focus,
+input.time-input.active {
+  border-color: #f97316;
+  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
+  background-color: #fff;
 }
 
-/* Mobile: tighten calendar controls */
+/* ── Mobile: tighten time inputs ── */
 @media (max-width: 767px) {
-  .time-controls {
-    margin-left: 10px;
-    margin-right: 10px;
-  }
-
-  .time-picker {
+  input.time-input {
     max-width: 3.5rem;
-    row-gap: 4px;
-  }
-
-  .flatpickr-input {
-    font-size: 0.75rem;
-    padding: 2px 4px;
+    font-size: 0.7rem;
+    padding: 3px 4px;
   }
 }

From 8c24b89797c7fbecc058381b96a22ea0b9fc03ee Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 11 Mar 2026 20:01:51 +0000
Subject: [PATCH 2/2] Fix mobile margin responsiveness and improve
 accessibility

- Move margins to .time-controls CSS class so media queries can override them
- Add mobile margin override (10px) for screens <= 767px
- Remove aria-hidden from day labels so screen readers can see them
- Add aria-label to Flatpickr inputs (e.g. 'Mon start time', 'Mon end time')
- Mark 'to' separator as aria-hidden since it's decorative

Co-Authored-By: Rahul Chalamala <rahul@chalamala.com>
---
 src/Planner.tsx     |  7 ++++---
 src/css/planner.css | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/Planner.tsx b/src/Planner.tsx
index 65e4cd0..22fc895 100644
--- a/src/Planner.tsx
+++ b/src/Planner.tsx
@@ -77,14 +77,13 @@ function Planner() {
   return (
     <div>
       <div
+        className="time-controls"
         style={{
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
           gap: 8,
           padding: "12px 0",
-          marginLeft: 65,
-          marginRight: 20,
         }}
       >
         {[0, 1, 2, 3, 4].map((idx) => {
@@ -103,7 +102,6 @@ function Planner() {
               }}
             >
               <span
-                aria-hidden="true"
                 style={{
                   fontSize: "0.7rem",
                   fontWeight: 600,
@@ -126,6 +124,7 @@ function Planner() {
               >
                 <Flatpickr
                   className="time-input"
+                  aria-label={`${dayLabels[idx]} start time`}
                   data-enable-time
                   options={{
                     dateFormat: "H:i",
@@ -138,6 +137,7 @@ function Planner() {
                   }}
                 />
                 <span
+                  aria-hidden="true"
                   style={{
                     fontSize: "0.6rem",
                     color: "#a3a3a3",
@@ -149,6 +149,7 @@ function Planner() {
                 </span>
                 <Flatpickr
                   className="time-input"
+                  aria-label={`${dayLabels[idx]} end time`}
                   data-enable-time
                   options={{
                     dateFormat: "H:i",
diff --git a/src/css/planner.css b/src/css/planner.css
index 3fe9961..4736717 100644
--- a/src/css/planner.css
+++ b/src/css/planner.css
@@ -6,6 +6,12 @@
   border-bottom: none;
 }
 
+/* ── Time Controls Container (margins set here for mobile overrides) ── */
+.time-controls {
+  margin-left: 65px;
+  margin-right: 20px;
+}
+
 /* ── Time Input Styling ── */
 input.time-input {
   width: 100%;
@@ -39,8 +45,13 @@ input.time-input.active {
   background-color: #fff;
 }
 
-/* ── Mobile: tighten time inputs ── */
+/* ── Mobile: tighten time controls and inputs ── */
 @media (max-width: 767px) {
+  .time-controls {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
   input.time-input {
     max-width: 3.5rem;
     font-size: 0.7rem;