From 0d9edbe76195ab4e5ff40cc5aed59f4eea86d575 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Fri, 26 Dec 2025 21:00:53 -0600
Subject: [PATCH] fix: UX Issues fixed

---
 frontend/src/components/Layout.tsx                            | 4 ++--
 frontend/src/features/auth/pages/CallbackPage.tsx             | 2 +-
 frontend/src/features/auth/pages/VerifyEmailPage.tsx          | 4 ++--
 frontend/src/features/onboarding/pages/OnboardingPage.tsx     | 2 +-
 .../src/shared-minimal/components/mobile/MobileContainer.tsx  | 2 +-
 frontend/src/shared-minimal/theme/md3Theme.ts                 | 1 -
 frontend/tailwind.config.js                                   | 1 +
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 629bc26..440bc51 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -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}
diff --git a/frontend/src/features/auth/pages/CallbackPage.tsx b/frontend/src/features/auth/pages/CallbackPage.tsx
index 5941390..845c31c 100644
--- a/frontend/src/features/auth/pages/CallbackPage.tsx
+++ b/frontend/src/features/auth/pages/CallbackPage.tsx
@@ -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
diff --git a/frontend/src/features/auth/pages/VerifyEmailPage.tsx b/frontend/src/features/auth/pages/VerifyEmailPage.tsx
index 20b8536..a24b751 100644
--- a/frontend/src/features/auth/pages/VerifyEmailPage.tsx
+++ b/frontend/src/features/auth/pages/VerifyEmailPage.tsx
@@ -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">
diff --git a/frontend/src/features/onboarding/pages/OnboardingPage.tsx b/frontend/src/features/onboarding/pages/OnboardingPage.tsx
index 4204fe7..b8852f9 100644
--- a/frontend/src/features/onboarding/pages/OnboardingPage.tsx
+++ b/frontend/src/features/onboarding/pages/OnboardingPage.tsx
@@ -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">
diff --git a/frontend/src/shared-minimal/components/mobile/MobileContainer.tsx b/frontend/src/shared-minimal/components/mobile/MobileContainer.tsx
index 2628cd0..34d37b6 100644
--- a/frontend/src/shared-minimal/components/mobile/MobileContainer.tsx
+++ b/frontend/src/shared-minimal/components/mobile/MobileContainer.tsx
@@ -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>
diff --git a/frontend/src/shared-minimal/theme/md3Theme.ts b/frontend/src/shared-minimal/theme/md3Theme.ts
index 0499288..6a549b0 100644
--- a/frontend/src/shared-minimal/theme/md3Theme.ts
+++ b/frontend/src/shared-minimal/theme/md3Theme.ts
@@ -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)',
         },
       },
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7501dd5..91ba660 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -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