From 8787908087c972fbc888e8d8895d569954dd1331 Mon Sep 17 00:00:00 2001
From: mcull <marc.cull@gmail.com>
Date: Tue, 30 Jun 2026 18:46:39 -0700
Subject: [PATCH] fix(shell): clean up onboarding load layout + consolidate
 feedback CTAs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two testing-session cleanups:

1) Onboarding footer jank — the marketing footer rode up under the short
   'Preparing your profile…' loading state (and the loader relied on Tailwind
   classes that don't exist in this project, so it never filled/centered).
   - Hide the footer on /profile/create (matches the /auth/ focused-flow rule).
   - Rebuild the loading state with MUI so it centers and fills the viewport.

2) Too many feedback CTAs — there were three (left of the logo, top-right, and
   the floating button). Removed both header feedback icons (the left-of-logo
   one was especially confusing); feedback now lives only in the single
   floating button (bottom-right).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../profile/create/ProfileCreationHandler.tsx | 22 +++++++++----
 src/components/ConditionalFooter.tsx          |  5 +--
 src/components/GlobalHeader.tsx               | 32 ++-----------------
 3 files changed, 21 insertions(+), 38 deletions(-)

diff --git a/src/app/profile/create/ProfileCreationHandler.tsx b/src/app/profile/create/ProfileCreationHandler.tsx
index 10af5159..1aa3a988 100644
--- a/src/app/profile/create/ProfileCreationHandler.tsx
+++ b/src/app/profile/create/ProfileCreationHandler.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Box, CircularProgress, Typography } from '@mui/material';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
@@ -203,12 +204,21 @@ export function ProfileCreationHandler({
   return (
     <>
       {loadingUser ? (
-        <div className="min-h-screen flex items-center justify-center">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mx-auto mb-4"></div>
-            <p className="text-gray-600">Preparing your profile…</p>
-          </div>
-        </div>
+        <Box
+          sx={{
+            minHeight: '100dvh',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 2,
+          }}
+        >
+          <CircularProgress />
+          <Typography sx={{ color: 'text.secondary' }}>
+            Preparing your profile…
+          </Typography>
+        </Box>
       ) : (
         <ProfileWizard
           onComplete={handleProfileComplete}
diff --git a/src/components/ConditionalFooter.tsx b/src/components/ConditionalFooter.tsx
index c37e711b..13222033 100644
--- a/src/components/ConditionalFooter.tsx
+++ b/src/components/ConditionalFooter.tsx
@@ -9,10 +9,11 @@ export function ConditionalFooter() {
   const pathname = usePathname();
   const { data: session } = useSession();
 
-  // Don't show footer on auth pages
+  // Don't show the marketing footer on focused flows (auth + onboarding).
   const isAuthPage = pathname.startsWith('/auth/');
+  const isProfileCreation = pathname.startsWith('/profile/create');
 
-  if (isAuthPage) {
+  if (isAuthPage || isProfileCreation) {
     return null;
   }
 
diff --git a/src/components/GlobalHeader.tsx b/src/components/GlobalHeader.tsx
index 0257de72..6cc8f71b 100644
--- a/src/components/GlobalHeader.tsx
+++ b/src/components/GlobalHeader.tsx
@@ -3,7 +3,6 @@
 import {
   ArrowBack as ArrowBackIcon,
   AddAPhotoTwoTone as AddIcon,
-  FeedbackOutlined as FeedbackOutlinedIcon,
 } from '@mui/icons-material';
 import {
   AppBar,
@@ -93,20 +92,6 @@ export function GlobalHeader({
               flex: '0 0 auto',
             }}
           >
-            {/* Feedback - Desktop Only */}
-            <IconButton
-              component={Link}
-              href="/feedback"
-              sx={{
-                color: brandColors.charcoal,
-                display: { xs: 'none', md: 'flex' },
-                '&:hover': { backgroundColor: 'rgba(30, 58, 95, 0.08)' },
-              }}
-              aria-label="Feedback"
-            >
-              <FeedbackOutlinedIcon />
-            </IconButton>
-
             {showBackButton && (
               <IconButton
                 onClick={handleBackClick}
@@ -161,7 +146,8 @@ export function GlobalHeader({
             )}
           </Box>
 
-          {/* Right Section - Feedback, Add Button, Notifications & User Avatar */}
+          {/* Right Section - Add Button, Notifications & User Avatar.
+              Feedback lives in the single floating button (bottom-right). */}
           <Box
             sx={{
               display: 'flex',
@@ -170,20 +156,6 @@ export function GlobalHeader({
               flex: '0 0 auto',
             }}
           >
-            {/* Feedback - Desktop Only */}
-            <IconButton
-              component={Link}
-              href="/feedback"
-              sx={{
-                color: brandColors.charcoal,
-                display: { xs: 'none', md: 'flex' },
-                '&:hover': { backgroundColor: 'rgba(30, 58, 95, 0.08)' },
-              }}
-              aria-label="Feedback"
-            >
-              <FeedbackOutlinedIcon />
-            </IconButton>
-
             {/* Add Stuff Button - Desktop Only */}
             <IconButton
               component={Link}