style(ui): update dark mode background colors to use #090909 instead of neutral variants

This commit is contained in:
2026-04-22 19:32:14 -04:00
parent cfbfbaaa3b
commit 869afbcb85
9 changed files with 10 additions and 10 deletions
+1 -1
View File
@@ -161,7 +161,7 @@ const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appNa
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<MenuItems className="absolute right-0 mt-4 w-48 outline-none rounded-xl border border-black/8 dark:border-white/8 bg-neutral-50 dark:bg-black shadow-lg overflow-hidden z-50"> <MenuItems className="absolute right-0 mt-4 w-48 outline-none rounded-xl border border-black/8 dark:border-white/8 bg-white dark:bg-[#090909] shadow-lg overflow-hidden z-50">
<div className="p-1.5 flex flex-col gap-0.5"> <div className="p-1.5 flex flex-col gap-0.5">
{/* Quick links — mobile only */} {/* Quick links — mobile only */}
{quickLinks.length > 0 && ( {quickLinks.length > 0 && (
@@ -98,7 +98,7 @@ export default function ConfirmEmailPage({ onSubmit, onNavigate, email, token })
console.log('ConfirmEmailPage render', { success, error, isLoading, hasVerified }); console.log('ConfirmEmailPage render', { success, error, isLoading, hasVerified });
return ( return (
<div className="group bg-white/80 dark:bg-neutral-900/40 backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md"> <div className="group bg-white/80 dark:bg-[#090909] backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md">
{/* Header */} {/* Header */}
<div className="text-center mb-6"> <div className="text-center mb-6">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2"> <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
@@ -59,7 +59,7 @@ export default function ForgotPasswordPage({ onSubmit, onNavigate, currentUser =
const inputClasses = 'w-full px-3 py-2.5 rounded-lg text-sm focus:outline-none transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20'; const inputClasses = 'w-full px-3 py-2.5 rounded-lg text-sm focus:outline-none transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20';
return ( return (
<div className="group bg-white/80 dark:bg-neutral-900/40 backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md"> <div className="group bg-white/80 dark:bg-[#090909] backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md">
{/* Header */} {/* Header */}
<div className="text-center mb-6"> <div className="text-center mb-6">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2"> <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
+1 -1
View File
@@ -88,7 +88,7 @@ export default function LoginPage({ onSubmit, onNavigate, onSetSessionCookie, re
const inputClasses = 'w-full px-[10px] py-[7px] rounded text-[13px] focus:outline-none transition-all duration-[120ms] ease-out disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20'; const inputClasses = 'w-full px-[10px] py-[7px] rounded text-[13px] focus:outline-none transition-all duration-[120ms] ease-out disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20';
return ( return (
<div className="bg-white dark:bg-neutral-900/40 border border-neutral-200 dark:border-neutral-800/50 rounded-md px-4 py-6 md:px-6 md:py-8 w-full max-w-md"> <div className="bg-white dark:bg-[#090909] border border-neutral-200 dark:border-neutral-800/50 rounded-md px-4 py-6 md:px-6 md:py-8 w-full max-w-md">
{/* Header */} {/* Header */}
<div className="text-center mb-6"> <div className="text-center mb-6">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2"> <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
+1 -1
View File
@@ -52,7 +52,7 @@ export default function LogoutPage({ onLogout, onSetSessionCookie }) {
}; };
return ( return (
<div className="group bg-white/80 dark:bg-neutral-900/40 backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md"> <div className="group bg-white/80 dark:bg-[#090909] backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md">
{/* Header */} {/* Header */}
<div className="text-center mb-6"> <div className="text-center mb-6">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2"> <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
@@ -159,7 +159,7 @@ export default function RegisterPage({ onSubmit, onNavigate, currentUser = null
const inputClasses = 'w-full px-3 py-2.5 rounded-lg text-sm focus:outline-none transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20'; const inputClasses = 'w-full px-3 py-2.5 rounded-lg text-sm focus:outline-none transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20';
return ( return (
<div className="bg-white/80 dark:bg-neutral-900/40 backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md"> <div className="bg-white/80 dark:bg-[#090909] backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md">
{/* Header */} {/* Header */}
<div className="text-center mb-6"> <div className="text-center mb-6">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2"> <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
@@ -111,7 +111,7 @@ export default function ResetPasswordPage({ onSubmit, onNavigate, email, token }
const inputClasses = 'w-full px-3 py-2.5 rounded-lg text-sm focus:outline-none transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20'; const inputClasses = 'w-full px-3 py-2.5 rounded-lg text-sm focus:outline-none transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20';
return ( return (
<div className="group bg-white/80 dark:bg-neutral-900/40 backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md"> <div className="group bg-white/80 dark:bg-[#090909] backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md">
{/* Header */} {/* Header */}
<div className="text-center mb-6"> <div className="text-center mb-6">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2"> <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
+2 -2
View File
@@ -20,10 +20,10 @@ const Card = ({
const variants = { const variants = {
default: 'rounded-xl bg-white dark:bg-[#0B0B0B] border-neutral-200 dark:border-[#1B1B1B]', default: 'rounded-xl bg-white dark:bg-[#0B0B0B] border-neutral-200 dark:border-[#1B1B1B]',
elevated: 'rounded-xl bg-neutral-50/80 dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50', elevated: 'rounded-xl bg-neutral-50/80 dark:bg-[#090909] border-neutral-200 dark:border-neutral-800/50',
outline: 'rounded-xl bg-transparent border-neutral-300 dark:border-neutral-700/50', outline: 'rounded-xl bg-transparent border-neutral-300 dark:border-neutral-700/50',
solid: 'rounded-xl bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700', solid: 'rounded-xl bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700',
lightDark: 'rounded-xl bg-white dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50', lightDark: 'rounded-xl bg-white dark:bg-[#090909] border-neutral-200 dark:border-neutral-800/50',
success: 'rounded-xl bg-green-700/10 dark:bg-green-600/10 border-green-800/30 dark:border-green-600/20', success: 'rounded-xl bg-green-700/10 dark:bg-green-600/10 border-green-800/30 dark:border-green-600/20',
info: 'rounded-xl bg-blue-700/10 dark:bg-blue-600/10 border-blue-800/30 dark:border-blue-600/20', info: 'rounded-xl bg-blue-700/10 dark:bg-blue-600/10 border-blue-800/30 dark:border-blue-600/20',
warning: 'rounded-xl bg-yellow-700/10 dark:bg-yellow-600/10 border-yellow-800/30 dark:border-yellow-600/20', warning: 'rounded-xl bg-yellow-700/10 dark:bg-yellow-600/10 border-yellow-800/30 dark:border-yellow-600/20',
+1 -1
View File
@@ -19,7 +19,7 @@ const StatCard = ({
return ( return (
<div <div
className={`bg-white dark:bg-neutral-900/40 border border-neutral-200 dark:border-neutral-800/50 rounded-xl px-5 py-4 flex justify-between items-start transition-all duration-[120ms] ease-out ${className}`} className={`bg-white dark:bg-[#090909] border border-neutral-200 dark:border-neutral-800/50 rounded-xl px-5 py-4 flex justify-between items-start transition-all duration-[120ms] ease-out ${className}`}
{...props} {...props}
> >
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">