UI redesign staging (#6149)

Co-authored-by: Reece Browne <[email protected]>
Co-authored-by: James Brunton <[email protected]>

frontend/src/saas/components/auth/GuestUserBanner.tsx

@@ -16,7 +16,7 @@ let hasShownThisLoad = false;
 
 /**
  * Guest user toast encouraging account creation.
- * Appears 2s after load, top-right of the viewport, offset by right rail.
+ * Appears 2s after load, top-right of the viewport.
  */
 export function GuestUserBanner({ className = "" }: GuestUserBannerProps) {
   const { t } = useTranslation();

frontend/src/saas/components/shared/InfoBanner.tsx

@@ -51,6 +51,7 @@ interface InfoBannerProps {
   buttonTextColor?: string; // SaaS-specific for dark theme buttons
   minHeight?: number | string;
   closeIconColor?: string; // SaaS-specific for dark theme
+  compact?: boolean;
 }
 
 /**
@@ -78,6 +79,7 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
   buttonTextColor,
   minHeight = 56,
   closeIconColor,
+  compact = false,
 }) => {
   if (!show) {
     return null;
@@ -90,7 +92,7 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
 
   return (
     <Paper
-      p="sm"
+      p={compact ? "xs" : "sm"}
       radius={0}
       style={{
         background: background ?? toneStyle.background,

frontend/src/saas/components/shared/config/types.ts

@@ -30,6 +30,7 @@ export const VALID_NAV_KEYS = [
   "adminAudit",
   "adminUsage",
   "adminEndpoints",
+  "help",
 ] as const;
 
 // Extend NavKey to include saas-specific keys
@@ -62,6 +63,7 @@ export type NavKey =
   | "adminPlan"
   | "adminAudit"
   | "adminUsage"
-  | "adminEndpoints";
+  | "adminEndpoints"
+  | "help";
 
 // some of these are not used yet, but appear in figma designs