From d254e4f8316b468730264728bcd8a626d603c888 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 1 Dec 2023 12:50:53 +0100
Subject: [PATCH 01/20] Create a Workspace card

---
 src/languages/en.ts                           |  3 ++
 src/languages/es.ts                           |  3 ++
 src/pages/home/sidebar/SidebarLinks.js        |  4 +++
 .../card/WorkspaceCardCreateAWorkspace.tsx    | 31 +++++++++++++++++++
 src/styles/themes/default.ts                  |  2 +-
 5 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 8f772f1260bb..b5a9261e9944 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1492,6 +1492,9 @@ export default {
             benefit4: 'Customizable limits',
             addWorkEmail: 'Add work email address',
             checkingDomain: 'Hang tight! We are still working on enabling your Expensify Cards. Check back here in a few minutes.',
+            createAWorkspace: 'Create a workspace',
+            createAWorkspaceCopy: 'Manage business expenses, issue cards, send invoices, and more.',
+            createAWorkspaceCTA: 'Get Started',
         },
         reimburse: {
             captureReceipts: 'Capture receipts',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 3887891299df..2f2244a9674a 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1514,6 +1514,9 @@ export default {
             benefit4: 'Límites personalizables',
             addWorkEmail: 'Añadir correo electrónico de trabajo',
             checkingDomain: '¡Un momento! Estamos todavía trabajando para habilitar tu Tarjeta Expensify. Vuelve aquí en unos minutos.',
+            createAWorkspace: 'Crear un espacio de trabajo',
+            createAWorkspaceCopy: 'Administre gastos comerciales, emita tarjetas, envíe facturas y más.',
+            createAWorkspaceCTA: 'Comenzar',
         },
         reimburse: {
             captureReceipts: 'Captura recibos',
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 2aba742f157f..100d746f6524 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -19,6 +19,7 @@ import onyxSubscribe from '@libs/onyxSubscribe';
 import SidebarUtils from '@libs/SidebarUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
+import WorkspaceCardCreateAWorkspace from '@pages/workspace/card/WorkspaceCardCreateAWorkspace';
 import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -177,6 +178,9 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                 </Tooltip>
                 <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={isCreateMenuOpen} />
             </View>
+
+            <WorkspaceCardCreateAWorkspace />
+
             <View style={[styles.pRelative, styles.flex1]}>
                 <LHNOptionsList
                     style={styles.flex1}
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
new file mode 100644
index 000000000000..a7228184415a
--- /dev/null
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Button from '@components/Button';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Section from '@components/Section';
+import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
+import useThemeStyles from '@styles/useThemeStyles';
+
+type WorkspaceCardCreateAWorkspaceProps = WithLocalizeProps;
+
+function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspaceProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <Section
+            title={translate('workspace.card.createAWorkspace')}
+            icon={Illustrations.CreditCardsNew}
+            subtitle={translate('workspace.card.createAWorkspaceCopy')}
+            containerStyles={[styles.highlightBG]}
+        >
+            <Button
+                text={translate('workspace.card.createAWorkspaceCTA')}
+                style={styles.mt5}
+                success
+            />
+        </Section>
+    );
+}
+
+WorkspaceCardCreateAWorkspace.displayName = 'WorkspaceCardNoVBAView';
+
+export default withLocalize(WorkspaceCardCreateAWorkspace);
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index 519e818054e0..a09b2eb56888 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -44,7 +44,7 @@ const darkTheme = {
     hoverComponentBG: colors.darkHighlightBackground,
     activeComponentBG: colors.darkBorders,
     signInSidebar: colors.green800,
-    sidebar: colors.darkHighlightBackground,
+    sidebar: colors.darkAppBackground,
     sidebarHover: colors.darkAppBackground,
     heading: colors.darkPrimaryText,
     textLight: colors.darkPrimaryText,

From fa86c1366fa07f4dd53bac49c21c26c5306a8437 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 10:19:23 +0100
Subject: [PATCH 02/20] Workspace title and icon

---
 src/pages/home/sidebar/SidebarLinks.js | 20 ++++++++++++++++++++
 src/styles/styles.ts                   |  4 ++++
 2 files changed, 24 insertions(+)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 100d746f6524..9c186e355cbf 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -9,7 +9,9 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import LHNOptionsList from '@components/LHNOptionsList/LHNOptionsList';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -179,6 +181,24 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                 <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={isCreateMenuOpen} />
             </View>
 
+            <View style={[styles.mh4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mb3]}>
+                <Text
+                    style={styles.label}
+                    color={theme.textSupporting}
+                >
+                    Workspace
+                </Text>
+                <PressableWithFeedback accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}>
+                    {({hovered}) => (
+                        <Icon
+                            src={Expensicons.Plus}
+                            width={12}
+                            height={12}
+                            additionalStyles={[styles.highlightBG, styles.borderRadiusNormal, styles.p2, hovered && styles.bordersBG]}
+                        />
+                    )}
+                </PressableWithFeedback>
+            </View>
             <WorkspaceCardCreateAWorkspace />
 
             <View style={[styles.pRelative, styles.flex1]}>
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 983f1ba82caa..45d13e528edd 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -313,6 +313,10 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.appBG,
         },
 
+        bordersBG: {
+            backgroundColor: colors.darkBorders,
+        },
+
         h4: {
             fontFamily: fontFamily.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeLabel,

From 294bca68ee4f2aeb1367abf115b4bb8088855096 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 14:11:01 +0100
Subject: [PATCH 03/20] Let Icon be at the top or on the right

---
 src/components/Section.js                     | 67 +++++++++++++++----
 .../card/WorkspaceCardCreateAWorkspace.tsx    |  1 +
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/components/Section.js b/src/components/Section.js
index ad52bf0e3509..47ced81f3dfb 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -23,6 +23,8 @@ const propTypes = {
     /** Icon component */
     IconComponent: PropTypes.func,
 
+    iconPosition: PropTypes.oneOf(['top', 'right']),
+
     /** Contents to display inside the section */
     children: PropTypes.node,
 
@@ -47,11 +49,18 @@ const propTypes = {
     iconContainerStyles: PropTypes.arrayOf(PropTypes.object),
 };
 
+const iconSectionPropTypes = {
+    icon: propTypes.icon,
+    IconComponent: propTypes.IconComponent,
+    iconContainerStyles: propTypes.iconContainerStyles,
+};
+
 const defaultProps = {
     menuItems: null,
     children: null,
     icon: null,
     IconComponent: null,
+    iconPosition: 'right',
     containerStyles: [],
     iconContainerStyles: [],
     titleStyles: [],
@@ -60,29 +69,57 @@ const defaultProps = {
     subtitle: null,
 };
 
-function Section({children, childrenStyles, containerStyles, icon, IconComponent, iconContainerStyles, menuItems, subtitle, subtitleStyles, title, titleStyles}) {
+const defaultIconSectionPropTypes = {
+    icon: null,
+    IconComponent: null,
+    iconContainerStyles: [],
+};
+
+function IconSection({icon, IconComponent, iconContainerStyles}) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
+            {Boolean(icon) && (
+                <Icon
+                    src={icon}
+                    height={68}
+                    width={68}
+                />
+            )}
+            {Boolean(IconComponent) && <IconComponent />}
+        </View>
+    );
+}
+
+function Section({children, childrenStyles, containerStyles, icon, IconComponent, iconPosition, iconContainerStyles, menuItems, subtitle, subtitleStyles, title, titleStyles}) {
     const styles = useThemeStyles();
+
     return (
         <>
             <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, ...titleStyles]}>
+                {iconPosition === 'top' && (
+                    <IconSection
+                        icon={icon}
+                        IconComponent={IconComponent}
+                        iconContainerStyles={[iconContainerStyles, styles.alignSelfStart, styles.mb3]}
+                    />
+                )}
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mh1, ...titleStyles]}>
                     <View style={[styles.flexShrink1]}>
                         <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
                     </View>
