From dd3dd4507c10dc78dfc0eb1040c4e8932e7b23a9 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 11 Dec 2025 16:55:10 -0600
Subject: [PATCH] fix(practice): fix invisible resume button by using inline
 styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switch from Panda CSS to inline styles for the resume button to ensure
the green background and white text are properly applied.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../practice/SessionPausedModal.tsx           | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/practice/SessionPausedModal.tsx b/apps/web/src/components/practice/SessionPausedModal.tsx
index 4d78e17f..244cee91 100644
--- a/apps/web/src/components/practice/SessionPausedModal.tsx
+++ b/apps/web/src/components/practice/SessionPausedModal.tsx
@@ -647,31 +647,24 @@ export function SessionPausedModal({
             type="button"
             data-action="resume"
             onClick={onResume}
-            className={css({
+            style={{
               padding: '1.25rem',
               fontSize: '1.25rem',
               fontWeight: 'bold',
-              color: 'white',
-              background: 'linear-gradient(135deg, #16a34a, #15803d)',
+              color: '#ffffff',
+              background: 'linear-gradient(135deg, #22c55e, #16a34a)',
               borderRadius: '16px',
-              border: '3px solid',
-              borderColor: '#14532d',
+              border: '3px solid #15803d',
               cursor: 'pointer',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
               gap: '0.5rem',
               transition: 'all 0.15s ease',
-              boxShadow: '0 6px 20px rgba(22, 163, 74, 0.5), inset 0 1px 0 rgba(255,255,255,0.2)',
+              boxShadow: '0 6px 20px rgba(22, 163, 74, 0.5)',
               textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)',
-              _hover: {
-                transform: 'translateY(-2px)',
-                boxShadow: '0 8px 24px rgba(22, 163, 74, 0.6), inset 0 1px 0 rgba(255,255,255,0.2)',
-              },
-              _active: {
-                transform: 'translateY(0)',
-              },
-            })}
+              width: '100%',
+            }}
           >
             <span>Keep Going!</span>
           </button>