From 4db3b94b68f0a7517842a54e590ab72e23293ebc Mon Sep 17 00:00:00 2001
From: Alex Kern <alex@kern.io>
Date: Mon, 30 Jun 2025 22:37:27 -0700
Subject: [PATCH] Upgrade to Tailwind v4 (#281)

---
 src/components/CopyableInput.tsx              | 2 +-
 src/components/DownloadButton.tsx             | 2 +-
 src/components/ProgressBar.tsx                | 4 ++--
 src/components/ReportTermsViolationButton.tsx | 2 +-
 src/components/StartButton.tsx                | 2 +-
 src/components/UnlockButton.tsx               | 2 +-
 src/styles.css                                | 4 +---
 7 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/CopyableInput.tsx b/src/components/CopyableInput.tsx
index b5a8ae8..9df1884 100644
--- a/src/components/CopyableInput.tsx
+++ b/src/components/CopyableInput.tsx
@@ -16,7 +16,7 @@ export function CopyableInput({
       <InputLabel>{label}</InputLabel>
       <div className="flex w-full">
         <input
-          className="flex-grow px-3 py-2 text-xs border border-r-0 rounded-l text-stone-900 dark:text-stone-100 bg-white dark:bg-stone-800 border-stone-300 dark:border-stone-600"
+          className="grow px-3 py-2 text-xs border border-r-0 rounded-l text-stone-900 dark:text-stone-100 bg-white dark:bg-stone-800 border-stone-300 dark:border-stone-600"
           value={value}
           readOnly
         />
diff --git a/src/components/DownloadButton.tsx b/src/components/DownloadButton.tsx
index a5c8795..e05cefe 100644
--- a/src/components/DownloadButton.tsx
+++ b/src/components/DownloadButton.tsx
@@ -8,7 +8,7 @@ export default function DownloadButton({
   return (
     <button
       onClick={onClick}
-      className="h-12 px-4 bg-gradient-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
+      className="h-12 px-4 bg-linear-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
     >
       Download
     </button>
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index 412ae03..76982b2 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -18,8 +18,8 @@ export default function ProgressBar({
       <div
         className={`h-full ${
           isComplete
-            ? 'bg-gradient-to-b from-green-500 to-green-600'
-            : 'bg-gradient-to-b from-blue-500 to-blue-600'
+            ? 'bg-linear-to-b from-green-500 to-green-600'
+            : 'bg-linear-to-b from-blue-500 to-blue-600'
         } transition-all duration-300 ease-in-out`}
         style={{ width: `${percentage}%` }}
       />
diff --git a/src/components/ReportTermsViolationButton.tsx b/src/components/ReportTermsViolationButton.tsx
index c8b0f03..f0fca56 100644
--- a/src/components/ReportTermsViolationButton.tsx
+++ b/src/components/ReportTermsViolationButton.tsx
@@ -128,7 +128,7 @@ export default function ReportTermsViolationButton({
               <button
                 disabled={isReporting}
                 onClick={handleReport}
-                className={`px-4 py-2 bg-gradient-to-b from-red-500 to-red-600 text-white rounded-md border border-red-600 shadow-sm text-shadow disabled:opacity-50 disabled:cursor-not-allowed enabled:hover:from-red-500 enabled:hover:to-red-700 enabled:hover:shadow-md transition-all duration-200`}
+                className={`px-4 py-2 bg-linear-to-b from-red-500 to-red-600 text-white rounded-md border border-red-600 shadow-sm text-shadow disabled:opacity-50 disabled:cursor-not-allowed enabled:hover:from-red-500 enabled:hover:to-red-700 enabled:hover:shadow-md transition-all duration-200`}
                 aria-label="Confirm report"
               >
                 {isReporting ? 'Reporting...' : 'Report'}
diff --git a/src/components/StartButton.tsx b/src/components/StartButton.tsx
index 800cb3c..af2c6c8 100644
--- a/src/components/StartButton.tsx
+++ b/src/components/StartButton.tsx
@@ -8,7 +8,7 @@ export default function StartButton({
   return (
     <button
       onClick={onClick}
-      className="px-4 py-2 bg-gradient-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
+      className="px-4 py-2 bg-linear-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
     >
       Start
     </button>
diff --git a/src/components/UnlockButton.tsx b/src/components/UnlockButton.tsx
index adbf482..03849e6 100644
--- a/src/components/UnlockButton.tsx
+++ b/src/components/UnlockButton.tsx
@@ -8,7 +8,7 @@ export default function UnlockButton({
   return (
     <button
       onClick={onClick}
-      className="px-4 py-2 bg-gradient-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
+      className="px-4 py-2 bg-linear-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
     >
       Unlock
     </button>
diff --git a/src/styles.css b/src/styles.css
index 582992c..4a57778 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
 html {
   height: 100dvh;