-                    <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
-                        {Boolean(icon) && (
-                            <Icon
-                                src={icon}
-                                height={68}
-                                width={68}
-                            />
-                        )}
-                        {Boolean(IconComponent) && <IconComponent />}
-                    </View>
+                    {iconPosition === 'right' && (
+                        <IconSection
+                            icon={icon}
+                            IconComponent={IconComponent}
+                            iconContainerStyles={iconContainerStyles}
+                        />
+                    )}
                 </View>
 
                 {Boolean(subtitle) && (
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt4, ...subtitleStyles]}>
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt4, styles.mh1, ...subtitleStyles]}>
                         <Text style={styles.textNormal}>{subtitle}</Text>
                     </View>
                 )}
@@ -94,7 +131,9 @@ function Section({children, childrenStyles, containerStyles, icon, IconComponent
         </>
     );
 }
-
+IconSection.displayName = 'IconSection';
+IconSection.propTypes = iconSectionPropTypes;
+IconSection.defaultProps = defaultIconSectionPropTypes;
 Section.displayName = 'Section';
 Section.propTypes = propTypes;
 Section.defaultProps = defaultProps;
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index a7228184415a..7e8274f29b4b 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -14,6 +14,7 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
         <Section
             title={translate('workspace.card.createAWorkspace')}
             icon={Illustrations.CreditCardsNew}
+            iconPosition='top'
             subtitle={translate('workspace.card.createAWorkspaceCopy')}
             containerStyles={[styles.highlightBG]}
         >

From 79fbdb1f44a4e73931e83b8be2cf63d74e98f286 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 14:21:25 +0100
Subject: [PATCH 04/20] Add muted subtitle

---
 src/components/Section.js                     | 22 +++++++++++++++++--
 .../card/WorkspaceCardCreateAWorkspace.tsx    |  3 ++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Section.js b/src/components/Section.js
index 47ced81f3dfb..53e7f4af1bb5 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -40,6 +40,9 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     subtitleStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Whether the subtitle should have a muted style */
+    subtitleMuted: PropTypes.boolean,
+
     /** Customize the Section container */
     // eslint-disable-next-line react/forbid-prop-types
     childrenStyles: PropTypes.arrayOf(PropTypes.object),
@@ -65,6 +68,7 @@ const defaultProps = {
     iconContainerStyles: [],
     titleStyles: [],
     subtitleStyles: [],
+    subtitleMuted: false,
     childrenStyles: [],
     subtitle: null,
 };
@@ -92,7 +96,21 @@ function IconSection({icon, IconComponent, iconContainerStyles}) {
     );
 }
 
