From 6f3fc56e4c110e09b9cf9afcfa9894cea485eb92 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 28 Nov 2023 18:37:52 +0100
Subject: [PATCH 01/42] Change size of Expensify logo

---
 src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js | 2 +-
 src/styles/variables.ts                             | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
index 2dad59fc01b7..1ead858921cc 100644
--- a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
+++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
@@ -35,7 +35,7 @@ function ImTeacherUpdateEmailPage() {
                 linkKey="teachersUnitePage.contactMethods"
                 onLinkPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(activeRoute))}
                 iconWidth={variables.signInLogoWidthLargeScreen}
-                iconHeight={variables.lhnLogoWidth}
+                iconHeight={variables.signInLogoHeightSmallScreen}
             />
             <FixedFooter style={[styles.flexGrow0]}>
                 <Button
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 18800f5748d9..d9ef7ef98927 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -140,8 +140,8 @@ export default {
     signInLogoWidthPill: 132,
     tabSelectorButtonHeight: 40,
     tabSelectorButtonPadding: 12,
-    lhnLogoWidth: 108,
-    lhnLogoHeight: 28,
+    lhnLogoWidth: 95,
+    lhnLogoHeight: 24,
     signInLogoWidthLargeScreenPill: 162,
     modalContentMaxWidth: 360,
     listItemHeightNormal: 64,

From ced4c371886dc58017c1b009994679aa91142f64 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 28 Nov 2023 18:38:40 +0100
Subject: [PATCH 02/42] Breadcrumbs WIP

---
 src/components/Breadcrumbs.tsx         | 62 ++++++++++++++++++++++++++
 src/components/EnvironmentBadge.tsx    |  2 +-
 src/pages/home/sidebar/SidebarLinks.js | 26 +++++++++++
 src/styles/styles.ts                   | 17 ++++++-
 4 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Breadcrumbs.tsx

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
new file mode 100644
index 000000000000..b864cb8c4c97
--- /dev/null
+++ b/src/components/Breadcrumbs.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { View } from 'react-native';
+import useThemeStyles from '@styles/useThemeStyles';
+import LogoComponent from '@assets/images/expensify-wordmark.svg';
+import useTheme from '@styles/themes/useTheme';
+import variables from '@styles/variables';
+import Text from './Text';
+import Header from './Header';
+
+type BreadcrumbRoot = {
+    type: 'expensify';
+}
+
+type Breadcrumb = {
+    text: string;
+    type?: 'strong' | 'normal';
+}
+
+type BreadcrumbsProps = {
+    breadcrumbs: Array<BreadcrumbRoot | Breadcrumb>;
+};
+
+function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexRow, styles.flexWrap, styles.alignSelfStart, styles.gap2]}>
+            {breadcrumbs.map((breadcrumb, index) => (
+                <>
+                    {breadcrumb.type === 'expensify' ? (
+                        <View style={{ width: variables.lhnLogoWidth }}>
+                            <Header
+                                title={
+                                    <LogoComponent
+                                        fill={theme.text}
+                                        width={variables.lhnLogoWidth}
+                                        height={variables.lhnLogoHeight}
+                                    />
+                                }
+                                shouldShowEnvironmentBadge
+                            />
+                        </View>
+                    ) : (
+                        <>
+                            {index !== 0 && (
+                                <Text style={styles.breadcrumb}>/</Text>
+                            )}
+                            <Text style={styles.breadcrumb}>
+                                {breadcrumb.text}
+                            </Text>
+                        </>
+                    )}
+                </>
+            ))}
+        </View>
+    );
+}
+
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+export default Breadcrumbs;
diff --git a/src/components/EnvironmentBadge.tsx b/src/components/EnvironmentBadge.tsx
index a3f321072988..969b683ec693 100644
--- a/src/components/EnvironmentBadge.tsx
+++ b/src/components/EnvironmentBadge.tsx
@@ -29,7 +29,7 @@ function EnvironmentBadge() {
             success={environment === CONST.ENVIRONMENT.STAGING || environment === CONST.ENVIRONMENT.ADHOC}
             error={environment !== CONST.ENVIRONMENT.STAGING && environment !== CONST.ENVIRONMENT.ADHOC}
             text={text}
-            badgeStyles={[styles.alignSelfEnd, styles.headerEnvBadge]}
+            badgeStyles={[styles.alignSelfStart, styles.headerEnvBadge]}
             textStyles={[styles.headerEnvBadgeText]}
             environment={environment}
         />
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 2aba742f157f..6f7f76fcf5a4 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -28,6 +28,7 @@ import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import Breadcrumbs from '@components/Breadcrumbs';
 import SignInOrAvatarWithOptionalStatus from './SignInOrAvatarWithOptionalStatus';
 
 const basePropTypes = {
@@ -177,6 +178,31 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                 </Tooltip>
                 <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={isCreateMenuOpen} />
             </View>
+            <View style={[styles.mh5, styles.mb3]}>
+                <Breadcrumbs
+                    breadcrumbs={[
+                        {
+                            type: 'expensify',
+                        },
+                        {
+                            text: 'Cathy`s Croissants',
+                            type: 'strong',
+                        },
+                        {
+                            text: 'Settings',
+                        },
+                        {
+                            text: 'Settings',
+                        },
+                        {
+                            text: 'Settings',
+                        },
+                        {
+                            text: 'Settings',
+                        },
+                    ]}
+                />
+            </View>
             <View style={[styles.pRelative, styles.flex1]}>
                 <LHNOptionsList
                     style={styles.flex1}
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index c1b78a224eb3..595117d2db4d 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1375,6 +1375,17 @@ const styles = (theme: ThemeColors) =>
             textDecorationLine: 'none',
         },
 
+        breadcrumb: {
+            color: colors.darkSupportingText,
+            fontSize: variables.fontSizeh1,
+            lineHeight: variables.lineHeightSizeh1,
+            ...headlineFont,
+        },
+
+        breadcrumbStrong: {
+            // TODO
+        },
+
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>
             ({
                 width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
@@ -3508,12 +3519,14 @@ const styles = (theme: ThemeColors) =>
         },
 
         headerEnvBadge: {
-            marginLeft: 0,
-            marginBottom: 2,
+            marginLeft: -8,
+            marginTop: -8,
             height: 12,
+            width: 22,
             paddingLeft: 4,
             paddingRight: 4,
             alignItems: 'center',
+            zIndex: -1,
         },
 
         headerEnvBadgeText: {

From 0bfd97edec9f23c07408dc0483baf424e0db67b4 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 29 Nov 2023 13:26:46 +0100
Subject: [PATCH 03/42] Breadcrumb types

---
 src/CONST.ts                           |  6 +++++
 src/components/Breadcrumbs.tsx         | 31 ++++++++++++--------------
 src/pages/home/sidebar/SidebarLinks.js |  6 ++---
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 9b284752d074..8d53af910b47 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -74,6 +74,12 @@ const CONST = {
     AVATAR_MAX_WIDTH_PX: 4096,
     AVATAR_MAX_HEIGHT_PX: 4096,
 
+    BREADCRUMB_TYPE: {
+        ROOT: 'root_workspace',
+        STRONG: 'strong',
+        NORMAL: 'normal',
+    },
+
     DEFAULT_AVATAR_COUNT: 24,
     OLD_DEFAULT_AVATAR_COUNT: 8,
 
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index b864cb8c4c97..15105d8d86b1 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,23 +1,24 @@
 import React from 'react';
-import { View } from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import {View} from 'react-native';
 import LogoComponent from '@assets/images/expensify-wordmark.svg';
 import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
-import Text from './Text';
+import CONST from '@src/CONST';
 import Header from './Header';
+import Text from './Text';
 
-type BreadcrumbRoot = {
-    type: 'expensify';
-}
+type BreadcrumbRootWorkspace = {
+    type: typeof CONST.BREADCRUMB_TYPE.ROOT;
+};
 
 type Breadcrumb = {
     text: string;
-    type?: 'strong' | 'normal';
-}
+    type?: typeof CONST.BREADCRUMB_TYPE.STRONG | typeof CONST.BREADCRUMB_TYPE.NORMAL;
+};
 
 type BreadcrumbsProps = {
-    breadcrumbs: Array<BreadcrumbRoot | Breadcrumb>;
+    breadcrumbs: Array<BreadcrumbRootWorkspace | Breadcrumb>;
 };
 
 function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
@@ -28,8 +29,8 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
         <View style={[styles.flexRow, styles.flexWrap, styles.alignSelfStart, styles.gap2]}>
             {breadcrumbs.map((breadcrumb, index) => (
                 <>
-                    {breadcrumb.type === 'expensify' ? (
-                        <View style={{ width: variables.lhnLogoWidth }}>
+                    {breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
+                        <View style={{width: variables.lhnLogoWidth}}>
                             <Header
                                 title={
                                     <LogoComponent
@@ -43,12 +44,8 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                         </View>
                     ) : (
                         <>
-                            {index !== 0 && (
-                                <Text style={styles.breadcrumb}>/</Text>
-                            )}
-                            <Text style={styles.breadcrumb}>
-                                {breadcrumb.text}
-                            </Text>
+                            {index !== 0 && <Text style={styles.breadcrumb}>/</Text>}
+                            <Text style={styles.breadcrumb}>{breadcrumb.text}</Text>
                         </>
                     )}
                 </>
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 6f7f76fcf5a4..47317ebf6c6d 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -4,6 +4,7 @@ import React, {useCallback, useEffect, useRef} from 'react';
 import {InteractionManager, StyleSheet, View} from 'react-native';
 import _ from 'underscore';
 import LogoComponent from '@assets/images/expensify-wordmark.svg';
+import Breadcrumbs from '@components/Breadcrumbs';
 import Header from '@components/Header';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -28,7 +29,6 @@ import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import Breadcrumbs from '@components/Breadcrumbs';
 import SignInOrAvatarWithOptionalStatus from './SignInOrAvatarWithOptionalStatus';
 
 const basePropTypes = {
@@ -182,11 +182,11 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                 <Breadcrumbs
                     breadcrumbs={[
                         {
-                            type: 'expensify',
+                            type: CONST.BREADCRUMB_TYPE.ROOT,
                         },
                         {
                             text: 'Cathy`s Croissants',
-                            type: 'strong',
+                            type: CONST.BREADCRUMB_TYPE.STRONG,
                         },
                         {
                             text: 'Settings',

From 6c66b08492d20849858c2d22c08514b9b27970cf Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 29 Nov 2023 14:22:07 +0100
Subject: [PATCH 04/42] Pixel perfect alignments

---
 src/components/Breadcrumbs.tsx         | 54 ++++++++++++++------------
 src/pages/home/sidebar/SidebarLinks.js | 18 ++++-----
 src/styles/styles.ts                   | 17 +++++++-
 src/styles/variables.ts                |  2 +-
 4 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 15105d8d86b1..45ba08cb3d93 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -26,30 +26,36 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
     const styles = useThemeStyles();
 
     return (
-        <View style={[styles.flexRow, styles.flexWrap, styles.alignSelfStart, styles.gap2]}>
-            {breadcrumbs.map((breadcrumb, index) => (
-                <>
-                    {breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
-                        <View style={{width: variables.lhnLogoWidth}}>
-                            <Header
-                                title={
-                                    <LogoComponent
-                                        fill={theme.text}
-                                        width={variables.lhnLogoWidth}
-                                        height={variables.lhnLogoHeight}
-                                    />
-                                }
-                                shouldShowEnvironmentBadge
-                            />
-                        </View>
-                    ) : (
-                        <>
-                            {index !== 0 && <Text style={styles.breadcrumb}>/</Text>}
-                            <Text style={styles.breadcrumb}>{breadcrumb.text}</Text>
-                        </>
-                    )}
-                </>
-            ))}
+        <View style={[styles.flexRow, styles.flexWrap, styles.alignItemsCenter, styles.gap1]}>
+            {breadcrumbs.map((breadcrumb, index) => {
+                const style = [styles.breadcrumb, breadcrumb.type === CONST.BREADCRUMB_TYPE.STRONG && styles.breadcrumbStrong];
+                const separatorStyle = [style, styles.breadcrumbSeparator];
+
+                return (
+                    <>
+                        {breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
+                            <View>
+                                <Header
+                                    title={
+                                        <LogoComponent
+                                            fill={theme.text}
+                                            width={variables.lhnLogoWidth}
+                                            height={variables.lhnLogoHeight}
+                                            style={styles.breadcrumbLogo}
+                                        />
+                                    }
+                                    shouldShowEnvironmentBadge
+                                />
+                            </View>
+                        ) : (
+                            <>
+                                {index !== 0 && <Text style={separatorStyle}>/</Text>}
+                                <Text style={style}>{breadcrumb.text}</Text>
+                            </>
+                        )}
+                    </>
+                );
+            })}
         </View>
     );
 }
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 47317ebf6c6d..ef3e3a8a9dfb 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -185,17 +185,17 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                             type: CONST.BREADCRUMB_TYPE.ROOT,
                         },
                         {
-                            text: 'Cathy`s Croissants',
-                            type: CONST.BREADCRUMB_TYPE.STRONG,
-                        },
-                        {
-                            text: 'Settings',
-                        },
-                        {
-                            text: 'Settings',
+                            text: 'Chats',
                         },
+                    ]}
+                />
+            </View>
+            <View style={[styles.mh5, styles.mb3]}>
+                <Breadcrumbs
+                    breadcrumbs={[
                         {
-                            text: 'Settings',
+                            text: 'Cathy`s Croissants',
+                            type: CONST.BREADCRUMB_TYPE.STRONG,
                         },
                         {
                             text: 'Settings',
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 595117d2db4d..75d305f1b3b6 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1378,12 +1378,25 @@ const styles = (theme: ThemeColors) =>
         breadcrumb: {
             color: colors.darkSupportingText,
             fontSize: variables.fontSizeh1,
-            lineHeight: variables.lineHeightSizeh1,
+            lineHeight: variables.lineHeightXXLarge,
+            verticalAlign: 'baseline',
             ...headlineFont,
         },
 
         breadcrumbStrong: {
-            // TODO
+            color: colors.darkPrimaryText,
+            fontSize: variables.fontSizeXLarge,
+        },
+
+        breadcrumbSeparator: {
+            fontSize: variables.fontSizeXLarge,
+            lineHeight: variables.fontSizeXLarge,
+        },
+
+        breadcrumbLogo: {
+            width: variables.lhnLogoWidth,
+            height: variables.fontSizeXLarge,
+            paddingTop: 1.67,
         },
 
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index d9ef7ef98927..e5098ca975d5 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -141,7 +141,7 @@ export default {
     tabSelectorButtonHeight: 40,
     tabSelectorButtonPadding: 12,
     lhnLogoWidth: 95,
-    lhnLogoHeight: 24,
+    lhnLogoHeight: 22.33,
     signInLogoWidthLargeScreenPill: 162,
     modalContentMaxWidth: 360,
     listItemHeightNormal: 64,

From ce3c4ea0162441d1fd599fdd32bb7e823bb4daf9 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 29 Nov 2023 15:22:55 +0100
Subject: [PATCH 05/42] Align text on mobile devices

---
 src/components/Breadcrumbs.tsx | 2 +-
 src/styles/styles.ts           | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 45ba08cb3d93..7d3a911d1d63 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -44,7 +44,7 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                                             style={styles.breadcrumbLogo}
                                         />
                                     }
-                                    shouldShowEnvironmentBadge
+                                    // shouldShowEnvironmentBadge
                                 />
                             </View>
                         ) : (
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 75d305f1b3b6..5165ec20e1c2 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1378,8 +1378,6 @@ const styles = (theme: ThemeColors) =>
         breadcrumb: {
             color: colors.darkSupportingText,
             fontSize: variables.fontSizeh1,
-            lineHeight: variables.lineHeightXXLarge,
-            verticalAlign: 'baseline',
             ...headlineFont,
         },
 
@@ -1390,13 +1388,10 @@ const styles = (theme: ThemeColors) =>
 
         breadcrumbSeparator: {
             fontSize: variables.fontSizeXLarge,
-            lineHeight: variables.fontSizeXLarge,
         },
 
         breadcrumbLogo: {
-            width: variables.lhnLogoWidth,
-            height: variables.fontSizeXLarge,
-            paddingTop: 1.67,
+            marginTop: 3.5,
         },
 
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>

From 520959763d2130cdd1643b27eb77932e807286ad Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 29 Nov 2023 15:31:23 +0100
Subject: [PATCH 06/42] Handle DEV badge nicely

---
 src/components/Breadcrumbs.tsx | 2 +-
 src/styles/styles.ts           | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 7d3a911d1d63..45ba08cb3d93 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -44,7 +44,7 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                                             style={styles.breadcrumbLogo}
                                         />
                                     }
-                                    // shouldShowEnvironmentBadge
+                                    shouldShowEnvironmentBadge
                                 />
                             </View>
                         ) : (
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 5165ec20e1c2..9fe589028e97 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -3527,8 +3527,9 @@ const styles = (theme: ThemeColors) =>
         },
 
         headerEnvBadge: {
-            marginLeft: -8,
-            marginTop: -8,
+            position: 'absolute',
+            bottom: -8,
+            left: -8,
             height: 12,
             width: 22,
             paddingLeft: 4,

From fbd4789262865df1824eaf39bb679c0191660c32 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 29 Nov 2023 20:09:14 +0100
Subject: [PATCH 07/42] Add unique keys for each breadcrumb

---
 src/components/Breadcrumbs.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 45ba08cb3d93..bfa864976500 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -28,13 +28,14 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
     return (
         <View style={[styles.flexRow, styles.flexWrap, styles.alignItemsCenter, styles.gap1]}>
             {breadcrumbs.map((breadcrumb, index) => {
+                const key = `${breadcrumb.type}${breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? '' : breadcrumb.text}`;
                 const style = [styles.breadcrumb, breadcrumb.type === CONST.BREADCRUMB_TYPE.STRONG && styles.breadcrumbStrong];
                 const separatorStyle = [style, styles.breadcrumbSeparator];
 
                 return (
                     <>
                         {breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
-                            <View>
+                            <View key={key}>
                                 <Header
                                     title={
                                         <LogoComponent
@@ -49,8 +50,20 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                             </View>
                         ) : (
                             <>
-                                {index !== 0 && <Text style={separatorStyle}>/</Text>}
-                                <Text style={style}>{breadcrumb.text}</Text>
+                                {index !== 0 && (
+                                    <Text
+                                        key={key}
+                                        style={separatorStyle}
+                                    >
+                                        /
+                                    </Text>
+                                )}
+                                <Text
+                                    key={key}
+                                    style={style}
+                                >
+                                    {breadcrumb.text}
+                                </Text>
                             </>
                         )}
                     </>

From 1218a42dec9215511e5534d64ff858329c655e21 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 29 Nov 2023 20:41:44 +0100
Subject: [PATCH 08/42] Align text on mobile

---
 src/styles/styles.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 9fe589028e97..1a04fc1ce33b 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1378,20 +1378,23 @@ const styles = (theme: ThemeColors) =>
         breadcrumb: {
             color: colors.darkSupportingText,
             fontSize: variables.fontSizeh1,
+            marginTop: (variables.fontSizeXLarge - variables.fontSizeh1) / 2,
             ...headlineFont,
         },
 
         breadcrumbStrong: {
+            marginTop: 0,
             color: colors.darkPrimaryText,
             fontSize: variables.fontSizeXLarge,
         },
 
         breadcrumbSeparator: {
+            marginTop: 0,
             fontSize: variables.fontSizeXLarge,
         },
 
         breadcrumbLogo: {
-            marginTop: 3.5,
+            marginTop: 3,
         },
 
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>

From a8a2e380b2eff0290e032c07f46214cac1aa0752 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 29 Nov 2023 21:25:00 +0100
Subject: [PATCH 09/42] Unique key

---
 src/components/Breadcrumbs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index bfa864976500..3707a92fb0d8 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -28,7 +28,7 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
     return (
         <View style={[styles.flexRow, styles.flexWrap, styles.alignItemsCenter, styles.gap1]}>
             {breadcrumbs.map((breadcrumb, index) => {
-                const key = `${breadcrumb.type}${breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? '' : breadcrumb.text}`;
+                const key = `${breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? CONST.BREADCRUMB_TYPE.ROOT : breadcrumb.text}${index}`;
                 const style = [styles.breadcrumb, breadcrumb.type === CONST.BREADCRUMB_TYPE.STRONG && styles.breadcrumbStrong];
                 const separatorStyle = [style, styles.breadcrumbSeparator];
 
@@ -52,7 +52,7 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                             <>
                                 {index !== 0 && (
                                     <Text
-                                        key={key}
+                                        key={`${key}-separator`}
                                         style={separatorStyle}
                                     >
                                         /

From 857c104b1b5ce1b13483a6ceffc48286100feecb Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 29 Nov 2023 21:42:58 +0100
Subject: [PATCH 10/42] Fix missing key

---
 src/components/Breadcrumbs.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 3707a92fb0d8..be47ce6e5c39 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import {View} from 'react-native';
 import LogoComponent from '@assets/images/expensify-wordmark.svg';
 import useTheme from '@styles/themes/useTheme';
@@ -33,7 +33,7 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                 const separatorStyle = [style, styles.breadcrumbSeparator];
 
                 return (
-                    <>
+                    <Fragment key={key}>
                         {breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
                             <View key={key}>
                                 <Header
@@ -66,7 +66,7 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                                 </Text>
                             </>
                         )}
-                    </>
+                    </Fragment>
                 );
             })}
         </View>

From 737480f8129ba793965d7f73e3f7d6e1026cd3bb Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 29 Nov 2023 21:57:13 +0100
Subject: [PATCH 11/42] Fix styles not being applied to header

---
 src/components/Breadcrumbs.tsx | 6 ++++--
 src/styles/styles.ts           | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index be47ce6e5c39..84339b44c195 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -35,14 +35,16 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                 return (
                     <Fragment key={key}>
                         {breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
-                            <View key={key}>
+                            <View
+                                key={key}
+                                style={styles.breadcrumbLogo}
+                            >
                                 <Header
                                     title={
                                         <LogoComponent
                                             fill={theme.text}
                                             width={variables.lhnLogoWidth}
                                             height={variables.lhnLogoHeight}
-                                            style={styles.breadcrumbLogo}
                                         />
                                     }
                                     shouldShowEnvironmentBadge
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 1a04fc1ce33b..cb71b6e78d56 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1394,7 +1394,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         breadcrumbLogo: {
-            marginTop: 3,
+            marginTop: 4,
         },
 
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>

From 08cd12b2f15e7fd305f7b2178ad7fdc537f7531f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 29 Nov 2023 21:57:30 +0100
Subject: [PATCH 12/42] Breadcrumbs storybook

---
 src/stories/Breadcrumbs.stories.js | 60 ++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/stories/Breadcrumbs.stories.js

diff --git a/src/stories/Breadcrumbs.stories.js b/src/stories/Breadcrumbs.stories.js
new file mode 100644
index 000000000000..33f2715e6777
--- /dev/null
+++ b/src/stories/Breadcrumbs.stories.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import Breadcrumbs from '@components/Breadcrumbs';
+import CONST from '@src/CONST';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+const story = {
+    title: 'Components/Breadcrumbs',
+    component: Breadcrumbs,
+};
+
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Breadcrumbs {...args} />;
+}
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default = Template.bind({});
+Default.args = {
+    breadcrumbs: [
+        {
+            type: CONST.BREADCRUMB_TYPE.ROOT,
+        },
+        {
+            text: 'Chats',
+        },
+    ],
+};
+
+const CustomPromptAndTooltip = Template.bind({});
+CustomPromptAndTooltip.args = {
+    breadcrumbs: [
+        {
+            text: 'Cathy`s Croissants',
+            type: CONST.BREADCRUMB_TYPE.STRONG,
+        },
+        {
+            text: 'Chats',
+        },
+    ],
+};
+
+const AllBreadcrumbsNormal = Template.bind({});
+AllBreadcrumbsNormal.args = {
+    breadcrumbs: [
+        {
+            text: 'Settings',
+        },
+        {
+            text: 'Profile',
+        },
+    ],
+};
+
+export default story;
+export {Default, CustomPromptAndTooltip, AllBreadcrumbsNormal};

From a81da0698a3ab02a7b0cf89906c0d77a095e08d1 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 30 Nov 2023 14:34:51 +0100
Subject: [PATCH 13/42] Rename story

---
 src/stories/Breadcrumbs.stories.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/stories/Breadcrumbs.stories.js b/src/stories/Breadcrumbs.stories.js
index 33f2715e6777..758afdbd886d 100644
--- a/src/stories/Breadcrumbs.stories.js
+++ b/src/stories/Breadcrumbs.stories.js
@@ -31,8 +31,8 @@ Default.args = {
     ],
 };
 
-const CustomPromptAndTooltip = Template.bind({});
-CustomPromptAndTooltip.args = {
+const FirstBreadcrumbStrong = Template.bind({});
+FirstBreadcrumbStrong.args = {
     breadcrumbs: [
         {
             text: 'Cathy`s Croissants',
@@ -57,4 +57,4 @@ AllBreadcrumbsNormal.args = {
 };
 
 export default story;
-export {Default, CustomPromptAndTooltip, AllBreadcrumbsNormal};
+export {Default, FirstBreadcrumbStrong, AllBreadcrumbsNormal};

From 87b5b5b8333e12b0f1eb565dad328c4de47b4bd3 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 1 Dec 2023 11:22:10 +0100
Subject: [PATCH 14/42] Use theme instead of colors

---
 src/styles/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index cb71b6e78d56..7608e708001f 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1376,7 +1376,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         breadcrumb: {
-            color: colors.darkSupportingText,
+            color: theme.textSupporting,
             fontSize: variables.fontSizeh1,
             marginTop: (variables.fontSizeXLarge - variables.fontSizeh1) / 2,
             ...headlineFont,

From 125626a4837c0370c05ebfcf2af44e65bd5ba47c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 1 Dec 2023 11:24:12 +0100
Subject: [PATCH 15/42] Remove explicit margin - use flex adjustments

---
 src/styles/styles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 7608e708001f..0186c045e6ae 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1378,7 +1378,6 @@ const styles = (theme: ThemeColors) =>
         breadcrumb: {
             color: theme.textSupporting,
             fontSize: variables.fontSizeh1,
-            marginTop: (variables.fontSizeXLarge - variables.fontSizeh1) / 2,
             ...headlineFont,
         },
 

From 694d6ad5c02aef26ded24e306c7a5dd07825c13f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 12:04:42 +0100
Subject: [PATCH 16/42] Single quote instead of backtick

---
 src/stories/Breadcrumbs.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Breadcrumbs.stories.js b/src/stories/Breadcrumbs.stories.js
index 758afdbd886d..4c96d58afce8 100644
--- a/src/stories/Breadcrumbs.stories.js
+++ b/src/stories/Breadcrumbs.stories.js
@@ -35,7 +35,7 @@ const FirstBreadcrumbStrong = Template.bind({});
 FirstBreadcrumbStrong.args = {
     breadcrumbs: [
         {
-            text: 'Cathy`s Croissants',
+            text: "Cathy's Croissants",
             type: CONST.BREADCRUMB_TYPE.STRONG,
         },
         {

From 1dba8b00e54ca82cbe2cb5aa20b6bc931e76541f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 12:15:29 +0100
Subject: [PATCH 17/42] Drop test breadcrumbs

---
 src/pages/home/sidebar/SidebarLinks.js | 25 -------------------------
 1 file changed, 25 deletions(-)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index ef3e3a8a9dfb..44029cdd6450 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -178,31 +178,6 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                 </Tooltip>
                 <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={isCreateMenuOpen} />
             </View>
-            <View style={[styles.mh5, styles.mb3]}>
-                <Breadcrumbs
-                    breadcrumbs={[
-                        {
-                            type: CONST.BREADCRUMB_TYPE.ROOT,
-                        },
-                        {
-                            text: 'Chats',
-                        },
-                    ]}
-                />
-            </View>
-            <View style={[styles.mh5, styles.mb3]}>
-                <Breadcrumbs
-                    breadcrumbs={[
-                        {
-                            text: 'Cathy`s Croissants',
-                            type: CONST.BREADCRUMB_TYPE.STRONG,
-                        },
-                        {
-                            text: 'Settings',
-                        },
-                    ]}
-                />
-            </View>
             <View style={[styles.pRelative, styles.flex1]}>
                 <LHNOptionsList
                     style={styles.flex1}

From 5dbffff6763914f4e6897ea449915e1c0a721528 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 12:23:14 +0100
Subject: [PATCH 18/42] Pixel-perfect alignment

---
 src/styles/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 0186c045e6ae..8f18848f945e 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1393,7 +1393,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         breadcrumbLogo: {
-            marginTop: 4,
+            paddingTop: 1, // Pixel-perfect alignment due to a small difference between logo height and breadcrumb text height
         },
 
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>

From 8e3309c74420cb069e263c934e1016985ae436d2 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 12:23:34 +0100
Subject: [PATCH 19/42] Drop unused import

---
 src/pages/home/sidebar/SidebarLinks.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 44029cdd6450..2aba742f157f 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -4,7 +4,6 @@ import React, {useCallback, useEffect, useRef} from 'react';
 import {InteractionManager, StyleSheet, View} from 'react-native';
 import _ from 'underscore';
 import LogoComponent from '@assets/images/expensify-wordmark.svg';
-import Breadcrumbs from '@components/Breadcrumbs';
 import Header from '@components/Header';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';

From c276ae2cd99cdceade33c734acbadd55fa3f3824 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 12:09:23 +0100
Subject: [PATCH 20/42] Pixel perfect adjustments

---
 src/styles/styles.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 943942257a06..a0c3df4f0b17 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1381,6 +1381,7 @@ const styles = (theme: ThemeColors) =>
         breadcrumb: {
             color: theme.textSupporting,
             fontSize: variables.fontSizeh1,
+            lineHeight: variables.lineHeightSizeh1,
             ...headlineFont,
         },
 
@@ -1396,7 +1397,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         breadcrumbLogo: {
-            paddingTop: 1, // Pixel-perfect alignment due to a small difference between logo height and breadcrumb text height
+            paddingTop: 3, // Pixel-perfect alignment due to a small difference between logo height and breadcrumb text height
         },
 
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>

From 74d8e2be5254ada95a1571127c229b6b203d331f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 12:10:01 +0100
Subject: [PATCH 21/42] Change color of separator to match Figma

---
 src/styles/styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index a0c3df4f0b17..f744d6d4ed9c 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1393,6 +1393,7 @@ const styles = (theme: ThemeColors) =>
 
         breadcrumbSeparator: {
             marginTop: 0,
+            color: colors.darkIcons,
             fontSize: variables.fontSizeXLarge,
         },
 

From 3c415dc085a3ba32e6fb46ec11b976b667bf0f3d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 12:20:44 +0100
Subject: [PATCH 22/42] Restore initial iconHeight

---
 src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js | 2 +-
 src/styles/variables.ts                             | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
index 1ead858921cc..c1311010c404 100644
--- a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
+++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
@@ -35,7 +35,7 @@ function ImTeacherUpdateEmailPage() {
                 linkKey="teachersUnitePage.contactMethods"
                 onLinkPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(activeRoute))}
                 iconWidth={variables.signInLogoWidthLargeScreen}
-                iconHeight={variables.signInLogoHeightSmallScreen}
+                iconHeight={variables.signInLogoHeightLargeScreen}
             />
             <FixedFooter style={[styles.flexGrow0]}>
                 <Button
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index e5098ca975d5..151d8843b751 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -137,6 +137,7 @@ export default {
     signInLogoHeight: 34,
     signInLogoWidth: 120,
     signInLogoWidthLargeScreen: 144,
+    signInLogoHeightLargeScreen: 108,
     signInLogoWidthPill: 132,
     tabSelectorButtonHeight: 40,
     tabSelectorButtonPadding: 12,

From fdad0cc05424f16fc5b6d3cda67b161d9d31d7a4 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 12:23:19 +0100
Subject: [PATCH 23/42] Drop unnecessary keys

---
 src/components/Breadcrumbs.tsx | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 84339b44c195..ba56aa5b7f93 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -35,10 +35,7 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                 return (
                     <Fragment key={key}>
                         {breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
-                            <View
-                                key={key}
-                                style={styles.breadcrumbLogo}
-                            >
+                            <View style={styles.breadcrumbLogo}>
                                 <Header
                                     title={
                                         <LogoComponent
@@ -52,20 +49,8 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                             </View>
                         ) : (
                             <>
-                                {index !== 0 && (
-                                    <Text
-                                        key={`${key}-separator`}
-                                        style={separatorStyle}
-                                    >
-                                        /
-                                    </Text>
-                                )}
-                                <Text
-                                    key={key}
-                                    style={style}
-                                >
-                                    {breadcrumb.text}
-                                </Text>
+                                {index !== 0 && <Text style={separatorStyle}>/</Text>}
+                                <Text style={style}>{breadcrumb.text}</Text>
                             </>
                         )}
                     </Fragment>

From 3dd6fcad8f1687104ece0ef4471975f6e0de2b36 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 16:14:10 +0100
Subject: [PATCH 24/42] Wrap separator and text inside of text to glue it
 together

---
 src/components/Breadcrumbs.tsx | 4 ++--
 src/styles/styles.ts           | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index ba56aa5b7f93..1b4fd62973c3 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -48,10 +48,10 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                                 />
                             </View>
                         ) : (
-                            <>
+                            <Text>
                                 {index !== 0 && <Text style={separatorStyle}>/</Text>}
                                 <Text style={style}>{breadcrumb.text}</Text>
-                            </>
+                            </Text>
                         )}
                     </Fragment>
                 );
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index f744d6d4ed9c..141c84efde00 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1393,6 +1393,7 @@ const styles = (theme: ThemeColors) =>
 
         breadcrumbSeparator: {
             marginTop: 0,
+            marginRight: 4,
             color: colors.darkIcons,
             fontSize: variables.fontSizeXLarge,
         },

From d0fd4a6aea49133ab23cc41e46e04f6731c1a53c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 11 Dec 2023 12:55:55 +0100
Subject: [PATCH 25/42] Rename root to header

---
 src/CONST.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index b89942ccacd5..69bcddb18dfe 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -75,7 +75,7 @@ const CONST = {
     AVATAR_MAX_HEIGHT_PX: 4096,
 
     BREADCRUMB_TYPE: {
-        ROOT: 'root_workspace',
+        HEADER: 'header',
         STRONG: 'strong',
         NORMAL: 'normal',
     },

From fa46d37ad1a336d3f73813c0cbea217b9f13c28c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 11 Dec 2023 12:56:23 +0100
Subject: [PATCH 26/42] Allow only two elements in Breadcrumbs array

---
 src/components/Breadcrumbs.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 1b4fd62973c3..e298d975455c 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -8,17 +8,22 @@ import CONST from '@src/CONST';
 import Header from './Header';
 import Text from './Text';
 
-type BreadcrumbRootWorkspace = {
-    type: typeof CONST.BREADCRUMB_TYPE.ROOT;
+type BreadcrumbHeader = {
+    type: typeof CONST.BREADCRUMB_TYPE.HEADER;
+};
+
+type BreadcrumbStrong = {
+    text: string;
+    type: typeof CONST.BREADCRUMB_TYPE.STRONG;
 };
 
 type Breadcrumb = {
     text: string;
-    type?: typeof CONST.BREADCRUMB_TYPE.STRONG | typeof CONST.BREADCRUMB_TYPE.NORMAL;
+    type?: typeof CONST.BREADCRUMB_TYPE.NORMAL;
 };
 
 type BreadcrumbsProps = {
-    breadcrumbs: Array<BreadcrumbRootWorkspace | Breadcrumb>;
+    breadcrumbs: [BreadcrumbHeader | BreadcrumbStrong, Breadcrumb];
 };
 
 function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
@@ -28,13 +33,13 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
     return (
         <View style={[styles.flexRow, styles.flexWrap, styles.alignItemsCenter, styles.gap1]}>
             {breadcrumbs.map((breadcrumb, index) => {
-                const key = `${breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? CONST.BREADCRUMB_TYPE.ROOT : breadcrumb.text}${index}`;
+                const key = `${JSON.stringify(breadcrumb)}${index}`;
                 const style = [styles.breadcrumb, breadcrumb.type === CONST.BREADCRUMB_TYPE.STRONG && styles.breadcrumbStrong];
                 const separatorStyle = [style, styles.breadcrumbSeparator];
 
                 return (
                     <Fragment key={key}>
-                        {breadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
+                        {breadcrumb.type === CONST.BREADCRUMB_TYPE.HEADER ? (
                             <View style={styles.breadcrumbLogo}>
                                 <Header
                                     title={

From d121272a03546362398434e46a55dddd41c12620 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 11 Dec 2023 22:19:10 +0100
Subject: [PATCH 27/42] Refactor: Allow only up to two levels breadcrumbs

---
 src/components/Breadcrumbs.tsx | 69 ++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index e298d975455c..a622ece6919d 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import LogoComponent from '@assets/images/expensify-wordmark.svg';
 import useTheme from '@styles/themes/useTheme';
@@ -9,7 +9,7 @@ import Header from './Header';
 import Text from './Text';
 
 type BreadcrumbHeader = {
-    type: typeof CONST.BREADCRUMB_TYPE.HEADER;
+    type: typeof CONST.BREADCRUMB_TYPE.ROOT;
 };
 
 type BreadcrumbStrong = {
@@ -23,44 +23,49 @@ type Breadcrumb = {
 };
 
 type BreadcrumbsProps = {
-    breadcrumbs: [BreadcrumbHeader | BreadcrumbStrong, Breadcrumb];
+    breadcrumbs: [BreadcrumbHeader | BreadcrumbStrong, Breadcrumb | undefined];
 };
 
 function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const [primaryBreadcrumb, secondaryBreadcrumb] = breadcrumbs;
 
     return (
-        <View style={[styles.flexRow, styles.flexWrap, styles.alignItemsCenter, styles.gap1]}>
-            {breadcrumbs.map((breadcrumb, index) => {
-                const key = `${JSON.stringify(breadcrumb)}${index}`;
-                const style = [styles.breadcrumb, breadcrumb.type === CONST.BREADCRUMB_TYPE.STRONG && styles.breadcrumbStrong];
-                const separatorStyle = [style, styles.breadcrumbSeparator];
+        <View style={[styles.flexRow, styles.alignItemsCenter, {alignContent: 'stretch', boxSizing: 'border-box'}, styles.gap1, styles.w100]}>
+            {primaryBreadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
+                <View style={styles.breadcrumbLogo}>
+                    <Header
+                        title={
+                            <LogoComponent
+                                fill={theme.text}
+                                width={variables.lhnLogoWidth}
+                                height={variables.lhnLogoHeight}
+                            />
+                        }
+                        shouldShowEnvironmentBadge
+                    />
+                </View>
+            ) : (
+                <Text
+                    numberOfLines={1}
+                    style={[styles.flexShrink1, styles.breadcrumb, styles.breadcrumbStrong]}
+                >
+                    {primaryBreadcrumb.text}
+                </Text>
+            )}
 
-                return (
-                    <Fragment key={key}>
-                        {breadcrumb.type === CONST.BREADCRUMB_TYPE.HEADER ? (
-                            <View style={styles.breadcrumbLogo}>
-                                <Header
-                                    title={
-                                        <LogoComponent
-                                            fill={theme.text}
-                                            width={variables.lhnLogoWidth}
-                                            height={variables.lhnLogoHeight}
-                                        />
-                                    }
-                                    shouldShowEnvironmentBadge
-                                />
-                            </View>
-                        ) : (
-                            <Text>
-                                {index !== 0 && <Text style={separatorStyle}>/</Text>}
-                                <Text style={style}>{breadcrumb.text}</Text>
-                            </Text>
-                        )}
-                    </Fragment>
-                );
-            })}
+            {secondaryBreadcrumb && (
+                <>
+                    <Text style={[styles.breadcrumbSeparator]}>/</Text>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.mw75, styles.flexShrink0, styles.breadcrumb]}
+                    >
+                        {secondaryBreadcrumb.text}
+                    </Text>
+                </>
+            )}
         </View>
     );
 }

From 62f576bfc4c4fa1052b6739a7d47f27fbf125d50 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 11 Dec 2023 22:19:25 +0100
Subject: [PATCH 28/42] Rename const for breadcrumb

---
 src/CONST.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 69bcddb18dfe..14dc66764b00 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -75,7 +75,7 @@ const CONST = {
     AVATAR_MAX_HEIGHT_PX: 4096,
 
     BREADCRUMB_TYPE: {
-        HEADER: 'header',
+        ROOT: 'root',
         STRONG: 'strong',
         NORMAL: 'normal',
     },

From 6eb2110a7eb50b316d77b26894571f59185f4550 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 11 Dec 2023 22:19:53 +0100
Subject: [PATCH 29/42] Drop old breadcrumb styles

---
 src/styles/styles.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 141c84efde00..606d90d60bfd 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1386,14 +1386,11 @@ const styles = (theme: ThemeColors) =>
         },
 
         breadcrumbStrong: {
-            marginTop: 0,
             color: colors.darkPrimaryText,
             fontSize: variables.fontSizeXLarge,
         },
 
         breadcrumbSeparator: {
-            marginTop: 0,
-            marginRight: 4,
             color: colors.darkIcons,
             fontSize: variables.fontSizeXLarge,
         },

From 2fdbd749c8b3918ed96f9aa1dec0fd0f3f48c3cb Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 11 Dec 2023 22:20:32 +0100
Subject: [PATCH 30/42] Max width helper style

---
 src/styles/utilities/sizing.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/utilities/sizing.ts b/src/styles/utilities/sizing.ts
index c8ec7352d463..212d532c1b23 100644
--- a/src/styles/utilities/sizing.ts
+++ b/src/styles/utilities/sizing.ts
@@ -62,6 +62,10 @@ export default {
         maxWidth: 'auto',
     },
 
+    mw75: {
+        maxWidth: '75%',
+    },
+
     mw100: {
         maxWidth: '100%',
     },

From 3d394ff425dc3b3bfbf5585cc256ac1522ae52df Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 11 Dec 2023 22:27:23 +0100
Subject: [PATCH 31/42] Fix alignment

---
 src/components/Breadcrumbs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index a622ece6919d..604b1eefc862 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -32,7 +32,7 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
     const [primaryBreadcrumb, secondaryBreadcrumb] = breadcrumbs;
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, {alignContent: 'stretch', boxSizing: 'border-box'}, styles.gap1, styles.w100]}>
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.w100]}>
             {primaryBreadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
                 <View style={styles.breadcrumbLogo}>
                     <Header

From 0383f2634aa852be4487593a2d9e666801d6d3ec Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 11 Dec 2023 22:29:06 +0100
Subject: [PATCH 32/42] Drop Normal story sample - not used in app

---
 src/stories/Breadcrumbs.stories.js | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/stories/Breadcrumbs.stories.js b/src/stories/Breadcrumbs.stories.js
index 4c96d58afce8..5aea6bf6f14b 100644
--- a/src/stories/Breadcrumbs.stories.js
+++ b/src/stories/Breadcrumbs.stories.js
@@ -44,17 +44,5 @@ FirstBreadcrumbStrong.args = {
     ],
 };
 
-const AllBreadcrumbsNormal = Template.bind({});
-AllBreadcrumbsNormal.args = {
-    breadcrumbs: [
-        {
-            text: 'Settings',
-        },
-        {
-            text: 'Profile',
-        },
-    ],
-};
-
 export default story;
-export {Default, FirstBreadcrumbStrong, AllBreadcrumbsNormal};
+export {Default, FirstBreadcrumbStrong};

From 90304da6cce4324613268a5f17d23128621e5b4f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 11 Dec 2023 22:29:21 +0100
Subject: [PATCH 33/42] Add styles from breadcrumb style

---
 src/styles/styles.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 606d90d60bfd..4808e33cb7e1 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1393,6 +1393,8 @@ const styles = (theme: ThemeColors) =>
         breadcrumbSeparator: {
             color: colors.darkIcons,
             fontSize: variables.fontSizeXLarge,
+            lineHeight: variables.lineHeightSizeh1,
+            ...headlineFont,
         },
 
         breadcrumbLogo: {

From 333fb453104f05f75578466dbd6aeef4cf52c245 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 12 Dec 2023 14:45:24 +0100
Subject: [PATCH 34/42] Adjust colors after main merge

---
 src/styles/styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 55d6ef21ee5a..c5cc07976f6f 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1386,12 +1386,12 @@ const styles = (theme: ThemeColors) =>
         },
 
         breadcrumbStrong: {
-            color: colors.darkPrimaryText,
+            color: theme.text,
             fontSize: variables.fontSizeXLarge,
         },
 
         breadcrumbSeparator: {
-            color: colors.darkIcons,
+            color: theme.icon,
             fontSize: variables.fontSizeXLarge,
             lineHeight: variables.lineHeightSizeh1,
             ...headlineFont,

From 7c7051cddf7250b8980cb861a47d2ede7bc3a337 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 12 Dec 2023 15:39:00 +0100
Subject: [PATCH 35/42] Pixel perfect logo height adjustment

---
 src/styles/styles.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index c5cc07976f6f..2c17de9c4348 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1398,7 +1398,8 @@ const styles = (theme: ThemeColors) =>
         },
 
         breadcrumbLogo: {
-            paddingTop: 3, // Pixel-perfect alignment due to a small difference between logo height and breadcrumb text height
+            top: 1.66, // Pixel-perfect alignment due to a small difference between logo height and breadcrumb text height
+            height: variables.lineHeightSizeh1,
         },
 
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>

From bb7dda3fc498312826f8d42bf478f7d22e834d21 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 12 Dec 2023 15:39:21 +0100
Subject: [PATCH 36/42] Logo width exactly like in Figma

---
 src/styles/variables.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index c7365adfd975..1127ff0ad588 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -142,7 +142,7 @@ export default {
     signInLogoWidthPill: 132,
     tabSelectorButtonHeight: 40,
     tabSelectorButtonPadding: 12,
-    lhnLogoWidth: 95,
+    lhnLogoWidth: 95.09,
     lhnLogoHeight: 22.33,
     signInLogoWidthLargeScreenPill: 162,
     modalContentMaxWidth: 360,

From 9a0c2e02a5acdb8f0f15dbc6ce02112e281d1f7c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 19:27:12 +0100
Subject: [PATCH 37/42] Change import paths

---
 src/components/Breadcrumbs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 604b1eefc862..6eb7a5a43180 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {View} from 'react-native';
 import LogoComponent from '@assets/images/expensify-wordmark.svg';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import Header from './Header';

From 22864a459921a6e38f93a21952e527c9509b8cde Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:38:25 +0100
Subject: [PATCH 38/42] Convert object to boolean before doing AND on it

---
 src/components/Breadcrumbs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 6eb7a5a43180..b59b45fb6cae 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -55,7 +55,7 @@ function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
                 </Text>
             )}
 
-            {secondaryBreadcrumb && (
+            {!!secondaryBreadcrumb && (
                 <>
                     <Text style={[styles.breadcrumbSeparator]}>/</Text>
                     <Text

From 39784fb6f0af5f388261941ac35f4eb3ab19c5f9 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:47:25 +0100
Subject: [PATCH 39/42] Migrate Storybook file to TS

---
 ...{Breadcrumbs.stories.js => Breadcrumbs.stories.tsx} | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)
 rename src/stories/{Breadcrumbs.stories.js => Breadcrumbs.stories.tsx} (77%)

diff --git a/src/stories/Breadcrumbs.stories.js b/src/stories/Breadcrumbs.stories.tsx
similarity index 77%
rename from src/stories/Breadcrumbs.stories.js
rename to src/stories/Breadcrumbs.stories.tsx
index 5aea6bf6f14b..60e1900534f9 100644
--- a/src/stories/Breadcrumbs.stories.js
+++ b/src/stories/Breadcrumbs.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Breadcrumbs from '@components/Breadcrumbs';
+import Breadcrumbs, {BreadcrumbsProps} from '@components/Breadcrumbs';
 import CONST from '@src/CONST';
 
 /**
@@ -12,14 +12,16 @@ const story = {
     component: Breadcrumbs,
 };
 
-function Template(args) {
+type StoryType = typeof Template & {args?: Partial<BreadcrumbsProps>};
+
+function Template(args: BreadcrumbsProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <Breadcrumbs {...args} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
+const Default: StoryType = Template.bind({});
 Default.args = {
     breadcrumbs: [
         {
@@ -31,7 +33,7 @@ Default.args = {
     ],
 };
 
-const FirstBreadcrumbStrong = Template.bind({});
+const FirstBreadcrumbStrong: StoryType = Template.bind({});
 FirstBreadcrumbStrong.args = {
     breadcrumbs: [
         {

From f14e7b48611295f773aae1fa1ba6bc14fdc7d00c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:48:12 +0100
Subject: [PATCH 40/42] Add optional style prop

---
 src/components/Breadcrumbs.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index b59b45fb6cae..41e65efa52ef 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {StyleProp, View, ViewStyle} from 'react-native';
 import LogoComponent from '@assets/images/expensify-wordmark.svg';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -24,15 +24,18 @@ type Breadcrumb = {
 
 type BreadcrumbsProps = {
     breadcrumbs: [BreadcrumbHeader | BreadcrumbStrong, Breadcrumb | undefined];
+
+    /** Styles to apply to the container */
+    style?: StyleProp<ViewStyle>;
 };
 
-function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
+function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const [primaryBreadcrumb, secondaryBreadcrumb] = breadcrumbs;
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.w100]}>
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.w100, style]}>
             {primaryBreadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT ? (
                 <View style={styles.breadcrumbLogo}>
                     <Header

From e0cef1a0575699951f38f2fabb3db83f43271774 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:48:29 +0100
Subject: [PATCH 41/42] Export type to use in storybook

---
 src/components/Breadcrumbs.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 41e65efa52ef..21382a551f94 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -75,4 +75,5 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) {
 
 Breadcrumbs.displayName = 'Breadcrumbs';
 
+export type {BreadcrumbsProps};
 export default Breadcrumbs;

From 0d30c94d122b95ddf704de499287889923fbbfac Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:49:32 +0100
Subject: [PATCH 42/42] Prop description

---
 src/components/Breadcrumbs.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 21382a551f94..f3c7de1db882 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -23,6 +23,7 @@ type Breadcrumb = {
 };
 
 type BreadcrumbsProps = {
+    /** An array of breadcrumbs consisting of the root/strong breadcrumb, followed by an optional second level breadcrumb  */
     breadcrumbs: [BreadcrumbHeader | BreadcrumbStrong, Breadcrumb | undefined];
 
     /** Styles to apply to the container */