chore: fix big-title ui problem

src/app/features/container/container.tsx

@@ -106,13 +106,18 @@ export function Container() {
 
   return (
     <>
-      {/* // #4370 SMELL without this check for isShowingSwitchAccount the wallet crashes on new install with: Wallet is neither of type `ledger` nor `software` */}
+      {/* #4370 SMELL
+       -  without this check for isShowingSwitchAccount the wallet crashes on new install
+       - Wallet is neither of type `ledger` nor `software`
+       Moved here from SwitchAccountDialog but should be improved
+       */}
       {isShowingSwitchAccount && (
         <SwitchAccountDialog
           isShowing={isShowingSwitchAccount}
           onClose={() => setIsShowingSwitchAccount(false)}
         />
       )}
+      {/* TODO #4310 Toast */}
       <Toaster position="bottom-center" toastOptions={{ style: { fontSize: '14px' } }} />
       <ContainerLayout
         header={
@@ -128,8 +133,6 @@ export function Container() {
               }
               settingsMenu={
                 // disabling settings for all popups for now pending clarification
-                // variant !== 'popup' && <Settings triggerButton={<HamburgerIcon />} />
-                // this logic was not working
                 isKnownPopup(pathname as RouteUrls) ? null : (
                   <Settings
                     triggerButton={<HamburgerIcon />}

src/app/ui/components/containers/dialog/dialog.tsx

@@ -18,7 +18,7 @@ function Title({ title }: { title: string }) {
 
 export function BigTitle({ title }: { title: string }) {
   return (
-    <styled.h1 textStyle="heading.03" maxWidth="270px">
+    <styled.h1 textStyle="heading.03" maxWidth="bigTitleWidth" height="bigTitleHeight">
       {title}
     </styled.h1>
   );
@@ -42,19 +42,7 @@ export interface DialogProps {
 // - fix styling of dialog overflow and BigTitles
 // - test  LEDGER DIALOGS
 export const Dialog = memo(
-  ({
-    children,
-    // header,
-    // maybe I need a dialog variant for onboarding
-    footer,
-    //=> this is needed to block closing of Ledger dialog + some others
-    // check useDialog
-    isWaitingOnPerformedAction,
-    // onGoBack,
-    onClose,
-    title,
-    isShowing,
-  }: DialogProps) => {
+  ({ children, footer, isWaitingOnPerformedAction, onClose, title, isShowing }: DialogProps) => {
     if (!isShowing) return null;
 
     return (
@@ -81,24 +69,13 @@ export const Dialog = memo(
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
                 width: { base: '100vw', md: '90vw' },
-                // TODO wait for answer before commiting to this app wide
-                // checked FIGMA and seems its always this size now
                 height: { base: '100vh', md: 'dialogHeight' },
                 maxWidth: { base: '100vw', md: 'pageWidth' },
                 maxHeight: { base: '100vh', md: '85vh' },
                 animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
               })}
             >
               <Box maxHeight="100vh" overflowY="hidden">
-                {/*  PETE - now dialogs are always showing a header! - not required 
-                
-                maybe I need to pass in header instead of title for those? 
-                and be able to pass in big/ small text? 
-                make them like the receive modal is now
-                maybe simpler answer here is to have a dialog variant?
-
-                could need to split between full page and extension headers also 
-                */}
                 {/* TODO check if this box is even needed now 
                 
                   Probably is needed for account selector
@@ -111,14 +88,11 @@ export const Dialog = memo(
           padding: '16px',
         })}
       > */}
-
-                {/* //so far header  only passed in my receive-modal + swap-choose 
-  and as flavour - 'big-title' - may be able to simplify but is it worth it? 
- */}
                 {/* PETE check this for onboarding as the header spacing should be space.04 and not space.05 */}
                 {/* {header ? (
                   header
                 ) : ( */}
+
                 {title && (
                   <Header
                     variant="page"

src/app/ui/components/containers/headers/header.tsx

@@ -12,7 +12,7 @@ import { HeaderActionButton } from './header-action-button';
 // - Ledger:seems to be the only thing using enableGoBack, isWaitingOnPerformedAction
 // - Send summary screens as onClose is now deprecated - action button needs to go Home
 export interface HeaderProps {
-  variant: 'home' | 'page' | 'onboarding' | 'card';
+  variant: 'page' | 'home' | 'onboarding' | 'card'; //TODO add shared types
   // got rid of enableGoBack as in ledger allowUserToGoBack is used to pass undefined /onGoBack to header
   // enableGoBack?: boolean; // seems this is needed in ledger and sendInscription. Would be good to merge it and onGoBack
   isWaitingOnPerformedAction?: boolean; // seems this is needed for ledger - change it to ledgerAction?
@@ -36,15 +36,13 @@ export function Header({
   totalBalance,
   settingsMenu,
   networkBadge,
-  title, // should make this a consistent string and also have an option for bigTitle? a different variant perhaps?
+  title,
   logo,
 }: HeaderProps) {
   return (
     <styled.header
       px={variant === 'card' ? 'space.04' : { base: 'space.04', md: 'space.07' }}
       py={variant === 'card' ? 'space.04' : { base: 'space.04', md: 'space.05' }}
-      maxHeight={{ base: 'popupHeaderHeight', md: 'headerHeight' }}
-      height={{ base: 'popupHeaderHeight', md: 'headerHeight' }}
     >
       <Flex
         width="100%"

theme/tokens.ts

@@ -18,5 +18,7 @@ export const tokens = defineTokens({
     popupWidth: { value: '390px' },
     popupHeight: { value: '756px' },
     popupHeaderHeight: { value: '68px' },
+    bigTitleHeight: { value: '70px' },
+    bigTitleWidth: { value: '270px' },
   },
 });