-function Section({children, childrenStyles, containerStyles, icon, IconComponent, iconPosition, iconContainerStyles, menuItems, subtitle, subtitleStyles, title, titleStyles}) {
+function Section({
+    children,
+    childrenStyles,
+    containerStyles,
+    icon,
+    IconComponent,
+    iconPosition,
+    iconContainerStyles,
+    menuItems,
+    subtitle,
+    subtitleStyles,
+    subtitleMuted,
+    title,
+    titleStyles,
+}) {
     const styles = useThemeStyles();
 
     return (
@@ -120,7 +138,7 @@ function Section({children, childrenStyles, containerStyles, icon, IconComponent
 
                 {Boolean(subtitle) && (
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt4, styles.mh1, ...subtitleStyles]}>
-                        <Text style={styles.textNormal}>{subtitle}</Text>
+                        <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
                     </View>
                 )}
 
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index 7e8274f29b4b..681224a411ff 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -14,8 +14,9 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
         <Section
             title={translate('workspace.card.createAWorkspace')}
             icon={Illustrations.CreditCardsNew}
-            iconPosition='top'
+            iconPosition="top"
             subtitle={translate('workspace.card.createAWorkspaceCopy')}
+            subtitleMuted
             containerStyles={[styles.highlightBG]}
         >
             <Button

From 0f16ecf62cf89c9f6a2bdd5e64587fb806638548 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 14:22:27 +0100
Subject: [PATCH 05/20] Remove Create a Workspace card

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

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 9c186e355cbf..f61f231c6191 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -180,27 +180,6 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                 </Tooltip>
                 <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={isCreateMenuOpen} />
             </View>
-
-            <View style={[styles.mh4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mb3]}>
-                <Text
-                    style={styles.label}
-                    color={theme.textSupporting}
-                >
-                    Workspace
-                </Text>
-                <PressableWithFeedback accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}>
-                    {({hovered}) => (
-                        <Icon
-                            src={Expensicons.Plus}
-                            width={12}
-                            height={12}
-                            additionalStyles={[styles.highlightBG, styles.borderRadiusNormal, styles.p2, hovered && styles.bordersBG]}
-                        />
-                    )}
-                </PressableWithFeedback>
-            </View>
-            <WorkspaceCardCreateAWorkspace />
-
             <View style={[styles.pRelative, styles.flex1]}>
                 <LHNOptionsList
                     style={styles.flex1}

From 2122277a902a7ccc7582c744db8ffd2a1cb302c3 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 18:00:00 +0100
Subject: [PATCH 06/20] Drop unused imports

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

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index f61f231c6191..2aba742f157f 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -9,9 +9,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import LHNOptionsList from '@components/LHNOptionsList/LHNOptionsList';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
-import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -21,7 +19,6 @@ import onyxSubscribe from '@libs/onyxSubscribe';
 import SidebarUtils from '@libs/SidebarUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
-import WorkspaceCardCreateAWorkspace from '@pages/workspace/card/WorkspaceCardCreateAWorkspace';
 import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';

From 8aea9bb992c549f8fe29d5568f66d51d904c96c5 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 18:27:38 +0100
Subject: [PATCH 07/20] Add Hotdog stand icon

---
 .../simple-illustrations/simple-illustration__hotdogstand.svg   | 1 +
 src/components/Icon/Illustrations.ts                            | 2 ++
 src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx      | 2 +-
 3 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 assets/images/simple-illustrations/simple-illustration__hotdogstand.svg

diff --git a/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
new file mode 100644
index 000000000000..732c16a75a2b
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
@@ -0,0 +1 @@
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M51.148 25.0332H49.0946V25.0198L45.9446 21.8698H45.918C45.9413 21.7332 45.9613 21.5965 45.978 21.4565C46.0113 21.1665 46.028 20.8598 46.028 20.5265C46.028 20.3265 46.0113 20.1165 45.988 19.9165H46.028L51.148 25.0332Z" fill="#002140"/><path d="M57.2778 53.1331H45.8711V56.3364H57.2778V53.1331Z" fill="#0164BF"/><path d="M24.0277 15.1265C24.961 14.6098 25.8943 14.6098 26.8277 15.1265C27.7577 15.6432 28.691 15.6432 29.6243 15.1265C30.5577 14.6098 31.4877 14.6098 32.421 15.1265C33.3543 15.6432 34.2877 15.6432 35.2177 15.1265C36.151 14.6098 37.0843 14.6098 38.0177 15.1265C38.9477 15.6432 40.1477 15.6432 41.081 15.1265C41.7377 14.8198 42.2243 14.2665 42.421 13.6965H42.4877C42.8377 13.7065 42.831 13.6832 43.2643 13.5998C45.2343 13.1898 46.5777 13.5998 47.291 14.8265C48.0843 16.3165 47.4943 18.2898 45.891 19.3098C45.6543 19.4598 45.3977 19.5898 45.121 19.6932C44.1677 20.0598 42.9843 20.3165 41.7043 20.5332C41.3643 18.7865 41.1077 16.6398 37.9677 16.6398H22.9477C21.0077 16.6898 19.8843 18.0798 19.551 19.7132L19.441 19.6932C17.271 18.8798 16.3643 16.5365 17.271 14.8265C17.9843 13.5998 19.3277 13.1898 21.2977 13.5998C22.211 13.7665 21.941 13.6932 22.3343 13.7398C22.3277 14.6765 23.1777 15.5798 24.031 15.1265H24.0277Z" fill="#F25730"/><path d="M45.8711 25.2965V25.0332H49.0944H51.1478H57.2778V53.1332H45.8711V25.2965Z" fill="#FFA75A"/><path d="M23.0513 25.0231C22.8513 25.0231 22.6646 25.0098 22.4813 24.9798C21.6913 24.8598 21.0546 24.4865 20.568 23.9598C19.5846 22.8931 19.2346 21.1998 19.5413 19.7098C19.8746 18.0731 20.998 16.6831 22.938 16.6365H37.958C41.098 16.6365 41.3546 18.7831 41.6946 20.5298C42.9746 20.3131 44.158 20.0565 45.1113 19.6898C45.388 19.5865 45.6446 19.4565 45.8813 19.3065C45.918 19.4798 45.9546 19.6931 45.9813 19.9165C46.0046 20.1165 46.0213 20.3298 46.0213 20.5265C46.0213 20.8565 46.0046 21.1665 45.9713 21.4565C45.9546 21.5965 45.9346 21.7331 45.9113 21.8631C45.8346 22.3065 45.7146 22.6965 45.558 23.0398C45.3913 23.4065 45.1746 23.7165 44.9213 23.9731C44.418 24.4865 43.7613 24.7931 42.9846 24.9298C42.6513 24.9898 42.2946 25.0165 41.9213 25.0165H23.148C23.1146 25.0165 23.0813 25.0165 23.0446 25.0165L23.0513 25.0231Z" fill="#FED607"/><path d="M45.8714 53.1331H34.9414V56.3364H45.8714V53.1331Z" fill="#0164BF"/><path d="M45.871 25.2965L38.9243 33.2699L37.841 34.5165H33.4476H33.001L41.1776 25.1299V25.0332H43.0076H44.951H45.871V25.2965Z" fill="#FFFAF0"/><path d="M43.8645 38.2332V41.6632H43.7479L36.7412 48.6665V43.0898L41.5979 38.2332H43.8645Z" fill="#8DC8FF"/><path d="M43.8645 41.6631V48.6664H36.7412L43.7479 41.6631H43.8645Z" fill="#0185FF"/><path d="M38.9444 33.2833H42.8777C43.8944 33.2833 43.8944 34.7666 42.8777 34.7666H37.8311C37.8377 34.6866 37.8411 34.6033 37.8411 34.5133L38.9277 33.2666L38.9477 33.2799L38.9444 33.2833Z" fill="#002140"/><path d="M41.5979 38.2332L36.7412 43.0898V38.2332H41.5979Z" fill="#0185FF"/><path d="M26.8239 11.8865C27.7539 12.4032 28.6872 12.4032 29.6206 11.8865C30.5539 11.3699 31.4839 11.3699 32.4172 11.8865C33.3506 12.4032 34.2839 12.4032 35.2139 11.8865C36.1472 11.3699 37.0806 11.3699 38.0139 11.8865C38.9439 12.4032 39.8772 12.4032 40.8106 11.8865C41.7672 11.3832 42.6872 12.3899 42.4839 13.4499C42.4672 13.5299 42.4439 13.6132 42.4172 13.6932C42.2206 14.2632 41.7339 14.8165 41.0772 15.1232C40.1439 15.6399 38.9439 15.6399 38.0139 15.1232C37.0806 14.6065 36.1472 14.6065 35.2139 15.1232C34.2839 15.6399 33.3506 15.6399 32.4172 15.1232C31.4839 14.6065 30.5539 14.6065 29.6206 15.1232C28.6872 15.6399 27.7539 15.6399 26.8239 15.1232C25.8906 14.6065 24.9572 14.6065 24.0239 15.1232C23.1706 15.5732 22.3172 14.6732 22.3272 13.7365C22.3272 13.6832 22.3272 13.6265 22.3372 13.5732C22.4172 12.8699 22.8572 12.2699 23.6772 11.8865C24.6106 11.3699 25.8906 11.3699 26.8239 11.8865Z" fill="#FED607"/><path d="M41.178 25.0332V25.1299L33.0013 34.5165H29.058H28.6113L36.788 25.1299V25.0332H41.178Z" fill="#F25730"/><path d="M36.7874 25.1299L28.6107 34.5165H24.6707H24.2207L32.3974 25.1299V25.0332H36.7874V25.1299Z" fill="#FFFAF0"/><path d="M34.9407 53.1331V56.3365H27.2207V53.1331V49.6365H34.9407V53.1331Z" fill="#0185FF"/><path d="M34.9407 48.1631H27.2207V49.6364H34.9407V48.1631Z" fill="#002140"/><path d="M34.9407 40.9998H27.2207V48.1631H34.9407V40.9998Z" fill="#0185FF"/><path d="M37.8312 34.7665C37.5945 37.5598 33.4512 37.4765 33.4512 34.5132H37.8412C37.8412 34.5999 37.8378 34.6832 37.8312 34.7665Z" fill="#FFFAF0"/><path d="M32.3977 25.1299L24.2211 34.5165H20.2811H19.8311L28.0077 25.1299V25.0332H32.3977V25.1299Z" fill="#F25730"/><path d="M33.4476 34.5166C33.4476 37.5633 29.0576 37.5633 29.0576 34.5166H33.4476Z" fill="#F25730"/><path d="M27.2208 53.1331H16.8574V56.3364H27.2208V53.1331Z" fill="#0164BF"/><path d="M25.5212 38.2332V41.6632H25.4012L18.3945 48.6665V43.0898L23.2545 38.2332H25.5212Z" fill="#8DC8FF"/><path d="M25.5212 41.6631V48.6664H18.3945L25.4012 41.6631H25.5212Z" fill="#0185FF"/><path d="M29.058 34.5166C29.058 37.5633 24.668 37.5633 24.668 34.5166H29.058Z" fill="#FFFAF0"/><path d="M23.771 25.0332V25.1299L15.5943 34.5165H11.501L19.6776 25.1299L19.7643 25.0332H20.531H22.4743H23.051H23.771Z" fill="#F25730"/><path d="M23.2545 38.2332L18.3945 43.0898V38.2332H23.2545Z" fill="#0185FF"/><path d="M24.2212 34.5166H24.6712C24.6712 37.5633 20.2812 37.5633 20.2812 34.5166H24.2212Z" fill="#F25730"/><path d="M20.2806 34.5166C20.2806 36.6133 18.2073 37.2666 16.9106 36.4833C16.3206 36.1233 15.8906 35.4699 15.8906 34.5166H20.2806Z" fill="#FFFAF0"/><path d="M24.6708 34.5165C24.6708 37.5632 29.0608 37.5632 29.0608 34.5165C29.0608 37.5632 33.4507 37.5632 33.4507 34.5165C33.4507 37.4765 37.5941 37.5632 37.8307 34.7699H42.8774C43.8941 34.7699 43.8941 33.2865 42.8774 33.2865H38.9441L38.9241 33.2732L45.8707 25.3032V53.1399H34.9407V41.0032H27.2208V53.1399H16.8574V36.6332L16.9108 36.4832C18.2074 37.2699 20.2808 36.6132 20.2808 34.5165C20.2808 37.5632 24.6708 37.5632 24.6708 34.5165ZM43.8674 48.6699V38.2332H36.7441V48.6699H43.8674ZM25.5208 48.6699V38.2332H18.3974V48.6699H25.5208Z" fill="#FFA75A"/><path d="M28.0081 25.0332V25.1299L19.8314 34.5165H15.8914H15.5947L23.7714 25.1299V25.0332H28.0081Z" fill="#FFFAF0"/><path d="M15.5943 34.5166H15.891C15.891 37.5633 11.501 37.5633 11.501 34.5166H15.5943Z" fill="#F25730"/><path d="M16.8574 56.3364H27.2208H34.9407H45.8707H57.2774" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M57.2773 25.0332V53.1332V56.3365" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.7646 25.0332H20.5313H22.4746H23.0513H23.7713H28.008H32.398H36.788H41.178H43.008H44.9513H45.8713H49.0946H51.148H57.278" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M45.8711 25.0332V25.2965V53.1332V56.3365" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.6776 25.1299L11.501 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.7714 25.1299L15.5947 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M28.0077 25.1299L19.8311 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M32.3974 25.1299L24.2207 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.788 25.1299L28.6113 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M41.1776 25.1299L33.001 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M46.0175 25.1299L45.8708 25.2965L38.9242 33.2699L37.8408 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M37.841 34.5166H33.4476H33.001H29.0576H28.611H24.671H24.221H20.281H19.831H15.891H15.5943H11.501" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.891 34.5166C15.891 37.5633 11.501 37.5633 11.501 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.2806 34.5166C20.2806 36.6133 18.2073 37.2666 16.9106 36.4833C16.3206 36.1233 15.8906 35.4699 15.8906 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M24.6712 34.5166C24.6712 37.5633 20.2812 37.5633 20.2812 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.058 34.5166C29.058 37.5633 24.668 37.5633 24.668 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M33.4476 34.5166C33.4476 37.5633 29.0576 37.5633 29.0576 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M37.8412 34.5166C37.8412 34.6033 37.8378 34.6866 37.8312 34.7699C37.5945 37.5633 33.4512 37.4799 33.4512 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.8574 56.3365V53.1332V36.6299" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M37.8408 34.7666H42.8775" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M38.9443 33.2832H42.8777" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M42.8779 34.7665C43.8946 34.7665 43.8946 33.2832 42.8779 33.2832" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M34.9414 53.1331H45.8714H57.2781" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.8574 53.1331H27.2208" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.2207 56.3364V53.1331V49.6364V48.1631V40.9998" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M34.9414 56.3364V53.1331V49.6364V48.1631V40.9998" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.2207 40.9998H34.9407" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.7412 38.2332V43.0898V48.6665" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M43.8643 38.2332V41.6632V48.6665" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.7412 38.2332H41.5979H43.8645" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.7412 48.6665H43.8645" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.3945 38.2332V43.0898V48.6665" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M25.5205 38.2332V41.6632V48.6665" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.3945 38.2332H23.2545H25.5212" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.3945 48.6665H25.5212" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.2207 48.1631H34.9407" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.2207 49.6365H34.9407" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M37.9614 16.6365H22.9414" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.1546 25.02C23.1213 25.02 23.088 25.02 23.0513 25.02C22.8513 25.02 22.6646 25.0066 22.4813 24.9766C21.6913 24.8566 21.0546 24.4833 20.568 23.9566C19.5846 22.89 19.2346 21.1966 19.5413 19.7066C19.8746 18.07 20.998 16.68 22.938 16.6333" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M43.4643 22.7431C42.2009 22.7431 41.9309 21.7298 41.6976 20.5298C41.3576 18.7831 41.1009 16.6365 37.9609 16.6365" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M24.0273 15.1265C24.9607 14.6098 25.894 14.6098 26.8273 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.8242 15.1265C27.7542 15.6431 28.6876 15.6431 29.6209 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.6211 15.1265C30.5544 14.6098 31.4844 14.6098 32.4178 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M32.418 15.1265C33.3513 15.6431 34.2846 15.6431 35.2146 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M35.2139 15.1265C36.1472 14.6098 37.0805 14.6098 38.0139 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M38.0146 15.1265C38.9446 15.6431 40.1446 15.6431 41.078 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.6777 11.8865C24.6111 11.3699 25.8911 11.3699 26.8244 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.8242 11.8865C27.7542 12.4031 28.6876 12.4031 29.6209 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.6211 11.8865C30.5544 11.3699 31.4844 11.3699 32.4178 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M32.418 11.8865C33.3513 12.4031 34.2846 12.4031 35.2146 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M35.2139 11.8865C36.1472 11.3699 37.0805 11.3699 38.0139 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M38.0146 11.8865C38.9446 12.4031 39.878 12.4031 40.8113 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M41.9277 25.0198C42.3011 25.0198 42.6577 24.9931 42.9911 24.9331C43.7677 24.7964 44.4244 24.4898 44.9277 23.9764C45.1811 23.7198 45.3944 23.4098 45.5644 23.0431C45.7211 22.7031 45.8411 22.3131 45.9177 21.8665C45.9411 21.7365 45.9611 21.5998 45.9777 21.4598C46.0111 21.1698 46.0277 20.8631 46.0277 20.5298" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M40.8105 11.8865C41.7672 11.3831 42.6872 12.3898 42.4839 13.4498C42.4672 13.5298 42.4439 13.6131 42.4172 13.6931C42.2205 14.2631 41.7339 14.8165 41.0772 15.1231" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M24.0278 15.1266C23.1745 15.5766 22.3211 14.6766 22.3311 13.7399C22.3311 13.6866 22.3311 13.6299 22.3411 13.5766C22.4211 12.8732 22.8611 12.2732 23.6811 11.8899" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.4342 19.6899C17.2642 18.8766 16.3575 16.5332 17.2642 14.8232" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.2942 13.5964C19.3242 13.1864 17.9809 13.5964 17.2676 14.8231" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M45.1143 19.6899C45.3909 19.5866 45.6476 19.4566 45.8843 19.3066C47.4876 18.2866 48.0776 16.3132 47.2843 14.8232" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M43.2578 13.5964C45.2278 13.1864 46.5711 13.5964 47.2845 14.8231" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M45.1139 19.6899C44.1606 20.0566 42.9773 20.3133 41.6973 20.5299" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M46.0277 20.5298C46.0277 20.3298 46.011 20.1198 45.9877 19.9198C45.961 19.6931 45.9244 19.4798 45.8877 19.3098" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M45.9443 21.8699L49.0943 25.0199" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M46.0273 19.9131L51.1473 25.0331" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M42.4814 13.6999C42.8314 13.7065 42.8248 13.6832 43.2581 13.5999" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.2939 13.5964C22.2073 13.7631 21.9373 13.6898 22.3306 13.7364" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 440350895826..c8a14c7aba03 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -35,6 +35,7 @@ import ConciergeNew from '@assets/images/simple-illustrations/simple-illustratio
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
 import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg';
+import HotDogStand from '@assets/images/simple-illustrations/simple-illustration__hotdogstand.svg';
 import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg';
 import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
 import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
@@ -60,6 +61,7 @@ export {
     ConciergeExclamation,
     CreditCardsBlue,
     EmailAddress,
+    HotDogStand,
     InvoiceOrange,
     JewelBoxBlue,
     JewelBoxGreen,
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index 681224a411ff..305cffe6bd73 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -13,7 +13,7 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
     return (
         <Section
             title={translate('workspace.card.createAWorkspace')}
-            icon={Illustrations.CreditCardsNew}
+            icon={Illustrations.HotDogStand}
             iconPosition="top"
             subtitle={translate('workspace.card.createAWorkspaceCopy')}
             subtitleMuted

From bf42670a2067db6f832809789f4c34bbb24c0e20 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 12:38:17 +0100
Subject: [PATCH 08/20] Approved spanish translations

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

diff --git a/src/languages/es.ts b/src/languages/es.ts
index 1e7bd4fca3b3..7d6357e48860 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1514,8 +1514,8 @@ export default {
             benefit4: 'Límites personalizables',
             addWorkEmail: 'Añadir correo electrónico de trabajo',
             checkingDomain: '¡Un momento! Estamos todavía trabajando para habilitar tu Tarjeta Expensify. Vuelve aquí en unos minutos.',
-            createAWorkspace: 'Crear un espacio de trabajo',
-            createAWorkspaceCopy: 'Administre gastos comerciales, emita tarjetas, envíe facturas y más.',
+            createAWorkspace: 'Crea un espacio de trabajo',
+            createAWorkspaceCopy: 'Administra gastos de empresa, emite tarjetas, envía facturas y mucho más.',
             createAWorkspaceCTA: 'Comenzar',
         },
         reimburse: {

From d76eeef4b99ce6d0a3bf355add7691980b6a442b Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 12:44:23 +0100
Subject: [PATCH 09/20] Revert color changes

---
 src/styles/styles.ts         | 4 ----
 src/styles/themes/default.ts | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 45d13e528edd..983f1ba82caa 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -313,10 +313,6 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.appBG,
         },
 
-        bordersBG: {
-            backgroundColor: colors.darkBorders,
-        },
-
         h4: {
             fontFamily: fontFamily.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeLabel,
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index a09b2eb56888..519e818054e0 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -44,7 +44,7 @@ const darkTheme = {
     hoverComponentBG: colors.darkHighlightBackground,
     activeComponentBG: colors.darkBorders,
     signInSidebar: colors.green800,
-    sidebar: colors.darkAppBackground,
+    sidebar: colors.darkHighlightBackground,
     sidebarHover: colors.darkAppBackground,
     heading: colors.darkPrimaryText,
     textLight: colors.darkPrimaryText,

From 9146059cedc7132ce6bed0f6b1fc94d78ec70d48 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 13 Dec 2023 11:01:24 +0100
Subject: [PATCH 10/20] Make styles naming more general

---
 src/components/DatePicker/CalendarPicker/index.js |  2 +-
 src/components/MenuItem.js                        |  2 +-
 src/styles/styles.ts                              | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/DatePicker/CalendarPicker/index.js b/src/components/DatePicker/CalendarPicker/index.js
index a404c4746397..bbdeda6ef84f 100644
--- a/src/components/DatePicker/CalendarPicker/index.js
+++ b/src/components/DatePicker/CalendarPicker/index.js
@@ -236,7 +236,7 @@ class CalendarPicker extends React.PureComponent {
                                         <View
                                             style={[
                                                 this.props.themeStyles.calendarDayContainer,
-                                                isSelected ? this.props.themeStyles.calendarDayContainerSelected : {},
+                                                isSelected ? this.props.themeStyles.buttonDefaultBG : {},
                                                 !isDisabled ? this.props.StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {},
                                             ]}
                                         >
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index a56729f630d5..05898ba3e36d 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -339,7 +339,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         badgeStyles={[
                                             styles.alignSelfCenter,
                                             props.brickRoadIndicator ? styles.mr2 : undefined,
-                                            props.focused || isHovered || pressed ? styles.hoveredButton : {},
+                                            props.focused || isHovered || pressed ? styles.buttonHoveredBG : {},
                                         ]}
                                     />
                                 )}
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index fb851ecfcf54..b83a6d529344 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -936,10 +936,14 @@ const styles = (theme: ThemeColors) =>
             overflow: 'hidden',
         },
 
-        calendarDayContainerSelected: {
+        buttonDefaultBG: {
             backgroundColor: theme.buttonDefaultBG,
         },
 
+        buttonHoveredBG: {
+            backgroundColor: theme.buttonHoveredBG,
+        },
+
         autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>
             ({
                 height: lodashClamp(textInputHeight, minHeight, maxHeight),
@@ -1914,10 +1918,6 @@ const styles = (theme: ThemeColors) =>
             alignSelf: 'flex-end',
         },
 
-        hoveredButton: {
-            backgroundColor: theme.buttonHoveredBG,
-        },
-
         composerSizeButton: {
             alignSelf: 'center',
             height: 32,

From 73721d195fc17e9d6db409bfb71adf4a6e098cfd Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 13 Dec 2023 11:01:51 +0100
Subject: [PATCH 11/20] Card layout as const

---
 src/components/Section.js                     | 34 ++++++++-----------
 .../card/WorkspaceCardCreateAWorkspace.tsx    |  4 +--
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/components/Section.js b/src/components/Section.js
index 53e7f4af1bb5..f2bf72006d07 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -7,6 +7,11 @@ import MenuItemList from './MenuItemList';
 import menuItemPropTypes from './menuItemPropTypes';
 import Text from './Text';
 
+const CARD_LAYOUT = {
+    ICON_ON_TOP: 'iconOnTop',
+    ICON_ON_RIGHT: 'iconOnRight',
+};
+
 const propTypes = {
     /** An array of props that are pass to individual MenuItem components */
     menuItems: PropTypes.arrayOf(PropTypes.shape(menuItemPropTypes)),
@@ -23,7 +28,9 @@ const propTypes = {
     /** Icon component */
     IconComponent: PropTypes.func,
 
-    iconPosition: PropTypes.oneOf(['top', 'right']),
+    /** Card layout that affects icon positioning, margins, sizes. */
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    cardLayout: PropTypes.oneOf(Object.values(CARD_LAYOUT)),
 
     /** Contents to display inside the section */
     children: PropTypes.node,
@@ -63,7 +70,7 @@ const defaultProps = {
     children: null,
     icon: null,
     IconComponent: null,
-    iconPosition: 'right',
+    cardLayout: CARD_LAYOUT.ICON_ON_RIGHT,
     containerStyles: [],
     iconContainerStyles: [],
     titleStyles: [],
@@ -96,27 +103,13 @@ function IconSection({icon, IconComponent, iconContainerStyles}) {
     );
 }
 
-function Section({
-    children,
-    childrenStyles,
-    containerStyles,
-    icon,
-    IconComponent,
-    iconPosition,
-    iconContainerStyles,
-    menuItems,
-    subtitle,
-    subtitleStyles,
-    subtitleMuted,
-    title,
-    titleStyles,
-}) {
+function Section({children, childrenStyles, containerStyles, icon, IconComponent, cardLayout, iconContainerStyles, menuItems, subtitle, subtitleStyles, subtitleMuted, title, titleStyles}) {
     const styles = useThemeStyles();
 
     return (
         <>
             <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
-                {iconPosition === 'top' && (
+                {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
                     <IconSection
                         icon={icon}
                         IconComponent={IconComponent}
@@ -127,7 +120,7 @@ function Section({
                     <View style={[styles.flexShrink1]}>
                         <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
                     </View>
-                    {iconPosition === 'right' && (
+                    {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
                         <IconSection
                             icon={icon}
                             IconComponent={IconComponent}
@@ -137,7 +130,7 @@ function Section({
                 </View>
 
                 {Boolean(subtitle) && (
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt4, styles.mh1, ...subtitleStyles]}>
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt4, ...subtitleStyles]}>
                         <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
                     </View>
                 )}
@@ -156,4 +149,5 @@ Section.displayName = 'Section';
 Section.propTypes = propTypes;
 Section.defaultProps = defaultProps;
 
+export {CARD_LAYOUT};
 export default Section;
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index 305cffe6bd73..5f4baa548583 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from '@components/Button';
 import * as Illustrations from '@components/Icon/Illustrations';
-import Section from '@components/Section';
+import Section, {CARD_LAYOUT} from '@components/Section';
 import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
 
@@ -14,7 +14,7 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
         <Section
             title={translate('workspace.card.createAWorkspace')}
             icon={Illustrations.HotDogStand}
-            iconPosition="top"
+            cardLayout={CARD_LAYOUT.ICON_ON_TOP}
             subtitle={translate('workspace.card.createAWorkspaceCopy')}
             subtitleMuted
             containerStyles={[styles.highlightBG]}

From 71783064dcb1139b7c64374abc9e4235277d8863 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 13 Dec 2023 11:02:12 +0100
Subject: [PATCH 12/20] Medium sized button

---
 src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index 5f4baa548583..7915f8b4fb9d 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -23,6 +23,7 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
                 text={translate('workspace.card.createAWorkspaceCTA')}
                 style={styles.mt5}
                 success
+                medium
             />
         </Section>
     );

From 04d59f3d7fa4dbb1ef498548bc0d70d4a535808b Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 13 Dec 2023 11:24:15 +0100
Subject: [PATCH 13/20] Empty workspace translations

---
 src/languages/en.ts                                       | 8 +++-----
 src/languages/es.ts                                       | 8 +++-----
 .../workspace/card/WorkspaceCardCreateAWorkspace.tsx      | 6 +++---
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index acd8257f534b..7983d673ef0f 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1470,8 +1470,9 @@ export default {
             mustBeOnlineToViewMembers: 'You must be online in order to view members of this workspace.',
         },
         emptyWorkspace: {
-            title: 'Create a new workspace',
-            subtitle: "Workspaces are where you'll chat with your team, reimburse expenses, issue cards, send invoices, pay bills, and more — all in one place.",
+            title: 'Create a workspace',
+            subtitle: 'Manage business expenses, issue cards, send invoices, and more.',
+            createAWorkspaceCTA: 'Get Started',
             features: {
                 trackAndCollect: 'Track and collect receipts',
                 companyCards: 'Company credit cards',
@@ -1507,9 +1508,6 @@ export default {
             benefit4: 'Customizable limits',
             addWorkEmail: 'Add work email address',
             checkingDomain: 'Hang tight! We are still working on enabling your Expensify Cards. Check back here in a few minutes.',
-            createAWorkspace: 'Create a workspace',
-            createAWorkspaceCopy: 'Manage business expenses, issue cards, send invoices, and more.',
-            createAWorkspaceCTA: 'Get Started',
         },
         reimburse: {
             captureReceipts: 'Capture receipts',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 58fcad054a8d..3d855d2dc8d2 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1493,8 +1493,9 @@ export default {
             mustBeOnlineToViewMembers: 'Debes estar en línea para poder ver los miembros de este espacio de trabajo.',
         },
         emptyWorkspace: {
-            title: 'Crear un nuevo espacio de trabajo',
-            subtitle: 'En los espacios de trabajo es donde puedes chatear con tu equipo, reembolsar gastos, emitir tarjetas, enviar y pagar facturas y mas — todo en un mismo lugar',
+            title: 'Crea un espacio de trabajo',
+            subtitle: 'Administra gastos de empresa, emite tarjetas, envía facturas y mucho más.',
+            createAWorkspaceCTA: 'Comenzar',
             features: {
                 trackAndCollect: 'Organiza recibos',
                 companyCards: 'Tarjetas de crédito corporativas',
@@ -1531,9 +1532,6 @@ export default {
             benefit4: 'Límites personalizables',
             addWorkEmail: 'Añadir correo electrónico de trabajo',
             checkingDomain: '¡Un momento! Estamos todavía trabajando para habilitar tu Tarjeta Expensify. Vuelve aquí en unos minutos.',
-            createAWorkspace: 'Crea un espacio de trabajo',
-            createAWorkspaceCopy: 'Administra gastos de empresa, emite tarjetas, envía facturas y mucho más.',
-            createAWorkspaceCTA: 'Comenzar',
         },
         reimburse: {
             captureReceipts: 'Captura recibos',
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index 7915f8b4fb9d..c69ad8da7c8b 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -12,15 +12,15 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
 
     return (
         <Section
-            title={translate('workspace.card.createAWorkspace')}
+            title={translate('workspace.emptyWorkspace.title')}
             icon={Illustrations.HotDogStand}
             cardLayout={CARD_LAYOUT.ICON_ON_TOP}
-            subtitle={translate('workspace.card.createAWorkspaceCopy')}
+            subtitle={translate('workspace.emptyWorkspace.subtitle')}
             subtitleMuted
             containerStyles={[styles.highlightBG]}
         >
             <Button
-                text={translate('workspace.card.createAWorkspaceCTA')}
+                text={translate('workspace.emptyWorkspace.createAWorkspaceCTA')}
                 style={styles.mt5}
                 success
                 medium

From cd85712455d4cfcd4d15eba170d8a4950db1f330 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 19:26:35 +0100
Subject: [PATCH 14/20] Change import path

---
 src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index c69ad8da7c8b..d8f94dfe244f 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -3,7 +3,7 @@ import Button from '@components/Button';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Section, {CARD_LAYOUT} from '@components/Section';
 import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type WorkspaceCardCreateAWorkspaceProps = WithLocalizeProps;
 

From 9da1c8e0e486c30646e9aee236a55b48c34c82a8 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 17:24:31 +0100
Subject: [PATCH 15/20] Only apply mh1 on single layout

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

diff --git a/src/components/Section.js b/src/components/Section.js
index 96fdeea42891..43b63fa6310f 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -116,7 +116,7 @@ function Section({children, childrenStyles, containerStyles, icon, IconComponent
                         iconContainerStyles={[iconContainerStyles, styles.alignSelfStart, styles.mb3]}
                     />
                 )}
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mh1, ...titleStyles]}>
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, ...titleStyles]}>
                     <View style={[styles.flexShrink1]}>
                         <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
                     </View>

From 5d3d93af6e770ee82f0bfed7637a9f31b31ae932 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 17:24:56 +0100
Subject: [PATCH 16/20] Bool instead of boolean

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

diff --git a/src/components/Section.js b/src/components/Section.js
index 43b63fa6310f..df74e52a1c41 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -48,7 +48,7 @@ const propTypes = {
     subtitleStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Whether the subtitle should have a muted style */
-    subtitleMuted: PropTypes.boolean,
+    subtitleMuted: PropTypes.bool,
 
     /** Customize the Section container */
     // eslint-disable-next-line react/forbid-prop-types

From 0cc848e37fdb3ddab359ca2dfe63709093f6570b Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 17:26:07 +0100
Subject: [PATCH 17/20] Use useLocalize instead of withLocalize

---
 .../workspace/card/WorkspaceCardCreateAWorkspace.tsx     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index d8f94dfe244f..9e45bd143e7e 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -2,13 +2,12 @@ import React from 'react';
 import Button from '@components/Button';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Section, {CARD_LAYOUT} from '@components/Section';
-import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-type WorkspaceCardCreateAWorkspaceProps = WithLocalizeProps;
-
-function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspaceProps) {
+function WorkspaceCardCreateAWorkspace() {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
 
     return (
         <Section
@@ -31,4 +30,4 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
 
 WorkspaceCardCreateAWorkspace.displayName = 'WorkspaceCardNoVBAView';
 
-export default withLocalize(WorkspaceCardCreateAWorkspace);
+export default WorkspaceCardCreateAWorkspace;

From 91b8e91a05cf207b114e4123c43f03d5bef46a8c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 17:29:38 +0100
Subject: [PATCH 18/20] Spread array of styles

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

diff --git a/src/components/Section.js b/src/components/Section.js
index df74e52a1c41..1e2816385956 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -113,7 +113,7 @@ function Section({children, childrenStyles, containerStyles, icon, IconComponent
                     <IconSection
                         icon={icon}
                         IconComponent={IconComponent}
-                        iconContainerStyles={[iconContainerStyles, styles.alignSelfStart, styles.mb3]}
+                        iconContainerStyles={[...iconContainerStyles, styles.alignSelfStart, styles.mb3]}
                     />
                 )}
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, ...titleStyles]}>

From 5e800a2289c1cd2c4a1d7a19ab53b0791a776f3d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 17:41:52 +0100
Subject: [PATCH 19/20] Split Section to index.js and IconSection.js

---
 src/components/Section/IconSection.js |  40 +++++++++
 src/components/Section/index.js       | 121 ++++++++++++++++++++++++++
 2 files changed, 161 insertions(+)
 create mode 100644 src/components/Section/IconSection.js
 create mode 100644 src/components/Section/index.js

diff --git a/src/components/Section/IconSection.js b/src/components/Section/IconSection.js
new file mode 100644
index 000000000000..21dc458f2c76
--- /dev/null
+++ b/src/components/Section/IconSection.js
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+const iconSectionPropTypes = {
+    icon: PropTypes.icon,
+    IconComponent: PropTypes.IconComponent,
+    iconContainerStyles: PropTypes.iconContainerStyles,
+};
+
+const defaultIconSectionPropTypes = {
+    icon: null,
+    IconComponent: null,
+    iconContainerStyles: [],
+};
+
+function IconSection({icon, IconComponent, iconContainerStyles}) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
+            {Boolean(icon) && (
+                <Icon
+                    src={icon}
+                    height={68}
+                    width={68}
+                />
+            )}
+            {Boolean(IconComponent) && <IconComponent />}
+        </View>
+    );
+}
+
+IconSection.displayName = 'IconSection';
+IconSection.propTypes = iconSectionPropTypes;
+IconSection.defaultProps = defaultIconSectionPropTypes;
+
+export default IconSection;
diff --git a/src/components/Section/index.js b/src/components/Section/index.js
new file mode 100644
index 000000000000..cadadfe94b39
--- /dev/null
+++ b/src/components/Section/index.js
@@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import MenuItemList from '@components/MenuItemList';
+import menuItemPropTypes from '@components/menuItemPropTypes';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import IconSection from './IconSection';
+
+const CARD_LAYOUT = {
+    ICON_ON_TOP: 'iconOnTop',
+    ICON_ON_RIGHT: 'iconOnRight',
+};
+
+const propTypes = {
+    /** An array of props that are pass to individual MenuItem components */
+    menuItems: PropTypes.arrayOf(PropTypes.shape(menuItemPropTypes)),
+
+    /** The text to display in the title of the section */
+    title: PropTypes.string.isRequired,
+
+    /** The text to display in the subtitle of the section */
+    subtitle: PropTypes.string,
+
+    /** The icon to display along with the title */
+    icon: PropTypes.func,
+
+    /** Icon component */
+    IconComponent: PropTypes.func,
+
+    /** Card layout that affects icon positioning, margins, sizes. */
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    cardLayout: PropTypes.oneOf(Object.values(CARD_LAYOUT)),
+
+    /** Contents to display inside the section */
+    children: PropTypes.node,
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    titleStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    subtitleStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Whether the subtitle should have a muted style */
+    subtitleMuted: PropTypes.bool,
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    childrenStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Icon container */
+    // eslint-disable-next-line react/forbid-prop-types
+    iconContainerStyles: PropTypes.arrayOf(PropTypes.object),
+};
+
+const defaultProps = {
+    menuItems: null,
+    children: null,
+    icon: null,
+    IconComponent: null,
+    cardLayout: CARD_LAYOUT.ICON_ON_RIGHT,
+    containerStyles: [],
+    iconContainerStyles: [],
+    titleStyles: [],
+    subtitleStyles: [],
+    subtitleMuted: false,
+    childrenStyles: [],
+    subtitle: null,
+};
+
+function Section({children, childrenStyles, containerStyles, icon, IconComponent, cardLayout, iconContainerStyles, menuItems, subtitle, subtitleStyles, subtitleMuted, title, titleStyles}) {
+    const styles = useThemeStyles();
+
+    return (
+        <>
+            <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
+                {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
+                    <IconSection
+                        icon={icon}
+                        IconComponent={IconComponent}
+                        iconContainerStyles={[...iconContainerStyles, styles.alignSelfStart, styles.mb3]}
+                    />
+                )}
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, ...titleStyles]}>
+                    <View style={[styles.flexShrink1]}>
+                        <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
+                    </View>
+                    {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
+                        <IconSection
+                            icon={icon}
+                            IconComponent={IconComponent}
+                            iconContainerStyles={iconContainerStyles}
+                        />
+                    )}
+                </View>
+
+                {Boolean(subtitle) && (
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt4, ...subtitleStyles]}>
+                        <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
+                    </View>
+                )}
+
+                <View style={[styles.w100, ...childrenStyles]}>{children}</View>
+
+                <View style={[styles.w100]}>{Boolean(menuItems) && <MenuItemList menuItems={menuItems} />}</View>
+            </View>
+        </>
+    );
+}
+Section.displayName = 'Section';
+Section.propTypes = propTypes;
+Section.defaultProps = defaultProps;
+
+export {CARD_LAYOUT};
+export default Section;

From 6fd3b5ab0f959dfe545d036b76ce4864aa664756 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 18:18:32 +0100
Subject: [PATCH 20/20] Drop Section.js after pushing it to a separate
 directory

---
 src/components/Section.js | 153 --------------------------------------
 1 file changed, 153 deletions(-)
 delete mode 100644 src/components/Section.js

diff --git a/src/components/Section.js b/src/components/Section.js
deleted file mode 100644
index 1e2816385956..000000000000
--- a/src/components/Section.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import useThemeStyles from '@hooks/useThemeStyles';
-import Icon from './Icon';
-import MenuItemList from './MenuItemList';
-import menuItemPropTypes from './menuItemPropTypes';
-import Text from './Text';
-
-const CARD_LAYOUT = {
-    ICON_ON_TOP: 'iconOnTop',
-    ICON_ON_RIGHT: 'iconOnRight',
-};
-
-const propTypes = {
-    /** An array of props that are pass to individual MenuItem components */
-    menuItems: PropTypes.arrayOf(PropTypes.shape(menuItemPropTypes)),
-
-    /** The text to display in the title of the section */
-    title: PropTypes.string.isRequired,
-
-    /** The text to display in the subtitle of the section */
-    subtitle: PropTypes.string,
-
-    /** The icon to display along with the title */
-    icon: PropTypes.func,
-
-    /** Icon component */
-    IconComponent: PropTypes.func,
-
-    /** Card layout that affects icon positioning, margins, sizes. */
-    // eslint-disable-next-line rulesdir/prefer-underscore-method
-    cardLayout: PropTypes.oneOf(Object.values(CARD_LAYOUT)),
-
-    /** Contents to display inside the section */
-    children: PropTypes.node,
-
-    /** Customize the Section container */
-    // eslint-disable-next-line react/forbid-prop-types
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Customize the Section container */
-    // eslint-disable-next-line react/forbid-prop-types
-    titleStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Customize the Section container */
-    // eslint-disable-next-line react/forbid-prop-types
-    subtitleStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Whether the subtitle should have a muted style */
-    subtitleMuted: PropTypes.bool,
-
-    /** Customize the Section container */
-    // eslint-disable-next-line react/forbid-prop-types
-    childrenStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Customize the Icon container */
-    // eslint-disable-next-line react/forbid-prop-types
-    iconContainerStyles: PropTypes.arrayOf(PropTypes.object),
-};
-
-const iconSectionPropTypes = {
-    icon: propTypes.icon,
-    IconComponent: propTypes.IconComponent,
-    iconContainerStyles: propTypes.iconContainerStyles,
-};
-
-const defaultProps = {
-    menuItems: null,
-    children: null,
-    icon: null,
-    IconComponent: null,
-    cardLayout: CARD_LAYOUT.ICON_ON_RIGHT,
-    containerStyles: [],
-    iconContainerStyles: [],
-    titleStyles: [],
-    subtitleStyles: [],
-    subtitleMuted: false,
-    childrenStyles: [],
-    subtitle: null,
-};
-
-const defaultIconSectionPropTypes = {
-    icon: null,
-    IconComponent: null,
-    iconContainerStyles: [],
-};
-
-function IconSection({icon, IconComponent, iconContainerStyles}) {
-    const styles = useThemeStyles();
-
-    return (
-        <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
-            {Boolean(icon) && (
-                <Icon
-                    src={icon}
-                    height={68}
-                    width={68}
-                />
-            )}
-            {Boolean(IconComponent) && <IconComponent />}
-        </View>
-    );
-}
-
-function Section({children, childrenStyles, containerStyles, icon, IconComponent, cardLayout, iconContainerStyles, menuItems, subtitle, subtitleStyles, subtitleMuted, title, titleStyles}) {
-    const styles = useThemeStyles();
-
-    return (
-        <>
-            <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
-                {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
-                    <IconSection
-                        icon={icon}
-                        IconComponent={IconComponent}
-                        iconContainerStyles={[...iconContainerStyles, styles.alignSelfStart, styles.mb3]}
-                    />
-                )}
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, ...titleStyles]}>
-                    <View style={[styles.flexShrink1]}>
-                        <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
-                    </View>
-                    {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
-                        <IconSection
-                            icon={icon}
-                            IconComponent={IconComponent}
-                            iconContainerStyles={iconContainerStyles}
-                        />
-                    )}
-                </View>
-
-                {Boolean(subtitle) && (
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt4, ...subtitleStyles]}>
-                        <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
-                    </View>
-                )}
-
-                <View style={[styles.w100, ...childrenStyles]}>{children}</View>
-
-                <View style={[styles.w100]}>{Boolean(menuItems) && <MenuItemList menuItems={menuItems} />}</View>
-            </View>
-        </>
-    );
-}
-IconSection.displayName = 'IconSection';
-IconSection.propTypes = iconSectionPropTypes;
-IconSection.defaultProps = defaultIconSectionPropTypes;
-Section.displayName = 'Section';
-Section.propTypes = propTypes;
-Section.defaultProps = defaultProps;
-
-export {CARD_LAYOUT};
-export default Section;