From 04b7c998c59a16df69cf7653d2b0d3acc691037d Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Wed, 30 Jul 2025 13:04:35 +0200
Subject: [PATCH] Fix dark mode

---
 app/Header.tsx                |  2 +-
 app/complete-profile/page.tsx | 18 ++++++++++--------
 app/layout.tsx                | 20 +++++++++++++++++++-
 app/learn-more/page.tsx       | 11 ++++++++++-
 app/login/page.tsx            |  2 +-
 app/page.tsx                  | 20 +-------------------
 app/register/page.tsx         |  4 ++--
 lib/client/theme.tsx          | 20 +++++++++++---------
 package-lock.json             | 16 ++++++++++++++++
 package.json                  |  2 ++
 10 files changed, 73 insertions(+), 42 deletions(-)

diff --git a/app/Header.tsx b/app/Header.tsx
index b50d9dd5..16d997fd 100644
--- a/app/Header.tsx
+++ b/app/Header.tsx
@@ -15,9 +15,9 @@ export default function Header() {
         <Link href="/" className="text-xl font-bold hover:text-blue-600 transition-colors">
           BayesBond
         </Link>
-        <ThemeToggle />
         <div className="flex items-center space-x-4">
 
+          <ThemeToggle />
           {session ? (
             <>
               <div className="flex items-center space-x-4">
diff --git a/app/complete-profile/page.tsx b/app/complete-profile/page.tsx
index 65f60a34..d6587f46 100644
--- a/app/complete-profile/page.tsx
+++ b/app/complete-profile/page.tsx
@@ -264,6 +264,8 @@ function RegisterComponent() {
   const personalityOptions = Object.values(PersonalityType);
   const conflictOptions = Object.values(ConflictStyle);
 
+  const headingStyle = "block text-sm font-medium text-gray-700 dark:text-white mb-1";
+
   return (
     <div className="min-h-screen flex items-center justify-center  py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
@@ -334,7 +336,7 @@ function RegisterComponent() {
 
           <div className="space-y-4">
             <div>
-              <label htmlFor="gender" className="block text-sm font-medium text-gray-700 mb-1">
+              <label htmlFor="gender" className={headingStyle}>
                 Gender <span className="text-red-500">*</span>
               </label>
               <select
@@ -355,7 +357,7 @@ function RegisterComponent() {
             </div>
 
             <div>
-              <label htmlFor="location" className="block text-sm font-medium text-gray-700 mb-1">
+              <label htmlFor="location" className={headingStyle}>
                 Location
               </label>
               <input
@@ -370,7 +372,7 @@ function RegisterComponent() {
             </div>
 
             <div>
-              <label htmlFor="personalityType" className="block text-sm font-medium text-gray-700 mb-1">
+              <label htmlFor="personalityType" className={headingStyle}>
                 Personality Type
               </label>
               <select
@@ -390,7 +392,7 @@ function RegisterComponent() {
             </div>
 
             <div>
-              <label htmlFor="conflictStyle" className="block text-sm font-medium text-gray-700 mb-1">
+              <label htmlFor="conflictStyle" className={headingStyle}>
                 Conflict Style
               </label>
               <select
@@ -410,7 +412,7 @@ function RegisterComponent() {
             </div>
 
             <div className="relative" ref={dropdownRef}>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className={headingStyle}>
                 Interests
               </label>
 
@@ -449,7 +451,7 @@ function RegisterComponent() {
 
                 {(showDropdown || newInterest) && (
                   <div
-                    className="absolute z-10 mt-1 w-full  shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+                    className="absolute z-10 mt-1 w-full  dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
                     {/* New interest option */}
                     {newInterest && !allInterests.some(i =>
                       i.name.toLowerCase() === newInterest.toLowerCase()
@@ -531,7 +533,7 @@ function RegisterComponent() {
             </div>
 
             <div>
-              <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+              <label htmlFor="description" className={headingStyle}>
                 About You <span className="text-red-500">*</span>
               </label>
               <textarea
@@ -547,7 +549,7 @@ function RegisterComponent() {
             </div>
 
             <div>
-              <label htmlFor="contactInfo" className="block text-sm font-medium text-gray-700 mb-1">
+              <label htmlFor="contactInfo" className={headingStyle}>
                 Contact Information
               </label>
               <textarea
diff --git a/app/layout.tsx b/app/layout.tsx
index 7c2cf4fb..1d714b96 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -18,13 +18,31 @@ export default function RootLayout(
     children: React.ReactNode;
   }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className="dark">
     <body>
     <Providers>
       <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <div className="min-h-screen flex flex-col dark:bg-gray-900 dark:text-white">
         <Header/>
         {children}
+
+        {/* Footer */}
+        <footer className="p-6 text-center text-gray-500">
+          <div className="mb-2">
+            <a
+              href="https://github.com/BayesBond/BayesBond"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center text-gray-500 hover:text-gray-700 transition"
+            >
+              <svg className="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.699 1.028 1.595 1.028 2.688 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+              </svg>
+              View on GitHub
+            </a>
+          </div>
+          <div>© {new Date().getFullYear()} BayesBond. All rights reserved.</div>
+        </footer>
       </div>
       </ThemeProvider>
     </Providers>
diff --git a/app/learn-more/page.tsx b/app/learn-more/page.tsx
index 22e86e17..43b18702 100644
--- a/app/learn-more/page.tsx
+++ b/app/learn-more/page.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import Link from "next/link";
+
 export default function LearnMorePage() {
   return (
     <div className="text-gray-600 dark:text-white min-h-screen p-6">
@@ -22,7 +24,14 @@ export default function LearnMorePage() {
             donation-supported, open source, and democratically governed. The goal of this article is to better
             understand the community needs, as well as to gather feedback and collaboration for the suggested
             implementation.</p>
-          <p className="mt-2">For more information, read the <a href="https://martinbraquet.com/meeting-rational">full article here</a>.</p>
+          <div className="mt-8 flex space-x-4 justify-center">
+            <Link
+              href="https://martinbraquet.com/meeting-rational"
+              className="px-6 py-3 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white text-lg rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition"
+            >
+              Full article
+            </Link>
+          </div>
           <h3 id="how-to-help">How to Help</h3>
           <h5 id="give-suggestions-or-contribute">Give Suggestions or Contribute</h5>
           <p>Give suggestions or show your inclination to contribute through this <a
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 65e0596e..12584300 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -122,7 +122,7 @@ function RegisterComponent() {
                 <div className="w-full border-t border-gray-300"></div>
               </div>
               <div className="relative flex justify-center text-sm">
-                <span className="px-2  text-gray-500">Or continue with</span>
+                <span className="px-2 bg-gray-50 dark:bg-gray-900 text-gray-500">Or continue with</span>
               </div>
             </div>
 
diff --git a/app/page.tsx b/app/page.tsx
index 8f2aec16..6f9eb61f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -37,7 +37,7 @@ export default function HomePage() {
         <h1 className="text-5xl md:text-6xl font-extrabold max-w-3xl leading-tight">
           BayesBond
         </h1>
-        <p className="mt-6 text-lg md:text-xl text-gray-600 max-w-2xl">
+        <p className="mt-6 text-lg md:text-xl text-gray-400 max-w-2xl">
           The bonding platform for rational thinkers
         </p>
         <div className="mt-8 flex space-x-4">
@@ -52,24 +52,6 @@ export default function HomePage() {
           {profilePage()}
         </div>
       </section>
-
-      {/* Footer */}
-      <footer className="p-6 text-center text-gray-500">
-        <div className="mb-2">
-          <a 
-            href="https://github.com/BayesBond/BayesBond" 
-            target="_blank" 
-            rel="noopener noreferrer"
-            className="inline-flex items-center text-gray-500 hover:text-gray-700 transition"
-          >
-            <svg className="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-              <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.699 1.028 1.595 1.028 2.688 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
-            </svg>
-            View on GitHub
-          </a>
-        </div>
-        <div>© {new Date().getFullYear()} BayesBond. All rights reserved.</div>
-      </footer>
     </main>
   );
 }
diff --git a/app/register/page.tsx b/app/register/page.tsx
index 1e04b950..b3f58ae7 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -226,7 +226,7 @@ function RegisterComponent() {
                     <div className="w-full border-t border-gray-300"></div>
                   </div>
                   <div className="relative flex justify-center text-sm">
-                    <span className="px-2  text-gray-500">Or sign up with</span>
+                    <span className="px-2 bg-gray-50 dark:bg-gray-900 text-gray-500">Or sign up with</span>
                   </div>
                 </div>
 
@@ -241,7 +241,7 @@ function RegisterComponent() {
                 </button>
               </div>
             </form>
-            <div className="text-center text-sm">
+            <div className="text-center text-sm mt-2">
               <p className="text-gray-600">
                 Already have an account?{' '}
                 <Link href="/login" className="font-medium text-blue-600 hover:text-blue-500">
diff --git a/lib/client/theme.tsx b/lib/client/theme.tsx
index 742d2e80..7d330b3c 100644
--- a/lib/client/theme.tsx
+++ b/lib/client/theme.tsx
@@ -2,6 +2,7 @@
 
 import {useTheme} from 'next-themes';
 import {useEffect, useState} from 'react';
+import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
 
 
 export default function ThemeToggle() {
@@ -17,16 +18,17 @@ export default function ThemeToggle() {
   return (
     <button
       onClick={() => setTheme(isDark ? 'light' : 'dark')}
-      className={`relative inline-flex h-6 w-12 items-center rounded-full transition-colors duration-300 ${
-        isDark ? 'bg-gray-300' : 'bg-gray-700'
-      }`}
+      className={`relative inline-flex h-8 items-center rounded-full border-4 transition-colors duration-300`}
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
     >
-      <span
-        className={`inline-block h-4 w-4 transform rounded-full bg-gray-200 transition-transform duration-300 ${
-          isDark ? 'translate-x-6' : 'translate-x-1'
-        }`}
-      />
+      <div className="flex items-center justify-between px-2 w-16">
+        <div className={`p-1 rounded-md`}>
+          <SunIcon className={`h-4 w-4 text-yellow-500 ${isDark ? 'hidden' : ''}`} />
+        </div>
+        <div className={`p-1 rounded-md`}>
+          <MoonIcon className={`h-4 w-4 text-yellow-500 ${isDark ? '' : 'hidden'}`} />
+        </div>
+      </div>
     </button>
   );
 }
-
diff --git a/package-lock.json b/package-lock.json
index 24d49f83..2dcbd19a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@auth/prisma-adapter": "^2.10.0",
         "@aws-sdk/client-s3": "^3.855.0",
         "@aws-sdk/s3-request-presigner": "^3.855.0",
+        "@heroicons/react": "^2.2.0",
         "@next-auth/prisma-adapter": "^1.0.7",
         "@prisma/client": "^6.12.0",
         "@prisma/extension-accelerate": "^2.0.2",
@@ -19,6 +20,7 @@
         "@supabase/supabase-js": "^2.53.0",
         "@types/uuid": "^10.0.0",
         "bcryptjs": "^3.0.2",
+        "heroicons": "^2.2.0",
         "jsonwebtoken": "^9.0.2",
         "lucide-react": "^0.503.0",
         "next": "^15.4.4",
@@ -1743,6 +1745,14 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -6206,6 +6216,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/heroicons": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-2.2.0.tgz",
+      "integrity": "sha512-yOwvztmNiBWqR946t+JdgZmyzEmnRMC2nxvHFC90bF1SUttwB6yJKYeme1JeEcBfobdOs827nCyiWBS2z/brog==",
+      "license": "MIT"
+    },
     "node_modules/html-to-text": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
diff --git a/package.json b/package.json
index e1c4d8a3..da739024 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@auth/prisma-adapter": "^2.10.0",
     "@aws-sdk/client-s3": "^3.855.0",
     "@aws-sdk/s3-request-presigner": "^3.855.0",
+    "@heroicons/react": "^2.2.0",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^6.12.0",
     "@prisma/extension-accelerate": "^2.0.2",
@@ -20,6 +21,7 @@
     "@supabase/supabase-js": "^2.53.0",
     "@types/uuid": "^10.0.0",
     "bcryptjs": "^3.0.2",
+    "heroicons": "^2.2.0",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.503.0",
     "next": "^15.4.4",