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

fix: UX Issues fixed

Browse Source
This commit is contained in:
Eric Gullickson
2025-12-26 21:00:53 -06:00
parent 780949cd62
commit 0d9edbe761
7 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Layout.tsx
View File

@@ -52,7 +52,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
// Mobile layout
if (mobileMode) {
return (
<div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
<div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper">
<Container
maxWidth={false}
sx={{
@@ -95,7 +95,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
// Desktop layout
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper">
{/* Sidebar */}
<Paper
elevation={2}

2
frontend/src/features/auth/pages/CallbackPage.tsx
View File

@@ -48,7 +48,7 @@ export const CallbackPage: React.FC = () => {
}, [userStatus, isLoading, error, navigate, returnTo]);
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-center justify-center p-4">
<div className="text-center">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-100 mb-4">
<svg

4
frontend/src/features/auth/pages/VerifyEmailPage.tsx
View File

@@ -64,7 +64,7 @@ export const VerifyEmailPage: React.FC = () => {
// Show loading state when auto-login is in progress
if (isAutoLoginTriggered || (verificationSuccessful && !isAuthLoading)) {
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-center justify-center p-4">
<div className="text-center">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
<svg
@@ -112,7 +112,7 @@ export const VerifyEmailPage: React.FC = () => {
}
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="bg-white rounded-lg shadow-lg p-8">
<div className="text-center mb-8">

2
frontend/src/features/onboarding/pages/OnboardingPage.tsx
View File

@@ -68,7 +68,7 @@ export const OnboardingPage: React.FC = () => {
};
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 flex items-center justify-center p-4">
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-center justify-center p-4">
<div className="w-full max-w-2xl">
{/* Progress Indicator */}
<div className="mb-8">

2
frontend/src/shared-minimal/components/mobile/MobileContainer.tsx
View File

@@ -14,7 +14,7 @@ export const MobileContainer: React.FC<MobileContainerProps> = ({
className = ''
}) => {
return (
<div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-start justify-center p-4 md:py-6">
<div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-start justify-center p-4 md:py-6">
<div className={`w-full max-w-[380px] min-h-screen md:min-h-[600px] md:rounded-[32px] shadow-2xl flex flex-col border-0 md:border border-slate-200/70 bg-white/90 md:bg-white/70 backdrop-blur-xl ${className}`}>
{children}
</div>

1
frontend/src/shared-minimal/theme/md3Theme.ts
View File

@@ -192,7 +192,6 @@ export const md3DarkTheme = createTheme({
root: {
borderRadius: 20,
boxShadow: '0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.3)',
backgroundColor: 'rgba(255,255,255,0.05)',
border: '1px solid rgba(255,255,255,0.1)',
},
},

1
frontend/tailwind.config.js
View File

@@ -25,6 +25,7 @@ export default {
850: '#18202f',
},
// Dark theme tokens (Ferrari-inspired palette)
paper: '#1D1A18', // MUI background.paper - DARKEST brownish-black
nero: '#231F1C', // Nero Daytona - page base
avus: '#F2F3F6', // Bianco Avus - primary text on dark
titanio: '#A8B8C0', // Grigio Titanio - secondary text on dark