chore: tidy up page header

leather-io · Feb 28, 2024 · bb5aace · bb5aace
1 parent e996078
commit bb5aace
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 23 deletions.
diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx
@@ -99,8 +99,6 @@ export function Container() {
           displayHeader ? (
             <Header
               variant={variant}
-              // on /fund/:currency goBack doesn't make sense as it re-opens popup.
-              // Need to test everywhere and add custom logic
               onGoBack={canGoBack(pathname) ? () => getOnGoBackLocation(pathname) : undefined}
               settingsMenu={
                 isKnownPopupRoute(pathname) ? null : (
@@ -122,7 +120,7 @@ export function Container() {
               logo={
                 !hideLogo(pathname) && (
                   <Box
-                    height="32px"
+                    height="headerContainerHeight"
                     margin="auto"
                     px="space.02"
                     hideBelow={variant === 'home' ? undefined : 'sm'}

diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
@@ -18,13 +18,7 @@ function Title({ title }: { title: string }) {
 
 export function BigTitle({ title }: { title: string }) {
   return (
-    <styled.h1
-      textStyle="heading.03"
-      maxWidth="bigTitleWidth"
-      height="bigTitleHeight"
-      // padding applied here to avoid specific header variant
-      padding="space.01"
-    >
+    <styled.h1 textStyle="heading.03" maxWidth="bigTitleWidth" height="bigTitleHeight">
       {title}
     </styled.h1>
   );
@@ -57,15 +51,17 @@ export function Header({
 }: HeaderProps) {
   const logoItem = onGoBack || logo || account;
   return (
-    <styled.header p="space.04" bg={{ base: 'ink.background-primary', sm: 'transparent' }}>
+    <styled.header
+      p={isString(title) ? 'space.04' : 'space.05'}
+      bg={{ base: 'ink.background-primary', sm: 'transparent' }}
+    >
       <Grid
-        alignItems="center"
         gridTemplateColumns="auto 4fr 1fr"
         width="100%"
         maxWidth={{ base: '100vw', md: 'fullPageMaxWidth' }}
         margin={{ base: 0, md: 'auto' }}
       >
-        <GridItem>
+        <GridItem justifySelf="start">
           {logoItem && (
             <Flex py={{ base: 0, md: 'space.01' }}>
               {variant !== 'home' && onGoBack ? (
@@ -79,21 +75,21 @@ export function Header({
             </Flex>
           )}
         </GridItem>
-        <GridItem margin="auto">{isString(title) ? <Title title={title} /> : title}</GridItem>
+        <GridItem>{isString(title) ? <Title title={title} /> : title}</GridItem>
         <GridItem>
           <HStack alignItems="center" justifyContent="flex-end">
             {networkBadge}
             {totalBalance}
             {variant !== 'onboarding' && settingsMenu}
-          </HStack>
 
-          {onClose && (
-            <HeaderActionButton
-              icon={<CloseIcon />}
-              isWaitingOnPerformedAction={isWaitingOnPerformedAction}
-              onAction={onClose}
-            />
-          )}
+            {onClose && (
+              <HeaderActionButton
+                icon={<CloseIcon variant="small" />}
+                isWaitingOnPerformedAction={isWaitingOnPerformedAction}
+                onAction={onClose}
+              />
+            )}
+          </HStack>
         </GridItem>
       </Grid>
     </styled.header>

diff --git a/theme/tokens.ts b/theme/tokens.ts
@@ -20,7 +20,7 @@ const tempTokens = {
     popupHeaderHeight: { value: '68px' },
     bigTitleHeight: { value: '70px' },
     bigTitleWidth: { value: '270px' },
-    logoContainerHeight: { value: '40px' },
+    headerContainerHeight: { value: '40px' },
     logoHeight: { value: '32px' },
     logoWidth: { value: '86px' },
     inputHeight: { value: '64px' },