From 53c093647c3bc3ab0c0e1f63f7f26a690a078a97 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sun, 2 Mar 2025 04:11:56 +0000
Subject: [PATCH] dark mode!

---
 packages/client/src/App.tsx                     |  2 +-
 packages/client/src/components/Header.tsx       | 10 +++++-----
 packages/client/src/components/StatusForm.tsx   | 12 +++++++-----
 packages/client/src/components/StatusList.tsx   | 12 ++++++------
 packages/client/src/index.css                   |  7 +++++++
 packages/client/src/pages/HomePage.tsx          | 10 +++++-----
 packages/client/src/pages/LoginPage.tsx         | 12 ++++++------
 packages/client/src/pages/OAuthCallbackPage.tsx | 10 +++++-----
 8 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index 308e7ca..d3376ec 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -7,7 +7,7 @@ import OAuthCallbackPage from '#/pages/OAuthCallbackPage'
 
 function App() {
   return (
-    <div className="bg-gray-50 min-h-screen">
+    <div className="min-h-screen">
       <div className="max-w-4xl mx-auto p-4 w-full">
         <AuthProvider>
           <Routes>
diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx
index 80d0e9f..d638983 100644
--- a/packages/client/src/components/Header.tsx
+++ b/packages/client/src/components/Header.tsx
@@ -14,12 +14,12 @@ const Header = () => {
   }
 
   return (
-    <header className="mb-8 border-b border-gray-200 pb-4">
+    <header className="mb-8 border-b border-gray-200 dark:border-gray-700 pb-4">
       <div className="flex justify-between items-center">
         <h1 className="m-0 text-2xl font-bold">
           <Link
             to="/"
-            className="no-underline text-inherit hover:text-blue-600 transition-colors"
+            className="no-underline text-inherit hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
           >
             Statusphere
           </Link>
@@ -27,21 +27,21 @@ const Header = () => {
         <nav>
           {user ? (
             <div className="flex gap-4 items-center">
-              <span className="text-gray-700">
+              <span className="text-gray-700 dark:text-gray-300">
                 {user.profile?.displayName ||
                   user.profile?.handle ||
                   user.did.substring(0, 15)}
               </span>
               <button
                 onClick={handleLogout}
-                className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md transition-colors"
+                className="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-colors"
               >
                 Logout
               </button>
             </div>
           ) : (
             <Link to="/login">
-              <button className="px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 rounded-md transition-colors">
+              <button className="px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 rounded-md transition-colors">
                 Login
               </button>
             </Link>
diff --git a/packages/client/src/components/StatusForm.tsx b/packages/client/src/components/StatusForm.tsx
index 45efa72..1dd1311 100644
--- a/packages/client/src/components/StatusForm.tsx
+++ b/packages/client/src/components/StatusForm.tsx
@@ -132,10 +132,10 @@ const StatusForm = () => {
   }
 
   return (
-    <div className="bg-white rounded-lg p-4 mb-6 shadow-sm">
+    <div className="bg-white dark:bg-gray-800 rounded-lg p-4 mb-6 shadow-sm">
       <h2 className="text-xl font-semibold mb-4">How are you feeling?</h2>
       {(error || mutation.error) && (
-        <div className="text-red-500 mb-4 p-2 bg-red-50 rounded-md">
+        <div className="text-red-500 mb-4 p-2 bg-red-50 dark:bg-red-950 dark:bg-opacity-30 rounded-md">
           {error ||
             (mutation.error instanceof Error
               ? mutation.error.message
@@ -159,10 +159,12 @@ const StatusForm = () => {
                 flex items-center justify-center
                 transition-all duration-200
                 ${isSelected ? 'opacity-60' : 'opacity-100'}
-                ${!isSelected ? 'hover:bg-gray-100 hover:scale-110' : ''}
-                ${isCurrentStatus ? 'bg-blue-50 ring-1 ring-blue-200' : ''}
+                ${!isSelected ? 'hover:bg-gray-100 dark:hover:bg-gray-700 hover:scale-110' : ''}
+                ${isCurrentStatus 
+                  ? 'bg-blue-50 ring-1 ring-blue-200 dark:bg-blue-900 dark:bg-opacity-30 dark:ring-blue-700' 
+                  : ''}
                 active:scale-95
-                focus:outline-none focus:ring-2 focus:ring-blue-300
+                focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500
               `}
               title={isCurrentStatus ? 'Your current status' : undefined}
             >
diff --git a/packages/client/src/components/StatusList.tsx b/packages/client/src/components/StatusList.tsx
index 62d67d8..10a480f 100644
--- a/packages/client/src/components/StatusList.tsx
+++ b/packages/client/src/components/StatusList.tsx
@@ -18,7 +18,7 @@ const StatusList = () => {
 
   if (isLoading && !data) {
     return (
-      <div className="py-4 text-center text-gray-500">Loading statuses...</div>
+      <div className="py-4 text-center text-gray-500 dark:text-gray-400">Loading statuses...</div>
     )
   }
 
@@ -32,7 +32,7 @@ const StatusList = () => {
 
   if (statuses.length === 0) {
     return (
-      <div className="py-4 text-center text-gray-500">No statuses yet.</div>
+      <div className="py-4 text-center text-gray-500 dark:text-gray-400">No statuses yet.</div>
     )
   }
 
@@ -59,7 +59,7 @@ const StatusList = () => {
   return (
     <div className="px-4">
       <div className="relative">
-        <div className="absolute left-[20.5px] top-[22.5px] bottom-[22.5px] w-0.5 bg-gray-200"></div>
+        <div className="absolute left-[20.5px] top-[22.5px] bottom-[22.5px] w-0.5 bg-gray-200 dark:bg-gray-700"></div>
         {statuses.map((status) => {
           const handle =
             status.profile.handle || status.profile.did.substring(0, 15) + '...'
@@ -71,12 +71,12 @@ const StatusList = () => {
               key={status.uri}
               className="relative flex items-center gap-5 py-4"
             >
-              <div className="relative z-10 rounded-full bg-white border border-gray-200 h-[45px] w-[45px] flex items-center justify-center shadow-sm">
+              <div className="relative z-10 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 h-[45px] w-[45px] flex items-center justify-center shadow-sm">
                 <div className="text-2xl">{status.status}</div>
               </div>
               <div className="flex-1">
-                <div className="text-gray-600 text-base">
-                  <span className="font-medium text-gray-700 hover:underline">
+                <div className="text-gray-600 dark:text-gray-300 text-base">
+                  <span className="font-medium text-gray-700 dark:text-gray-200 hover:underline">
                     @{handle}
                   </span>{' '}
                   {isToday ? (
diff --git a/packages/client/src/index.css b/packages/client/src/index.css
index 53bed96..3d46618 100644
--- a/packages/client/src/index.css
+++ b/packages/client/src/index.css
@@ -9,3 +9,10 @@
 .status-message-fade {
   animation: fadeOut 2s forwards;
 }
+
+/* Base styling */
+@layer base {
+  body {
+    @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100;
+  }
+}
diff --git a/packages/client/src/pages/HomePage.tsx b/packages/client/src/pages/HomePage.tsx
index 3d4928b..94e0cb2 100644
--- a/packages/client/src/pages/HomePage.tsx
+++ b/packages/client/src/pages/HomePage.tsx
@@ -10,10 +10,10 @@ const HomePage = () => {
     return (
       <div className="flex justify-center items-center py-16">
         <div className="text-center p-6">
-          <h2 className="text-2xl font-semibold mb-2 text-gray-800">
+          <h2 className="text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">
             Loading Statusphere...
           </h2>
-          <p className="text-gray-600">Setting up your experience</p>
+          <p className="text-gray-600 dark:text-gray-400">Setting up your experience</p>
         </div>
       </div>
     )
@@ -23,11 +23,11 @@ const HomePage = () => {
     return (
       <div className="flex justify-center items-center py-16">
         <div className="text-center p-6 max-w-md">
-          <h2 className="text-2xl font-semibold mb-2 text-gray-800">Error</h2>
+          <h2 className="text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">Error</h2>
           <p className="text-red-500 mb-4">{error}</p>
           <a
             href="/login"
-            className="inline-block px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
+            className="inline-block px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors"
           >
             Try logging in again
           </a>
@@ -43,7 +43,7 @@ const HomePage = () => {
       {user && <StatusForm />}
 
       <div>
-        <h2 className="text-xl font-semibold mb-4 text-gray-800">
+        <h2 className="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">
           Recent Statuses
         </h2>
         <StatusList />
diff --git a/packages/client/src/pages/LoginPage.tsx b/packages/client/src/pages/LoginPage.tsx
index f38e7a4..2f6b897 100644
--- a/packages/client/src/pages/LoginPage.tsx
+++ b/packages/client/src/pages/LoginPage.tsx
@@ -31,18 +31,18 @@ const LoginPage = () => {
     <div className="flex flex-col gap-8">
       <Header />
 
-      <div className="bg-white rounded-lg p-6 shadow-sm max-w-md mx-auto w-full">
+      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm max-w-md mx-auto w-full">
         <h2 className="text-xl font-semibold mb-4">Login with your handle</h2>
 
         {error && (
-          <div className="text-red-500 mb-4 p-2 bg-red-50 rounded-md">
+          <div className="text-red-500 mb-4 p-2 bg-red-50 dark:bg-red-950 dark:bg-opacity-30 rounded-md">
             {error}
           </div>
         )}
 
         <form onSubmit={handleSubmit}>
           <div className="mb-4">
-            <label htmlFor="handle" className="block mb-2 text-gray-700">
+            <label htmlFor="handle" className="block mb-2 text-gray-700 dark:text-gray-300">
               Enter your Bluesky handle:
             </label>
             <input
@@ -52,14 +52,14 @@ const LoginPage = () => {
               onChange={(e) => setHandle(e.target.value)}
               placeholder="example.bsky.social"
               disabled={loading}
-              className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300"
+              className="w-full p-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500"
             />
           </div>
 
           <button
             type="submit"
             disabled={loading}
-            className={`w-full px-4 py-2 rounded-md bg-blue-500 text-white font-medium hover:bg-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 ${
+            className={`w-full px-4 py-2 rounded-md bg-blue-500 dark:bg-blue-600 text-white font-medium hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500 ${
               loading ? 'opacity-70 cursor-not-allowed' : ''
             }`}
           >
@@ -70,7 +70,7 @@ const LoginPage = () => {
         <div className="mt-4 text-center">
           <Link
             to="/"
-            className="text-blue-500 hover:text-blue-700 transition-colors"
+            className="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
           >
             Cancel
           </Link>
diff --git a/packages/client/src/pages/OAuthCallbackPage.tsx b/packages/client/src/pages/OAuthCallbackPage.tsx
index 06ef718..206c945 100644
--- a/packages/client/src/pages/OAuthCallbackPage.tsx
+++ b/packages/client/src/pages/OAuthCallbackPage.tsx
@@ -66,7 +66,7 @@ const OAuthCallbackPage = () => {
 
   return (
     <div className="flex items-center justify-center py-16">
-      <div className="bg-white rounded-lg shadow-sm p-8 max-w-md w-full text-center">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-8 max-w-md w-full text-center">
         {error ? (
           <div>
             <h2 className="text-2xl font-bold text-red-500 mb-4">
@@ -75,20 +75,20 @@ const OAuthCallbackPage = () => {
             <p className="text-red-500 mb-6">{error}</p>
             <button
               onClick={() => navigate('/login')}
-              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
+              className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors"
             >
               Try Again
             </button>
           </div>
         ) : (
           <div>
-            <h2 className="text-2xl font-bold text-gray-800 mb-4">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">
               Authentication in Progress
             </h2>
             <div className="flex justify-center mb-4">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 dark:border-blue-400"></div>
             </div>
-            <p className="text-gray-600">{message}</p>
+            <p className="text-gray-600 dark:text-gray-400">{message}</p>
           </div>
         )}
       </div>
-- 
2.51.2