From d81a5d824cb52d177fba675005a53ea9f39986b2 Mon Sep 17 00:00:00 2001
From: EdiWeeks <121399761+EdiWeeks@users.noreply.github.com>
Date: Tue, 3 Mar 2026 16:40:07 +0000
Subject: [PATCH 1/3] fix: Resize play button icon for better visibility (#155)

Remove padding conflict from size="lg" and optically center the play
icon so it appears properly balanced within the circular button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/timer/TimerDisplay.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/timer/TimerDisplay.tsx b/src/components/timer/TimerDisplay.tsx
index 013f590..a12c888 100644
--- a/src/components/timer/TimerDisplay.tsx
+++ b/src/components/timer/TimerDisplay.tsx
@@ -29,9 +29,9 @@ export function TimerDisplay({ onStartTimer }: TimerDisplayProps) {
       <Button
         onClick={onStartTimer}
         size="lg"
-        className="animate-glow shadow-knowall-green/30 hover:shadow-knowall-green/50 h-14 w-14 rounded-full shadow-lg transition-shadow"
+        className="animate-glow shadow-knowall-green/30 hover:shadow-knowall-green/50 h-14 w-14 !p-0 rounded-full shadow-lg transition-shadow"
       >
-        <PlayIcon className="h-8 w-8" />
+        <PlayIcon className="h-5 w-5 translate-x-0.5" />
         <span className="sr-only">Start timer</span>
       </Button>
     );

From fbdd8fa76644a06b5081bce5f8a944d12b45a97b Mon Sep 17 00:00:00 2001
From: EdiWeeks <121399761+EdiWeeks@users.noreply.github.com>
Date: Tue, 3 Mar 2026 16:43:56 +0000
Subject: [PATCH 2/3] style: Fix Prettier formatting

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/timer/TimerDisplay.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timer/TimerDisplay.tsx b/src/components/timer/TimerDisplay.tsx
index a12c888..8135f35 100644
--- a/src/components/timer/TimerDisplay.tsx
+++ b/src/components/timer/TimerDisplay.tsx
@@ -29,7 +29,7 @@ export function TimerDisplay({ onStartTimer }: TimerDisplayProps) {
       <Button
         onClick={onStartTimer}
         size="lg"
-        className="animate-glow shadow-knowall-green/30 hover:shadow-knowall-green/50 h-14 w-14 !p-0 rounded-full shadow-lg transition-shadow"
+        className="animate-glow shadow-knowall-green/30 hover:shadow-knowall-green/50 h-14 w-14 rounded-full !p-0 shadow-lg transition-shadow"
       >
         <PlayIcon className="h-5 w-5 translate-x-0.5" />
         <span className="sr-only">Start timer</span>

From a5d8165b42a1cda36e159d56060745943db210b3 Mon Sep 17 00:00:00 2001
From: EdiWeeks <121399761+EdiWeeks@users.noreply.github.com>
Date: Tue, 3 Mar 2026 16:47:10 +0000
Subject: [PATCH 3/3] refactor: Use size="icon" instead of size="lg" with !p-0
 override
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses Copilot review feedback — matches the pattern used by other
icon-only buttons in the codebase (e.g., the Stop button).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/timer/TimerDisplay.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/timer/TimerDisplay.tsx b/src/components/timer/TimerDisplay.tsx
index 8135f35..43b2d45 100644
--- a/src/components/timer/TimerDisplay.tsx
+++ b/src/components/timer/TimerDisplay.tsx
@@ -28,8 +28,8 @@ export function TimerDisplay({ onStartTimer }: TimerDisplayProps) {
     return (
       <Button
         onClick={onStartTimer}
-        size="lg"
-        className="animate-glow shadow-knowall-green/30 hover:shadow-knowall-green/50 h-14 w-14 rounded-full !p-0 shadow-lg transition-shadow"
+        size="icon"
+        className="animate-glow shadow-knowall-green/30 hover:shadow-knowall-green/50 h-14 w-14 rounded-full shadow-lg transition-shadow"
       >
         <PlayIcon className="h-5 w-5 translate-x-0.5" />
         <span className="sr-only">Start timer</span>