refactor: remove theme switching, keep dark mode permanent
This commit is contained in:
nmemmert committed
1 parent
a6fcf0eb7b
commit
0d84231ec1
2 files changed
+17
-101
No files matched your search
+1
-23
@@ -48,30 +48,8 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning={true}>
|
||||
<html lang="en" className="dark" suppressHydrationWarning={true}>
|
||||
<head>
|
||||
<script dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
const theme = localStorage.getItem('theme-mode') || 'dark';
|
||||
const html = document.documentElement;
|
||||
|
||||
if (theme === 'dark') {
|
||||
html.classList.add('dark');
|
||||
} else if (theme === 'light') {
|
||||
html.classList.remove('dark');
|
||||
} else if (theme === 'system') {
|
||||
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
if (isDark) {
|
||||
html.classList.add('dark');
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
}
|
||||
}
|
||||
})();
|
||||
`
|
||||
}} />
|
||||
</head>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
interface SettingsPageProps {
|
||||
userEmail?: string;
|
||||
@@ -11,90 +10,33 @@ interface SettingsPageProps {
|
||||
export default function SettingsPage({ userEmail }: SettingsPageProps) {
|
||||
const { logout } = useAuth();
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
const [currentTheme, setCurrentTheme] = useState<string>('dark');
|
||||
|
||||
useEffect(() => {
|
||||
// Get the current theme from localStorage or HTML class
|
||||
const stored = localStorage.getItem('theme-mode');
|
||||
if (stored) {
|
||||
setCurrentTheme(stored);
|
||||
} else {
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
setCurrentTheme(isDark ? 'dark' : 'light');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleThemeChange = (newTheme: string) => {
|
||||
setCurrentTheme(newTheme);
|
||||
localStorage.setItem('theme-mode', newTheme);
|
||||
|
||||
toast.success('🔄 Applying theme...');
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 800);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4 pb-32 pt-8">
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-4 pb-32 pt-8">
|
||||
<div className="max-w-md mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Settings
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Manage your preferences and account
|
||||
</p>
|
||||
<h1 className="text-4xl font-bold text-white mb-2">Settings</h1>
|
||||
<p className="text-slate-400">Manage your account</p>
|
||||
</div>
|
||||
|
||||
{/* Settings Card */}
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 space-y-6">
|
||||
<div className="bg-slate-800 rounded-lg shadow-sm p-4 space-y-6">
|
||||
{/* Account Section */}
|
||||
<div className="border-b border-slate-200 dark:border-slate-700 pb-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
Account
|
||||
</h2>
|
||||
<div className="border-b border-slate-700 pb-6">
|
||||
<h2 className="text-lg font-semibold text-white mb-4">Account</h2>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-600 dark:text-slate-400">Email</p>
|
||||
<p className="text-slate-900 dark:text-white">{userEmail || 'Not set'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Appearance Section */}
|
||||
<div className="border-b border-slate-200 dark:border-slate-700 pb-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
Appearance
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium text-slate-600 dark:text-slate-400 mb-2">
|
||||
Theme
|
||||
</p>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{['light', 'dark', 'system'].map(t => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => handleThemeChange(t)}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors capitalize ${
|
||||
currentTheme === t
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600'
|
||||
}`}
|
||||
>
|
||||
{t === 'system' ? 'Auto' : t}
|
||||
</button>
|
||||
))}
|
||||
<p className="text-sm font-medium text-slate-400">Email</p>
|
||||
<p className="text-white">{userEmail || 'Not set'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* About Section */}
|
||||
<div className="border-b border-slate-200 dark:border-slate-700 pb-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
About
|
||||
</h2>
|
||||
<div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div className="border-b border-slate-700 pb-6">
|
||||
<h2 className="text-lg font-semibold text-white mb-4">About</h2>
|
||||
<div className="space-y-2 text-sm text-slate-400">
|
||||
<p>Prayer Journal v1.0</p>
|
||||
<p>A simple, private space for your daily prayers and reflections.</p>
|
||||
</div>
|
||||
@@ -114,17 +56,13 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
|
||||
{/* Logout Confirmation Modal */}
|
||||
{showConfirm && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl p-6 max-w-sm w-full">
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Logout?
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-6">
|
||||
Are you sure you want to logout?
|
||||
</p>
|
||||
<div className="bg-slate-800 rounded-xl p-6 max-w-sm w-full">
|
||||
<h2 className="text-xl font-bold text-white mb-2">Logout?</h2>
|
||||
<p className="text-slate-400 mb-6">Are you sure you want to logout?</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowConfirm(false)}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-white font-medium hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors"
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
Reference in new issue
Block a user