From 1669b65be0c85fed16554bc0a777ccdefe7538ef Mon Sep 17 00:00:00 2001
From: Adrien Castagliola <a.castagliola@smartway.ai>
Date: Tue, 5 Mar 2024 17:35:40 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20TopAppBar=20-=20fix=20cosmetic?=
 =?UTF-8?q?=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TopAppBar/TopAppBar.stories.tsx           |  4 +--
 src/components/topAppBar/TopAppBar.tsx        | 32 +++++++++++++++----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/Storybook/components/TopAppBar/TopAppBar.stories.tsx b/Storybook/components/TopAppBar/TopAppBar.stories.tsx
index 1772e822..36e24ae9 100644
--- a/Storybook/components/TopAppBar/TopAppBar.stories.tsx
+++ b/Storybook/components/TopAppBar/TopAppBar.stories.tsx
@@ -5,9 +5,9 @@ import { StyleSheet, View } from 'react-native';
 import { TopAppBar, Title } from '../../../src/components/topAppBar/TopAppBar';
 import { Headline } from '../../../src/components/typography/Headline';
 
-const asString = { value: 'menu' };
+const asString = { value: 'Menu' };
 const asButton = {
-    value: 'menu',
+    value: 'Menu',
     onPress: () => {},
 };
 const asComponent = { value: <Headline size='h1'>Headline H1</Headline> };
diff --git a/src/components/topAppBar/TopAppBar.tsx b/src/components/topAppBar/TopAppBar.tsx
index 99d78b02..828c0b7f 100644
--- a/src/components/topAppBar/TopAppBar.tsx
+++ b/src/components/topAppBar/TopAppBar.tsx
@@ -6,8 +6,8 @@ import { Headline } from '../typography/Headline';
 import DeviceInfo from 'react-native-device-info';
 import type { WithTestID } from 'src/shared/type';
 import TopAppBarAction from './TopAppBarAction';
-import {TopAppBarMenu} from "./Menu/TopAppBarMenu";
-import TopAppBarMenuItem from "./Menu/TopAppBarMenuItem";
+import { TopAppBarMenu } from './Menu/TopAppBarMenu';
+import TopAppBarMenuItem from './Menu/TopAppBarMenuItem';
 
 export interface Title {
     value: ReactNode;
@@ -22,6 +22,7 @@ export type TopAppBarProps = WithTestID<{
     action?: ReactNode;
 }>;
 
+const isTablet = DeviceInfo.isTablet();
 // eslint-disable-next-line react/function-component-definition
 export function TopAppBar({
     size = 'small',
@@ -35,6 +36,12 @@ export function TopAppBar({
 
     const styles = useStyles(size, style);
 
+    const headlineSize = isTablet
+        ? 'h1'
+        : isTitleBelowTopAppBar(size)
+        ? 'h3'
+        : 'h1';
+
     return (
         <Appbar.Header
             mode={size}
@@ -52,13 +59,15 @@ export function TopAppBar({
             <Appbar.Content
                 title={
                     typeof title.value === 'string' ? (
-                        <Headline size='h2'>{title.value}</Headline>
+                        <Headline size={headlineSize} style={styles.title}>
+                            {title.value}
+                        </Headline>
                     ) : (
                         title.value
                     )
                 }
                 onPress={title.onPress}
-                style={styles.title}
+                style={styles.content}
             />
             {action}
         </Appbar.Header>
@@ -73,22 +82,31 @@ function useStyles(
     style: TopAppBarProps['style'],
 ) {
     const theme = useTheme();
-    const isTablet = DeviceInfo.isTablet();
+
     return StyleSheet.create({
         button: {
             backgroundColor: 'rgba(145, 158, 171, 0.24)',
             borderRadius: 18,
             marginLeft: isTablet ? 12 : theme.sw.spacing.xs,
         },
-        title: {
-            paddingTop: size === 'medium' ? 9 : 0,
+        content: {
+            paddingTop: isTitleBelowTopAppBar(size) ? 9 : 0,
             paddingBottom: 0,
             justifyContent: 'flex-start',
         },
+        title: {
+            lineHeight: isTitleBelowTopAppBar(size) ? undefined : 32,
+        },
         header: {
             paddingHorizontal: 12,
             paddingBottom: 0,
+            marginBottom: theme.sw.spacing.l,
+            backgroundColor: theme.sw.colors.neutral['50'],
             ...style,
         },
     });
 }
+
+function isTitleBelowTopAppBar(size: TopAppBarProps['size']) {
+    return (['medium', 'large'] as (typeof size)[]).includes(size);
+}