hammer/network-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark mode for all pages, calendar view for events

Browse Source
This commit is contained in:
Hammer
2026-01-29 14:12:35 +00:00
parent 8c27b7b522
commit d5706d4ead
16 changed files with 710 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/SettingsPage.tsx
View File

@@ -7,7 +7,7 @@ import LoadingSpinner, { PageLoader } from '@/components/LoadingSpinner';
function StatusMessage({ type, message }: { type: 'success' | 'error'; message: string }) {
return (
<div className={`flex items-center gap-2 text-sm font-medium animate-fade-in ${type === 'success' ? 'text-emerald-600' : 'text-red-600'}`}>
<div className={`flex items-center gap-2 text-sm font-medium animate-fade-in ${type === 'success' ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}>
{type === 'success' ? <CheckCircle2 className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
{message}
</div>
@@ -104,26 +104,26 @@ export default function SettingsPage() {
if (loading) return <PageLoader />;
const inputClass = 'w-full px-3.5 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
const labelClass = 'block text-sm font-medium text-slate-700 mb-1.5';
const inputClass = 'w-full px-3.5 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg text-sm text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
const labelClass = 'block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5';
return (
<div className="max-w-2xl mx-auto space-y-6 animate-fade-in">
<div>
<h1 className="text-2xl font-bold text-slate-900">Settings</h1>
<p className="text-slate-500 text-sm mt-1">Manage your profile, email, and password</p>
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Settings</h1>
<p className="text-slate-500 dark:text-slate-400 text-sm mt-1">Manage your profile, email, and password</p>
</div>
{/* Profile Information */}
<form onSubmit={handleSaveProfile} className="space-y-6">
<div className="bg-white border border-slate-200 rounded-xl p-6 space-y-5">
<div className="flex items-center gap-3 pb-4 border-b border-slate-100">
<div className="w-10 h-10 bg-blue-100 text-blue-700 rounded-lg flex items-center justify-center">
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 space-y-5">
<div className="flex items-center gap-3 pb-4 border-b border-slate-100 dark:border-slate-700">
<div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded-lg flex items-center justify-center">
<User className="w-5 h-5" />
</div>
<div>
<h2 className="font-semibold text-slate-900">Profile Information</h2>
<p className="text-xs text-slate-500">Your public-facing details</p>
<h2 className="font-semibold text-slate-900 dark:text-slate-100">Profile Information</h2>
<p className="text-xs text-slate-500 dark:text-slate-400">Your public-facing details</p>
</div>
</div>
@@ -194,14 +194,14 @@ export default function SettingsPage() {
{/* Change Email */}
<form onSubmit={handleChangeEmail}>
<div className="bg-white border border-slate-200 rounded-xl p-6 space-y-5">
<div className="flex items-center gap-3 pb-4 border-b border-slate-100">
<div className="w-10 h-10 bg-amber-100 text-amber-700 rounded-lg flex items-center justify-center">
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 space-y-5">
<div className="flex items-center gap-3 pb-4 border-b border-slate-100 dark:border-slate-700">
<div className="w-10 h-10 bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 rounded-lg flex items-center justify-center">
<Mail className="w-5 h-5" />
</div>
<div>
<h2 className="font-semibold text-slate-900">Change Email</h2>
<p className="text-xs text-slate-500">Update your login email address</p>
<h2 className="font-semibold text-slate-900 dark:text-slate-100">Change Email</h2>
<p className="text-xs text-slate-500 dark:text-slate-400">Update your login email address</p>
</div>
</div>
@@ -233,14 +233,14 @@ export default function SettingsPage() {
{/* Change Password */}
<form onSubmit={handleChangePassword}>
<div className="bg-white border border-slate-200 rounded-xl p-6 space-y-5">
<div className="flex items-center gap-3 pb-4 border-b border-slate-100">
<div className="w-10 h-10 bg-emerald-100 text-emerald-700 rounded-lg flex items-center justify-center">
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 space-y-5">
<div className="flex items-center gap-3 pb-4 border-b border-slate-100 dark:border-slate-700">
<div className="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-300 rounded-lg flex items-center justify-center">
<Lock className="w-5 h-5" />
</div>
<div>
<h2 className="font-semibold text-slate-900">Change Password</h2>
<p className="text-xs text-slate-500">Update your account password</p>
<h2 className="font-semibold text-slate-900 dark:text-slate-100">Change Password</h2>
<p className="text-xs text-slate-500 dark:text-slate-400">Update your account password</p>
</div>
</div>