Fix dark mode

2026-04-27 18:07:37 -04:00 · 2025-07-30 13:04:35 +02:00
parent 77798dc54c
commit 04b7c998c5
10 changed files with 73 additions and 42 deletions
--- 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">
--- 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
--- 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>
--- 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
--- 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>

--- 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>
  );
 }
--- 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">
--- 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>
  );
 }
-
--- 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",
--- 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",