egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: post Dark mode fixes

Browse Source
This commit is contained in:
Eric Gullickson
2025-12-27 20:00:51 -06:00
parent 1799f2fee1
commit 69171f7778
17 changed files with 125 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/features/settings/mobile/DeleteAccountModal.tsx
View File

@@ -36,13 +36,13 @@ export const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({ isOpen,
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg p-6 max-w-md w-full">
<h3 className="text-xl font-semibold text-slate-800 mb-4">Delete Account</h3>
<div className="bg-white dark:bg-scuro rounded-lg p-6 max-w-md w-full">
<h3 className="text-xl font-semibold text-slate-800 dark:text-avus mb-4">Delete Account</h3>
{/* Warning Alert */}
<div className="mb-4 p-4 bg-amber-50 border border-amber-200 rounded-lg">
<p className="font-semibold text-amber-900 mb-2">30-Day Grace Period</p>
<p className="text-sm text-amber-800">
<div className="mb-4 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
<p className="font-semibold text-amber-900 dark:text-amber-200 mb-2">30-Day Grace Period</p>
<p className="text-sm text-amber-800 dark:text-amber-300">
Your account will be scheduled for deletion in 30 days. You can cancel this request at any time during
the grace period by logging back in.
</p>
@@ -50,7 +50,7 @@ export const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({ isOpen,
{/* Confirmation Input */}
<div className="mb-6">
<label className="block text-sm font-medium text-slate-700 mb-1">
<label className="block text-sm font-medium text-slate-700 dark:text-avus mb-1">
Type DELETE to confirm
</label>
<input
@@ -58,14 +58,14 @@ export const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({ isOpen,
value={confirmationText}
onChange={(e) => setConfirmationText(e.target.value)}
placeholder="DELETE"
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 ${
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 dark:bg-scuro dark:text-avus ${
confirmationText.length > 0 && confirmationText !== 'DELETE'
? 'border-red-300 focus:ring-red-500 focus:border-red-500'
: 'border-slate-300 focus:ring-red-500 focus:border-red-500'
? 'border-red-300 dark:border-red-700 focus:ring-red-500 focus:border-red-500'
: 'border-slate-300 dark:border-silverstone focus:ring-red-500 focus:border-red-500'
}`}
style={{ fontSize: '16px', minHeight: '44px' }}
/>
<p className="text-xs text-slate-500 mt-1">Type the word "DELETE" (all caps) to confirm</p>
<p className="text-xs text-slate-500 dark:text-titanio mt-1">Type the word "DELETE" (all caps) to confirm</p>
</div>
{/* Action Buttons */}
@@ -73,7 +73,7 @@ export const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({ isOpen,
<button
onClick={onClose}
disabled={requestDeletionMutation.isPending}
className="flex-1 py-2.5 px-4 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors disabled:opacity-50"
className="flex-1 py-2.5 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors disabled:opacity-50"
style={{ minHeight: '44px' }}
>
Cancel

70
frontend/src/features/settings/mobile/MobileSettingsScreen.tsx
View File

@@ -25,9 +25,9 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
}) => (
<div className="flex items-center justify-between py-2">
<div>
<p className="font-medium text-slate-800">{label}</p>
<p className="font-medium text-slate-800 dark:text-avus">{label}</p>
{description && (
<p className="text-sm text-slate-500">{description}</p>
<p className="text-sm text-slate-500 dark:text-titanio">{description}</p>
)}
</div>
<button
@@ -56,14 +56,14 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg p-6 max-w-sm w-full">
<h3 className="text-lg font-semibold text-slate-800 mb-4">{title}</h3>
<div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-white dark:bg-scuro rounded-lg p-6 max-w-sm w-full">
<h3 className="text-lg font-semibold text-slate-800 dark:text-avus mb-4">{title}</h3>
{children}
<div className="flex justify-end mt-4">
<button
onClick={onClose}
className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium"
className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg font-medium"
>
Close
</button>
@@ -184,8 +184,8 @@ export const MobileSettingsScreen: React.FC = () => {
<div className="space-y-4 pb-20 p-4">
{/* Header */}
<div className="text-center mb-6">
<h1 className="text-2xl font-bold text-slate-800">Settings</h1>
<p className="text-slate-500 mt-2">Manage your account and preferences</p>
<h1 className="text-2xl font-bold text-slate-800 dark:text-avus">Settings</h1>
<p className="text-slate-500 dark:text-titanio mt-2">Manage your account and preferences</p>
</div>
{/* Pending Deletion Banner */}
@@ -195,7 +195,7 @@ export const MobileSettingsScreen: React.FC = () => {
<GlassCard padding="md">
<div>
<div className="flex justify-between items-center mb-4">
<h2 className="text-lg font-semibold text-slate-800">Profile</h2>
<h2 className="text-lg font-semibold text-slate-800 dark:text-avus">Profile</h2>
{!isEditingProfile && !profileLoading && (
<button
onClick={handleEditProfile}
@@ -214,21 +214,21 @@ export const MobileSettingsScreen: React.FC = () => {
) : isEditingProfile ? (
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
<label className="block text-sm font-medium text-slate-700 dark:text-avus mb-1">
Email
</label>
<input
type="email"
value={profile?.email || ''}
disabled
className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-100 text-slate-500"
className="w-full px-3 py-2 border border-slate-300 dark:border-silverstone rounded-lg bg-slate-100 dark:bg-gray-800 text-slate-500 dark:text-gray-400"
style={{ fontSize: '16px', minHeight: '44px' }}
/>
<p className="text-xs text-slate-500 mt-1">Email is managed by your account provider</p>
<p className="text-xs text-slate-500 dark:text-titanio mt-1">Email is managed by your account provider</p>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
<label className="block text-sm font-medium text-slate-700 dark:text-avus mb-1">
Display Name
</label>
<input
@@ -236,13 +236,13 @@ export const MobileSettingsScreen: React.FC = () => {
value={editedDisplayName}
onChange={(e) => setEditedDisplayName(e.target.value)}
placeholder="Enter your display name"
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-nero dark:border-silverstone dark:text-avus"
className="w-full px-3 py-2 border border-slate-300 dark:border-silverstone rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-nero dark:text-avus"
style={{ fontSize: '16px', minHeight: '44px' }}
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
<label className="block text-sm font-medium text-slate-700 dark:text-avus mb-1">
Notification Email
</label>
<input
@@ -250,17 +250,17 @@ export const MobileSettingsScreen: React.FC = () => {
value={editedNotificationEmail}
onChange={(e) => setEditedNotificationEmail(e.target.value)}
placeholder="Leave blank to use your primary email"
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-nero dark:border-silverstone dark:text-avus"
className="w-full px-3 py-2 border border-slate-300 dark:border-silverstone rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-nero dark:text-avus"
style={{ fontSize: '16px', minHeight: '44px' }}
/>
<p className="text-xs text-slate-500 mt-1">Optional: Use a different email for notifications</p>
<p className="text-xs text-slate-500 dark:text-titanio mt-1">Optional: Use a different email for notifications</p>
</div>
<div className="flex space-x-3 pt-2">
<button
onClick={handleCancelEdit}
disabled={updateProfileMutation.isPending}
className="flex-1 py-2.5 px-4 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors disabled:opacity-50"
className="flex-1 py-2.5 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors disabled:opacity-50"
style={{ minHeight: '44px' }}
>
Cancel
@@ -294,21 +294,21 @@ export const MobileSettingsScreen: React.FC = () => {
</div>
)}
<div className="min-w-0 flex-1">
<p className="font-medium text-slate-800 truncate">
<p className="font-medium text-slate-800 dark:text-avus truncate">
{profile?.displayName || user?.name || 'User'}
</p>
<p className="text-sm text-slate-500 truncate">{profile?.email || user?.email}</p>
<p className="text-sm text-slate-500 dark:text-titanio truncate">{profile?.email || user?.email}</p>
</div>
</div>
<div className="space-y-2 pt-3 border-t border-slate-200">
<div className="space-y-2 pt-3 border-t border-slate-200 dark:border-silverstone">
<div>
<p className="text-xs font-medium text-slate-500 uppercase">Display Name</p>
<p className="text-sm text-slate-800">{profile?.displayName || 'Not set'}</p>
<p className="text-xs font-medium text-slate-500 dark:text-canna uppercase">Display Name</p>
<p className="text-sm text-slate-800 dark:text-avus">{profile?.displayName || 'Not set'}</p>
</div>
<div>
<p className="text-xs font-medium text-slate-500 uppercase">Notification Email</p>
<p className="text-sm text-slate-800">{profile?.notificationEmail || 'Using primary email'}</p>
<p className="text-xs font-medium text-slate-500 dark:text-canna uppercase">Notification Email</p>
<p className="text-sm text-slate-800 dark:text-avus">{profile?.notificationEmail || 'Using primary email'}</p>
</div>
</div>
</div>
@@ -319,7 +319,7 @@ export const MobileSettingsScreen: React.FC = () => {
{/* Notifications Section */}
<GlassCard padding="md">
<div>
<h2 className="text-lg font-semibold text-slate-800 mb-4">Notifications</h2>
<h2 className="text-lg font-semibold text-slate-800 dark:text-avus mb-4">Notifications</h2>
<div className="space-y-3">
<ToggleSwitch
enabled={settings.notifications.email}
@@ -355,7 +355,7 @@ export const MobileSettingsScreen: React.FC = () => {
{/* Appearance & Units Section */}
<GlassCard padding="md">
<div>
<h2 className="text-lg font-semibold text-slate-800 mb-4">Appearance & Units</h2>
<h2 className="text-lg font-semibold text-slate-800 dark:text-avus mb-4">Appearance & Units</h2>
<div className="space-y-4">
<ToggleSwitch
enabled={settings.darkMode}
@@ -366,8 +366,8 @@ export const MobileSettingsScreen: React.FC = () => {
<div className="flex items-center justify-between">
<div>
<p className="font-medium text-slate-800">Unit System</p>
<p className="text-sm text-slate-500">
<p className="font-medium text-slate-800 dark:text-avus">Unit System</p>
<p className="text-sm text-slate-500 dark:text-titanio">
Currently using {settings.unitSystem === 'imperial' ? 'Miles, Gallons, MPG, USD' : 'Km, Liters, L/100km, EUR'}
</p>
</div>
@@ -385,7 +385,7 @@ export const MobileSettingsScreen: React.FC = () => {
{/* Data Management Section */}
<GlassCard padding="md">
<div>
<h2 className="text-lg font-semibold text-slate-800 mb-4">Data Management</h2>
<h2 className="text-lg font-semibold text-slate-800 dark:text-avus mb-4">Data Management</h2>
<div className="space-y-3">
<button
onClick={() => setShowDataExport(true)}
@@ -393,7 +393,7 @@ export const MobileSettingsScreen: React.FC = () => {
>
Export My Data
</button>
<p className="text-sm text-slate-500">
<p className="text-sm text-slate-500 dark:text-titanio">
Download a copy of all your vehicle and fuel data
</p>
</div>
@@ -421,7 +421,7 @@ export const MobileSettingsScreen: React.FC = () => {
{!adminLoading && isAdmin && (
<GlassCard padding="md">
<div>
<h2 className="text-lg font-semibold text-primary-500 mb-4">Admin Console</h2>
<h2 className="text-lg font-semibold text-primary-500 dark:text-primary-400 mb-4">Admin Console</h2>
<div className="space-y-3">
<button
onClick={() => navigateToScreen('AdminUsers')}
@@ -463,11 +463,11 @@ export const MobileSettingsScreen: React.FC = () => {
{/* Account Actions Section */}
<GlassCard padding="md">
<div>
<h2 className="text-lg font-semibold text-slate-800 mb-4">Account Actions</h2>
<h2 className="text-lg font-semibold text-slate-800 dark:text-avus mb-4">Account Actions</h2>
<div className="space-y-3">
<button
onClick={handleLogout}
className="w-full py-3 px-4 bg-gray-100 text-gray-700 rounded-lg text-left font-medium hover:bg-gray-200 transition-colors"
className="w-full py-3 px-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg text-left font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
>
Sign Out
</button>
@@ -487,7 +487,7 @@ export const MobileSettingsScreen: React.FC = () => {
onClose={() => setShowDataExport(false)}
title="Export Data"
>
<p className="text-slate-600 mb-4">
<p className="text-slate-600 dark:text-titanio mb-4">
This will create a downloadable file containing all your vehicle data, fuel logs, and preferences.
</p>
<div className="flex space-x-3">