From 6ed9bcbdca840da6265d2a489cc2450e13fa9c40 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 17:01:08 +0100
Subject: [PATCH 01/53] Add border radius 3 style

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

diff --git a/src/styles/utilities/borders.ts b/src/styles/utilities/borders.ts
index 5d5110f858e4..9cd02dcd22ae 100644
--- a/src/styles/utilities/borders.ts
+++ b/src/styles/utilities/borders.ts
@@ -12,6 +12,10 @@ export default {
         borderRadius: 8,
     },
 
+    br3: {
+        borderRadius: 12,
+    },
+
     br4: {
         borderRadius: 16,
     },

From 4346c84849c43a6deef3c5a33781ecc284ab0f40 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 17:01:40 +0100
Subject: [PATCH 02/53] Create WorkspacesListRow

---
 src/pages/workspace/WorkspacesListPage.js | 22 ++++++----------------
 src/pages/workspace/WorkspacesListRow.tsx | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+), 16 deletions(-)
 create mode 100755 src/pages/workspace/WorkspacesListRow.tsx

diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index cf258b462285..c031e061fbe2 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Button from '@components/Button';
@@ -28,6 +29,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
+import WorkspacesListRow from './WorkspacesListRow';
 
 const propTypes = {
     /** The list of this user's policies */
@@ -182,20 +184,7 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
     }, [reimbursementAccount.errors, policies, isOffline, theme.textLight, allPolicyMembers]);
 
     return (
-        <IllustratedHeaderPageLayout
-            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.WORKSPACES].backgroundColor}
-            illustration={LottieAnimations.WorkspacePlanet}
-            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
-            title={translate('common.workspaces')}
-            footer={
-                <Button
-                    accessibilityLabel={translate('workspace.new.newWorkspace')}
-                    success
-                    text={translate('workspace.new.newWorkspace')}
-                    onPress={() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()}
-                />
-            }
-        >
+        <View style={[styles.dFlex, styles.gap3]}>
             {_.isEmpty(workspaces) ? (
                 <FeatureList
                     menuItems={workspaceFeatures}
@@ -203,9 +192,10 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
                     description="workspace.emptyWorkspace.subtitle"
                 />
             ) : (
-                _.map(workspaces, (item, index) => getMenuItem(item, index))
+                // _.map(workspaces, (item, index) => getMenuItem(item, index))
+                _.map(workspaces, (item) => <WorkspacesListRow title={item.title} />)
             )}
-        </IllustratedHeaderPageLayout>
+        </View>
     );
 }
 
diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
new file mode 100755
index 000000000000..76a31a28ec5d
--- /dev/null
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import useThemeStyles from '@styles/useThemeStyles';
+
+type WorkspacesListRowProps = {
+    title: string;
+};
+
+function WorkspacesListRow({title}: WorkspacesListRowProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.highlightBG, styles.p5, styles.br3]}>
+            <Text>{title}</Text>
+        </View>
+    );
+}
+
+export default WorkspacesListRow;

From c1e3d60e1124594d7e29df7c5866bef2fc8db890 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 17:13:17 +0100
Subject: [PATCH 03/53] Add Avatar; style Title

---
 src/pages/workspace/WorkspacesListPage.js |  8 +++++++-
 src/pages/workspace/WorkspacesListRow.tsx | 19 +++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index c031e061fbe2..16ff9bc90737 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -193,7 +193,13 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
                 />
             ) : (
                 // _.map(workspaces, (item, index) => getMenuItem(item, index))
-                _.map(workspaces, (item) => <WorkspacesListRow title={item.title} />)
+                _.map(workspaces, (item) => (
+                    <WorkspacesListRow
+                        title={item.title}
+                        icon={item.icon}
+                        fallbackIcon={item.fallbackIcon}
+                    />
+                ))
             )}
         </View>
     );
diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 76a31a28ec5d..453da18a0c31 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -1,18 +1,33 @@
 import React from 'react';
 import {View} from 'react-native';
+import Avatar from '@components/Avatar';
 import Text from '@components/Text';
+import {AvatarSource} from '@libs/UserUtils';
 import useThemeStyles from '@styles/useThemeStyles';
+import CONST from '@src/CONST';
 
 type WorkspacesListRowProps = {
     title: string;
+    icon?: AvatarSource | undefined;
+    fallbackIcon?: AvatarSource | undefined;
 };
 
-function WorkspacesListRow({title}: WorkspacesListRowProps) {
+function WorkspacesListRow({title, icon, fallbackIcon}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
 
     return (
         <View style={[styles.highlightBG, styles.p5, styles.br3]}>
-            <Text>{title}</Text>
+            <View style={[styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
+                <Avatar
+                    imageStyles={[styles.alignSelfCenter]}
+                    size={CONST.AVATAR_SIZE.DEFAULT}
+                    source={icon}
+                    fallbackIcon={fallbackIcon}
+                    name={title}
+                    type={CONST.ICON_TYPE_WORKSPACE}
+                />
+                <Text style={styles.textStrong}>{title}</Text>
+            </View>
         </View>
     );
 }

From 64b81433ca4a3814187d39e28f81b1c1e5da0901 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 10:46:36 +0100
Subject: [PATCH 04/53] Add unique key; rename and type props

---
 src/pages/workspace/WorkspacesListPage.js | 16 +++++++++++-----
 src/pages/workspace/WorkspacesListRow.tsx | 14 +++++++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index 16ff9bc90737..0860908523dd 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -183,8 +183,11 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
             .value();
     }, [reimbursementAccount.errors, policies, isOffline, theme.textLight, allPolicyMembers]);
 
+    console.log({policies});
+    console.log({workspaces});
+
     return (
-        <View style={[styles.dFlex, styles.gap3]}>
+        <View style={[styles.dFlex, styles.gap3, styles.m5]}>
             {_.isEmpty(workspaces) ? (
                 <FeatureList
                     menuItems={workspaceFeatures}
@@ -192,12 +195,15 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
                     description="workspace.emptyWorkspace.subtitle"
                 />
             ) : (
-                // _.map(workspaces, (item, index) => getMenuItem(item, index))
-                _.map(workspaces, (item) => (
+                _.map(workspaces, (item, index) => (
                     <WorkspacesListRow
+                        key={`${item.title}${index}`}
                         title={item.title}
-                        icon={item.icon}
-                        fallbackIcon={item.fallbackIcon}
+                        workspaceIcon={item.icon}
+                        fallbackWorkspaceIcon={item.fallbackIcon}
+                        owner={item.owner}
+                        workspaceType={item.type}
+                        item={item}
                     />
                 ))
             )}
diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 453da18a0c31..65309b009d3f 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -5,14 +5,18 @@ import Text from '@components/Text';
 import {AvatarSource} from '@libs/UserUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import { ValueOf } from 'type-fest';
 
 type WorkspacesListRowProps = {
     title: string;
-    icon?: AvatarSource | undefined;
-    fallbackIcon?: AvatarSource | undefined;
+    workspaceIcon?: AvatarSource | undefined;
+    fallbackWorkspaceIcon?: AvatarSource | undefined;
+    // owner
+    workspaceType: ValueOf<typeof CONST.POLICY.TYPE>;
+    item: any; // TBD
 };
 
-function WorkspacesListRow({title, icon, fallbackIcon}: WorkspacesListRowProps) {
+function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, owner, workspaceType, item}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
 
     return (
@@ -21,8 +25,8 @@ function WorkspacesListRow({title, icon, fallbackIcon}: WorkspacesListRowProps)
                 <Avatar
                     imageStyles={[styles.alignSelfCenter]}
                     size={CONST.AVATAR_SIZE.DEFAULT}
-                    source={icon}
-                    fallbackIcon={fallbackIcon}
+                    source={workspaceIcon}
+                    fallbackIcon={fallbackWorkspaceIcon}
                     name={title}
                     type={CONST.ICON_TYPE_WORKSPACE}
                 />

From e4aaaec7bb53aa20be146490afa2d939c431f187 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 11:28:22 +0100
Subject: [PATCH 05/53] Add icons

---
 .../simple-illustration__bigrocket.svg        | 100 ++++++++++++++++++
 .../simple-illustration__hotdogstand.svg      |  98 +++++++++++++++++
 .../simple-illustration__smallrocket.svg      |  45 ++++++++
 src/components/Icon/Illustrations.ts          |   6 ++
 4 files changed, 249 insertions(+)
 create mode 100644 assets/images/simple-illustrations/simple-illustration__bigrocket.svg
 create mode 100644 assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
 create mode 100644 assets/images/simple-illustrations/simple-illustration__smallrocket.svg

diff --git a/assets/images/simple-illustrations/simple-illustration__bigrocket.svg b/assets/images/simple-illustrations/simple-illustration__bigrocket.svg
new file mode 100644
index 000000000000..cab3fead6599
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__bigrocket.svg
@@ -0,0 +1,100 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.59769 24.1755C7.43452 24.0323 7.08154 24.1639 6.81015 24.4719C6.53709 24.7799 6.44884 25.1446 6.61201 25.2894C6.77352 25.4326 7.12816 25.3011 7.39956 24.993C7.67262 24.685 7.76086 24.3204 7.59936 24.1755H7.59769Z" fill="#5BE3AA"/>
+<path d="M9.20611 24.2787L7.8891 22.7236C6.68364 23.4329 5.7962 24.3903 5.24841 25.5175L6.56543 27.0726C7.20645 25.9671 8.02729 24.9897 9.20611 24.2787ZM6.80852 24.4719C7.08158 24.1639 7.43289 24.0323 7.59606 24.1755C7.75756 24.3204 7.66932 24.6867 7.39626 24.993C7.12487 25.3011 6.77189 25.4326 6.60872 25.2894C6.44555 25.1445 6.53546 24.7782 6.80685 24.4719H6.80852Z" fill="#03D47C"/>
+<path d="M6.56714 27.0727C7.20816 25.9671 8.02901 24.9898 9.20783 24.2788" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.25 25.5175C5.79778 24.3886 6.68523 23.4329 7.89069 22.7236" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.56701 27.0727L5.25 25.5176" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.20622 24.2787L7.89087 22.7236" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.6149 18.889C8.67151 19.0988 8.39845 19.3568 8.00218 19.4667C7.60591 19.5766 7.23795 19.4967 7.17967 19.2852C7.1214 19.0771 7.39612 18.8174 7.79073 18.7075C8.187 18.5976 8.55496 18.6775 8.61324 18.8873L8.6149 18.889Z" fill="#5BE3AA"/>
+<path d="M9.22947 17.3975L10.047 19.2623C8.87982 20.0332 7.63107 20.4111 6.37733 20.4061L5.55981 18.5413C6.83354 18.4514 8.07396 18.1434 9.22947 17.3975ZM8.00237 19.4671C8.39864 19.3572 8.67169 19.0991 8.61509 18.8893C8.55681 18.6795 8.18885 18.5996 7.79258 18.7095C7.39631 18.8194 7.12325 19.0774 7.18152 19.2872C7.2398 19.497 7.60776 19.5786 8.00403 19.4687L8.00237 19.4671Z" fill="#03D47C"/>
+<path d="M5.55798 18.5413C6.83171 18.4514 8.07213 18.1434 9.22764 17.3975" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.3772 20.4075C7.63094 20.4109 8.88135 20.0346 10.0469 19.2637" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.55798 18.541L6.37716 20.4075" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.22949 17.3975L10.047 19.2639" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.3483 26.1668C15.1335 26.1352 14.9087 26.4366 14.8454 26.8428C14.7822 27.2491 14.907 27.6054 15.1218 27.6387C15.3366 27.672 15.5614 27.369 15.623 26.9627C15.6863 26.5564 15.5614 26.2001 15.3483 26.1668Z" fill="#5BE3AA"/>
+<path d="M16.7551 25.3808L14.807 24.7881C14.1777 26.0368 13.9512 27.3222 14.1027 28.5676L16.0508 29.1604C15.9892 27.885 16.1507 26.6163 16.7551 25.3808ZM14.8437 26.8427C14.9069 26.4364 15.13 26.1351 15.3465 26.1667C15.5613 26.2 15.6845 26.5563 15.6212 26.9626C15.5596 27.3688 15.3348 27.6702 15.12 27.6386C14.9053 27.6053 14.7804 27.249 14.8437 26.8427Z" fill="#03D47C"/>
+<path d="M16.0509 29.1604C15.9893 27.885 16.1508 26.6163 16.7552 25.3809" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.1027 28.5676C13.9512 27.3222 14.1777 26.0385 14.807 24.7881" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.0508 29.1606L14.1028 28.5679" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.7552 25.3808L14.8071 24.7881" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5953 25.7305C11.7502 25.882 11.6453 26.2433 11.3589 26.538C11.0725 26.8327 10.7145 26.9493 10.558 26.7977C10.4032 26.6462 10.5081 26.2849 10.7945 25.9902C11.0808 25.6955 11.4388 25.579 11.5953 25.7305Z" fill="#5BE3AA"/>
+<path d="M11.3722 24.1338L13.0206 25.3309C12.4029 26.5863 11.5154 27.542 10.4298 28.1714L8.78149 26.9743C9.8371 26.2533 10.7512 25.3609 11.3722 24.1338ZM11.3589 26.5397C11.6453 26.245 11.7502 25.8837 11.5953 25.7322C11.4388 25.5807 11.0809 25.6972 10.7945 25.9919C10.5081 26.2866 10.4032 26.6479 10.558 26.7995C10.7146 26.951 11.0725 26.8361 11.3589 26.5397Z" fill="#03D47C"/>
+<path d="M8.78149 26.9743C9.8371 26.2533 10.7512 25.3609 11.3722 24.1338" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.4299 28.1715C11.5155 27.5422 12.403 26.5865 13.0207 25.3311" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.78149 26.9746L10.4298 28.1717" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.3721 24.1338L13.0204 25.3309" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.0665 20.7923C12.1981 20.9654 12.0416 21.3067 11.7152 21.5582C11.3889 21.8096 11.0176 21.8712 10.886 21.698C10.7545 21.5265 10.911 21.1835 11.2374 20.9338C11.5637 20.684 11.935 20.6208 12.0665 20.7923Z" fill="#5BE3AA"/>
+<path d="M12.0798 19.1787L13.5367 20.6023C12.7425 21.7545 11.7252 22.5703 10.5614 23.0365L9.10449 21.6129C10.2533 21.0535 11.2873 20.3026 12.0798 19.1787ZM11.7169 21.5563C12.0432 21.3066 12.1997 20.9636 12.0682 20.7904C11.935 20.6189 11.5637 20.6805 11.239 20.932C10.9127 21.1817 10.7562 21.5247 10.8877 21.6962C11.0209 21.8694 11.3922 21.8061 11.7169 21.5563Z" fill="#03D47C"/>
+<path d="M9.10278 21.6129C10.2516 21.0535 11.2856 20.3026 12.0781 19.1787" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5596 23.0368C11.7251 22.5706 12.7424 21.7547 13.5349 20.6025" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.10278 21.6133L10.5597 23.0369" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.0798 19.1787L13.5367 20.6023" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.0618 21.0486C14.8587 20.972 14.5757 21.2184 14.4275 21.6031C14.2793 21.986 14.3259 22.3606 14.529 22.4389C14.7322 22.5155 15.0152 22.2691 15.1617 21.8844C15.3099 21.5015 15.2633 21.1269 15.0618 21.0486Z" fill="#5BE3AA"/>
+<path d="M16.6053 20.5793L14.8271 19.5869C13.948 20.6742 13.4535 21.883 13.3369 23.1317L15.1151 24.124C15.3266 22.8636 15.7528 21.6598 16.6053 20.5793ZM14.4292 21.6032C14.5773 21.2203 14.8604 20.9722 15.0635 21.0488C15.2666 21.127 15.3116 21.5017 15.1634 21.8846C15.0169 22.2676 14.7322 22.5157 14.5307 22.4391C14.3276 22.3608 14.2826 21.9878 14.4292 21.6032Z" fill="#03D47C"/>
+<path d="M15.1152 24.1239C15.3267 22.8635 15.7529 21.6597 16.6054 20.5791" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3369 23.1297C13.4535 21.881 13.9463 20.6739 14.8271 19.585" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.1151 24.1239L13.3369 23.1299" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.6053 20.5793L14.8254 19.5869" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.595 8.23345C11.7235 8.22346 9.45748 9.97837 7.41452 14.4139C6.97496 15.3913 7.4678 15.7576 7.99061 14.8269C9.4991 12.5991 10.9027 11.1522 12.0515 11.5901C12.6526 11.8498 13.0705 12.4043 13.2071 13.4066L13.2304 13.4283C14.3409 12.2777 15.3799 11.2687 16.3656 10.3913L16.3456 10.368C15.6213 8.71963 14.6689 8.17684 13.5933 8.23345H13.595Z" fill="#F68DFE"/>
+<path d="M20.871 21.0672C22.0215 19.955 23.0322 18.916 23.9096 17.9304C26.2389 15.318 27.6442 13.0852 28.3085 10.8907C27.6159 11.5701 22.7241 6.67662 23.4068 5.9873C21.2123 6.65331 18.9812 8.05857 16.3672 10.3912C15.3832 11.2687 14.3425 12.2793 13.232 13.4282C12.9023 13.7695 12.566 14.1242 12.223 14.4905L12.218 14.4955C12.1031 14.6103 12.1847 14.8917 12.4295 15.3047C12.8257 15.969 13.6516 16.9697 14.7571 18.1518L14.7921 18.1768C16.1807 16.3037 17.2629 15.2447 18.6332 14.4205C19.9353 13.7179 20.543 14.3256 19.8021 15.5894C18.9762 16.9613 17.9173 18.0452 16.0392 19.4339C17.2296 20.5494 18.2803 21.4185 18.9762 21.8448C19.3991 22.1028 19.6888 22.1961 19.8037 22.0812C20.1717 21.7365 20.528 21.3986 20.8727 21.0672H20.871Z" fill="#8DC8FF"/>
+<path d="M10.9609 16.8032C10.6828 16.5268 10.3881 16.5851 10.2133 16.7599C9.66385 17.3094 10.8277 18.7246 12.9039 20.8009L12.9539 20.8342C13.0971 20.6177 13.2353 20.4079 13.3701 20.2065C11.5536 18.3966 10.4597 17.0579 10.9609 16.8032Z" fill="#002140"/>
+<path d="M12.4295 15.3047L12.4229 15.308C12.1465 15.5844 12.005 16.1056 12.2431 16.5901C12.2747 16.655 12.313 16.7183 12.358 16.7799C12.6693 17.2094 13.4019 18.0603 14.2044 18.8511L14.2727 18.8994C14.4509 18.6447 14.624 18.4066 14.7938 18.1768L14.7589 18.1518C13.6533 16.9697 12.8275 15.969 12.4312 15.3047H12.4295Z" fill="#002140"/>
+<path d="M10.9611 16.8027C10.4599 17.0574 11.5538 18.3977 13.3703 20.2043C13.6867 19.7331 13.9847 19.2985 14.2694 18.8972L14.2012 18.849C13.3986 18.0598 12.666 17.2073 12.3547 16.7777C12.3097 16.7161 12.2714 16.6528 12.2398 16.5879L12.2181 16.5979L11.0693 16.766C11.026 16.7727 10.9877 16.7844 10.9577 16.801L10.9611 16.8027Z" fill="#0185FF"/>
+<path d="M23.4069 5.98678C22.7243 6.67775 27.6161 11.5712 28.3087 10.8902C28.8248 9.18691 28.8964 7.50859 28.6084 5.69207V5.68541C26.7919 5.39737 25.1102 5.46896 23.4069 5.98678Z" fill="#0185FF"/>
+<path d="M18.6332 14.4202C17.2629 15.2444 16.179 16.3033 14.792 18.1764C14.6239 18.4045 14.449 18.6443 14.2709 18.899C13.9862 19.3003 13.6881 19.7349 13.3718 20.2077C13.2352 20.4092 13.0971 20.619 12.9555 20.8354C12.9272 20.8771 12.8989 20.9203 12.8706 20.9636C12.4843 21.4165 12.7524 21.7245 13.2586 21.3516C13.3002 21.3233 13.3401 21.2983 13.3818 21.27C13.6015 21.1251 13.8147 20.9836 14.0195 20.8471C14.484 20.5341 14.9136 20.2394 15.3115 19.9596C15.5662 19.7782 15.8093 19.6033 16.0391 19.4335C17.9156 18.0449 18.9762 16.961 19.802 15.589C20.5429 14.3253 19.9352 13.7176 18.6332 14.4202Z" fill="#F68DFE"/>
+<path d="M13.3819 21.2701L13.3969 21.2934C15.4715 23.3696 16.9117 24.5585 17.4612 24.009C17.6376 23.8342 17.6943 23.5395 17.4179 23.2614C17.1648 23.7643 15.8411 22.687 14.0329 20.8688L14.0179 20.8472C13.8131 20.9837 13.6 21.1252 13.3802 21.2701H13.3819Z" fill="#002140"/>
+<path d="M17.4179 23.2597C17.4329 23.2281 17.4462 23.1914 17.4528 23.1482L17.621 21.9993C17.5794 21.976 17.5377 21.9494 17.4961 21.9194C17.0666 21.6097 16.0992 20.7605 15.31 19.958C14.912 20.2377 14.4825 20.5324 14.0179 20.8455L14.0329 20.8671C15.8411 22.6836 17.1648 23.7609 17.4179 23.2597Z" fill="#0185FF"/>
+<path d="M15.3115 19.9597C16.1007 20.7623 17.0681 21.6114 17.4977 21.9211C17.5376 21.9511 17.5792 21.9777 17.6225 22.001C18.127 22.2857 18.6815 22.1442 18.9712 21.8545L18.9778 21.8445C18.2819 21.4183 17.2329 20.5491 16.0408 19.4336C15.811 19.6034 15.5679 19.7782 15.3132 19.9597H15.3115Z" fill="#002140"/>
+<path d="M23.9097 17.9304C23.0322 18.9161 22.0216 19.955 20.8711 21.0672C21.8734 21.2054 22.4278 21.6217 22.6876 22.2244C23.1255 23.3749 21.6802 24.7769 19.4508 26.2854C18.5201 26.8082 18.8864 27.301 19.8637 26.8614C24.2976 24.8185 26.0542 22.5524 26.0442 20.681C26.0991 19.6037 25.5564 18.653 23.9097 17.9287V17.9304Z" fill="#F68DFE"/>
+<path d="M22.6692 7.44043C20.553 8.27127 17.9573 10.156 13.8081 14.3502" stroke="#FFFAF0" stroke-width="1.665" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.8038 22.0825C20.1718 21.7378 20.5281 21.3998 20.8728 21.0685C22.0233 19.9562 23.0339 18.9173 23.9114 17.9316C26.2407 15.3192 27.646 13.0865 28.3103 10.892C28.8265 9.18869 28.8981 7.51036 28.61 5.69385" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.4067 5.98678C25.11 5.46896 26.79 5.39737 28.6082 5.68541C28.6082 5.68541 28.6115 5.68541 28.6132 5.68541" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.223 14.4919C12.566 14.1256 12.9023 13.771 13.232 13.4297C14.3426 12.2791 15.3815 11.2702 16.3672 10.3927C18.9812 8.0617 21.2123 6.65644 23.4068 5.98877" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.4977 21.9211C17.5376 21.9511 17.5793 21.9777 17.6226 22.001C18.127 22.2857 18.6815 22.1442 18.9712 21.8545" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3562 16.7814C12.3113 16.7198 12.273 16.6566 12.2414 16.5916C12.0033 16.1054 12.1448 15.586 12.4212 15.3096" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.621 22.001L17.4529 23.1482" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.033 20.8691C15.8411 22.6857 17.1648 23.7629 17.4179 23.2617C17.4329 23.2301 17.4462 23.1935 17.4529 23.1502" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3967 21.2935C15.4713 23.3697 16.9115 24.5585 17.461 24.0091" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.4612 24.0093C17.6377 23.8345 17.6943 23.5398 17.4179 23.2617H17.4163" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.2214 16.6016L11.0725 16.7697" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3719 20.2061C11.5554 18.3979 10.4615 17.0576 10.9627 16.8045C10.9926 16.7895 11.0309 16.7779 11.0742 16.7695" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.9056 20.8022C10.8294 18.7276 9.66556 17.3107 10.215 16.7612" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.2134 16.7612C10.3882 16.5847 10.6829 16.5264 10.961 16.8045H10.9626" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.2586 21.3518C12.7524 21.7231 12.4843 21.4167 12.8706 20.9639" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.2585 21.3514C13.3002 21.3231 13.3401 21.2982 13.3818 21.2699C13.6015 21.125 13.8147 20.9835 14.0194 20.8469C14.484 20.5339 14.9136 20.2392 15.3115 19.9595C15.5662 19.778 15.8093 19.6032 16.0391 19.4334C17.9155 18.0447 18.9761 16.9608 19.802 15.5889" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8706 20.9619C12.8989 20.9186 12.9272 20.8753 12.9555 20.8337C13.0987 20.6173 13.2369 20.4075 13.3718 20.206C13.6881 19.7331 13.9862 19.2986 14.2709 18.8973C14.449 18.6426 14.6222 18.4045 14.792 18.1747C16.1806 16.3016 17.2629 15.2426 18.6332 14.4185" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.8021 15.589C20.5431 14.3253 19.9353 13.7176 18.6333 14.4202" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.8037 22.0829C19.6889 22.1978 19.3991 22.1029 18.9762 21.8465C18.2803 21.4202 17.2313 20.5511 16.0392 19.4355" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.218 14.4971C12.1031 14.612 12.1847 14.8933 12.4295 15.3063C12.8257 15.9706 13.6516 16.9713 14.7571 18.1534" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.4977 21.9213C17.0681 21.6116 16.1007 20.7625 15.3115 19.96" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3562 16.7812C12.6676 17.2108 13.4002 18.0616 14.2027 18.8525" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.4508 26.2851C21.6786 24.7766 23.1255 23.373 22.6876 22.2241" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.8694 21.0669C21.8717 21.2051 22.4262 21.6213 22.6859 22.2241" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.8636 26.8631C24.2975 24.8201 26.0541 22.5541 26.0441 20.6826" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.9097 17.9297C25.5564 18.6523 26.0991 19.6047 26.0442 20.6819" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.4508 26.2852C18.5201 26.808 18.8864 27.3008 19.8637 26.8612" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.99219 14.8266C9.50068 12.5988 10.9043 11.152 12.0531 11.5898" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.2087 13.4064C13.0722 12.404 12.6543 11.8496 12.0532 11.5898" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.41455 14.4139C9.4575 9.98003 11.7236 8.22345 13.595 8.23344" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.3472 10.368C15.6229 8.71963 14.6706 8.17684 13.595 8.23345" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.9922 14.8265C7.46939 15.7572 6.97655 15.3893 7.41611 14.4136" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.3103 10.8891C27.6176 11.5701 22.7259 6.67662 23.4085 5.9873" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.7361 17.7905C26.3388 17.7905 26.3388 18.3649 25.7361 18.3649C24.6472 18.3649 24.0428 19.1925 24.0428 20.4279L24.0328 20.4395C24.0328 21.1721 23.5616 21.1721 23.5616 20.4395C23.5616 19.1125 22.8823 18.3749 21.8683 18.3749C21.2656 18.3749 21.2656 17.8005 21.8683 17.8005L21.8783 17.7889C22.8939 17.7889 23.5716 17.0513 23.5716 15.7243C23.5716 14.9917 24.0411 14.9917 24.0411 15.7243C24.0411 17.0513 24.7204 17.7889 25.7344 17.7889L25.7361 17.7905Z" fill="#FFFAF0"/>
+<path d="M22.0515 8.01833C22.8041 8.01833 22.8041 8.73428 22.0515 8.73428C20.6928 8.73428 19.9353 9.76824 19.9353 11.315L19.9236 11.33C19.9236 12.2474 19.3342 12.2474 19.3342 11.33C19.3342 9.67334 18.4867 8.74926 17.218 8.74926C16.4654 8.74926 16.4654 8.03331 17.218 8.03331L17.2297 8.01833C18.4984 8.01833 19.3459 7.09591 19.3459 5.43757C19.3459 4.52016 19.9336 4.52016 19.9336 5.43757C19.9336 7.09425 20.7828 8.01833 22.0498 8.01833H22.0515Z" fill="#FFFAF0"/>
+<path d="M17.2297 8.01825C18.4985 8.01825 19.3459 7.09584 19.3459 5.4375" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.0515 8.01825C20.7845 8.01825 19.9353 7.09584 19.9353 5.4375" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.3475 5.43757C19.3475 4.52016 19.9353 4.52016 19.9353 5.43757" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.9353 11.3151C19.9353 9.77001 20.6929 8.73438 22.0515 8.73438" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.0515 8.01855C22.8041 8.01855 22.8041 8.73451 22.0515 8.73451" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.218 8.74902C18.4867 8.74902 19.3342 9.67143 19.3342 11.3298" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.9236 11.3301C19.9236 12.2475 19.3342 12.2475 19.3342 11.3301" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.218 8.74915C16.4654 8.74915 16.4654 8.0332 17.218 8.0332" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.8784 17.7902C22.8941 17.7902 23.5717 17.0526 23.5717 15.7256" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.7363 17.7902C24.7206 17.7902 24.043 17.0526 24.043 15.7256" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.5717 15.7257C23.5717 14.9931 24.0412 14.9931 24.0412 15.7257" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.043 20.4277C24.043 19.1906 24.649 18.3647 25.7363 18.3647" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.7362 17.79C26.3389 17.79 26.3389 18.3645 25.7362 18.3645" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.8683 18.3745C22.8823 18.3745 23.5616 19.1121 23.5616 20.4391" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.033 20.4395C24.033 21.1721 23.5618 21.1721 23.5618 20.4395" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.8683 18.3747C21.2656 18.3747 21.2656 17.8003 21.8683 17.8003" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
+</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..29549e8fb754
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
@@ -0,0 +1,98 @@
+<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>
diff --git a/assets/images/simple-illustrations/simple-illustration__smallrocket.svg b/assets/images/simple-illustrations/simple-illustration__smallrocket.svg
new file mode 100644
index 000000000000..40fc12552cdf
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__smallrocket.svg
@@ -0,0 +1,45 @@
+<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.9924 6.34188C28.1041 7.82157 27.7626 9.34422 26.7768 10.7079C25.7286 10.2505 24.1049 8.60759 23.6259 7.56171C24.9898 6.57382 26.5126 6.23235 27.9946 6.34188H27.9924Z" fill="#F25730"/>
+<path d="M19.1972 18.3653L18.4068 19.1513C18.381 19.1771 18.2414 19.0848 18.0352 18.9129C17.3737 18.361 16.0162 17.0059 15.4449 16.3251C15.2581 16.1039 15.155 15.9557 15.1829 15.9278L15.969 15.1353L18.3745 12.7107L22.7904 8.2673C23.0611 8.00315 23.3403 7.76691 23.6259 7.55859C24.1049 8.60447 25.7286 10.2474 26.7768 10.7048C26.5706 10.9926 26.3343 11.2718 26.068 11.5424L21.622 15.9557L19.1972 18.3632V18.3653ZM19.5086 15.7044C20.3892 14.8239 19.5086 13.9434 18.628 14.8239L17.1417 16.3101C17.3479 16.5162 17.8118 16.9801 18.0223 17.1906L19.5086 15.7044Z" fill="#FFFAF0"/>
+<path d="M21.6199 15.9592C23.0031 17.2477 23.3252 18.7296 22.5241 20.4111C22.2299 20.9266 22.0065 21.1757 21.4416 20.6109L19.195 18.3645L21.6199 15.957V15.9592Z" fill="#F25730"/>
+<path d="M18.628 14.8247C19.5108 13.9442 20.3914 14.8247 19.5086 15.7052L18.0224 17.1913C17.814 16.9809 17.3501 16.517 17.1418 16.3108L18.628 14.8247Z" fill="#F25730"/>
+<path d="M18.3746 12.7137L15.9691 15.1383L15.9454 15.1147L13.6967 12.8662C13.1318 12.3035 13.3809 12.078 13.8964 11.7859C15.5781 10.9849 17.058 11.307 18.3488 12.6879L18.3746 12.7137Z" fill="#F25730"/>
+<path d="M18.0329 18.914C17.7194 19.2469 17.4101 19.3092 17.1051 19.0966C16.4264 18.5468 15.8121 17.9304 15.2601 17.2518C15.2408 17.2217 15.2236 17.1917 15.2086 17.1616C15.0733 16.876 15.1506 16.5989 15.4384 16.3262C16.0119 17.0048 17.3671 18.3621 18.0286 18.914H18.0329Z" fill="#002140"/>
+<path d="M13.338 19.4827C13.2671 19.4011 13.1963 19.3173 13.1254 19.2336C12.9729 19.0489 12.8548 18.8642 12.8118 18.6945C12.756 18.4841 12.8118 18.2972 13.0481 18.1662L15.1851 17.1762L15.2109 17.1611C15.2259 17.1912 15.2431 17.2213 15.2624 17.2513C15.8123 17.93 16.4287 18.5442 17.1074 19.0961L16.1173 21.233C15.9841 21.4692 15.7994 21.5251 15.5889 21.4692C15.4192 21.4263 15.2345 21.3081 15.0498 21.1557C14.9596 21.0826 14.8715 21.0075 14.7835 20.9323C14.2766 20.4942 13.7955 20.011 13.3402 19.4848L13.338 19.4827Z" fill="#8DC8FF"/>
+<path d="M15.5867 21.469L15.5824 21.4884C15.3182 23.6059 13.542 25.251 10.971 26.6512L11.5982 25.3476C10.127 26.256 8.45381 27.012 6.6561 27.6756C7.17587 25.9833 7.94478 24.2931 8.9607 22.603L7.51307 23.331C8.95855 20.6937 10.6489 18.9091 12.7902 18.6986L12.8096 18.6943C12.8525 18.864 12.9707 19.0487 13.1231 19.2334C13.194 19.3171 13.2628 19.4009 13.3358 19.4825C12.7172 19.9206 12.1201 20.6809 11.5552 21.9093C11.1837 22.676 10.7971 23.389 10.2623 23.9796C10.9539 23.4706 11.6412 23.1184 12.3242 22.8005C13.3465 22.3603 14.1154 21.7053 14.7641 20.9493L14.7791 20.9321C14.8672 21.0094 14.9574 21.0846 15.0454 21.1555C15.2301 21.308 15.4149 21.4261 15.5845 21.469H15.5867Z" fill="#F25730"/>
+<path d="M14.7812 20.9301L14.7662 20.9473C14.1154 21.7032 13.3465 22.3583 12.3263 22.7985C11.6433 23.1164 10.956 23.4686 10.2644 23.9775C10.7992 23.3891 11.1858 22.6739 11.5574 21.9073C12.1244 20.6767 12.7193 19.9164 13.3379 19.4805C13.7954 20.0066 14.2744 20.492 14.7812 20.928V20.9301Z" fill="#FED607"/>
+<path d="M27.9924 6.3418C28.1041 7.82149 27.7626 9.34414 26.7768 10.7079C26.5706 10.9956 26.3343 11.2748 26.068 11.5454" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.4068 19.1517L19.1971 18.3657L21.6199 15.9582L26.0658 11.5449" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.9925 6.34158C26.5127 6.2299 24.9877 6.57137 23.6239 7.56141C23.3382 7.76758 23.059 8.00382 22.7884 8.27012" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.1808 15.9281L15.9669 15.1356L18.3746 12.7131L22.7884 8.26758" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.4068 19.1513C18.381 19.1771 18.2414 19.0847 18.0352 18.9129C17.3737 18.361 16.0162 17.0058 15.4449 16.325C15.2581 16.1038 15.155 15.9557 15.1829 15.9277" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.0224 17.1911C17.814 16.9806 17.3501 16.5167 17.1418 16.3105" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.2624 17.252C15.8123 17.9306 16.4287 18.5448 17.1074 19.0967" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.1073 19.0966C17.4102 19.3092 17.7216 19.2469 18.0352 18.9141" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.2624 17.2518C15.2431 17.2217 15.2259 17.1917 15.2109 17.1616C15.0756 16.876 15.1529 16.5989 15.4407 16.3262" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.7746 10.7074C25.7265 10.2499 24.1028 8.60701 23.6238 7.56113C23.6238 7.55898 23.6238 7.55684 23.6216 7.55469" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.1073 19.0957L16.1151 21.2326" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.1151 21.2336C15.982 21.4698 15.7972 21.5256 15.5868 21.4698C15.4171 21.4268 15.2324 21.3087 15.0477 21.1562" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.185 17.1758L13.048 18.1637" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.0481 18.1641C12.8118 18.2972 12.756 18.4819 12.8118 18.6924C12.8548 18.862 12.9729 19.0467 13.1254 19.2314" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.0476 21.1563C14.9574 21.0833 14.8693 21.0081 14.7813 20.9329C14.2744 20.4948 13.7933 20.0116 13.3379 19.4854C13.2671 19.4038 13.1962 19.3201 13.1253 19.2363" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.0223 17.1912L19.5086 15.7051" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.1418 16.3104L18.628 14.8242" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.5086 15.7052C20.3892 14.8247 19.5086 13.9442 18.628 14.8247" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.195 18.3633L19.1972 18.3654L21.4416 20.6118" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.5241 20.4129C23.3252 18.7292 23.0031 17.2495 21.6199 15.9609" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.4416 20.6118C22.0065 21.1745 22.2299 20.9275 22.5241 20.4121" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9431 15.1118L13.6944 12.8633" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.8964 11.783C15.5781 10.982 17.0579 11.3041 18.3488 12.685" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.6944 12.8634C13.1295 12.3008 13.3786 12.0753 13.8941 11.7832" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5824 21.4883C15.3182 23.6058 13.542 25.2509 10.971 26.6511" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.51306 23.3316C8.95854 20.6943 10.6489 18.9097 12.7902 18.6992" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.971 26.6511L11.5982 25.3496" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.96068 22.6035L7.51306 23.3316" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5982 25.3496C10.127 26.258 8.45381 27.014 6.6561 27.6776" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.9607 22.6035C7.94263 24.2937 7.17372 25.986 6.6561 27.6761" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.7663 20.9492C14.1155 21.7052 13.3466 22.3602 12.3264 22.8004" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5551 21.9096C12.1222 20.679 12.7171 19.9188 13.3357 19.4828C13.3421 19.4785 13.3507 19.4742 13.355 19.4678" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3242 22.8008C11.6412 23.1186 10.9539 23.4708 10.2623 23.9798" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5552 21.9102C11.1837 22.6768 10.7971 23.3899 10.2623 23.9804" stroke="#002140" stroke-width="0.499949" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 440350895826..0084ecf86b4f 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -27,6 +27,7 @@ import TadaBlue from '@assets/images/product-illustrations/tada--blue.svg';
 import TadaYellow from '@assets/images/product-illustrations/tada--yellow.svg';
 import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg';
 import BankArrow from '@assets/images/simple-illustrations/simple-illustration__bank-arrow.svg';
+import BigRocket from '@assets/images/simple-illustrations/simple-illustration__bigrocket.svg';
 import PinkBill from '@assets/images/simple-illustrations/simple-illustration__bill.svg';
 import ChatBubbles from '@assets/images/simple-illustrations/simple-illustration__chatbubbles.svg';
 import CoffeeMug from '@assets/images/simple-illustrations/simple-illustration__coffeemug.svg';
@@ -35,6 +36,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';
@@ -45,6 +47,7 @@ import MoneyWings from '@assets/images/simple-illustrations/simple-illustration_
 import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__opensafe.svg';
 import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
 import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
+import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg';
 import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
 import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg';
 import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg';
@@ -54,12 +57,14 @@ export {
     BankArrowPink,
     BankMouseGreen,
     BankUserGreen,
+    BigRocket,
     ChatBubbles,
     CoffeeMug,
     ConciergeBlue,
     ConciergeExclamation,
     CreditCardsBlue,
     EmailAddress,
+    HotDogStand,
     InvoiceOrange,
     JewelBoxBlue,
     JewelBoxGreen,
@@ -75,6 +80,7 @@ export {
     RocketOrange,
     SanFrancisco,
     SafeBlue,
+    SmallRocket,
     TadaYellow,
     TadaBlue,
     ToddBehindCloud,

From 11bf35f3c3e1a65c085cc50012d2ba1d90656cde Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 11:39:13 +0100
Subject: [PATCH 06/53] Render workspace type icons

---
 src/pages/workspace/WorkspacesListRow.tsx | 29 ++++++++++++++++++++++-
 src/styles/styles.ts                      |  4 ++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 65309b009d3f..d0c90fd0ad76 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import {View} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import {ValueOf} from 'type-fest';
 import Avatar from '@components/Avatar';
+import Icon from '@components/Icon';
+import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import {AvatarSource} from '@libs/UserUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import { ValueOf } from 'type-fest';
 
 type WorkspacesListRowProps = {
     title: string;
@@ -16,6 +19,22 @@ type WorkspacesListRowProps = {
     item: any; // TBD
 };
 
+const workspaceTypeIcon = (workspaceType: ValueOf<typeof CONST.POLICY.TYPE>): React.FC<SvgProps> => {
+    switch (workspaceType) {
+        case CONST.POLICY.TYPE.FREE:
+            // TODO: Ask design team to provide icon
+            throw new Error("Don't know which icon to server for free workspace type");
+        case CONST.POLICY.TYPE.PERSONAL:
+            return Illustrations.BigRocket;
+        case CONST.POLICY.TYPE.CORPORATE:
+            return Illustrations.HotDogStand;
+        case CONST.POLICY.TYPE.TEAM:
+            return Illustrations.SmallRocket;
+        default:
+            throw new Error(`Don't know which icon to serve for workspace type`);
+    }
+};
+
 function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, owner, workspaceType, item}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
 
@@ -32,6 +51,14 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, owner,
                 />
                 <Text style={styles.textStrong}>{title}</Text>
             </View>
+            <View style={[styles.flexRow]}>
+                <Icon
+                    src={workspaceTypeIcon(workspaceType)}
+                    width={34}
+                    height={34}
+                    additionalStyles={styles.workspaceTypeIcon}
+                />
+            </View>
         </View>
     );
 }
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index e8ce79bb5dc6..8267ae87ead3 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -2832,6 +2832,10 @@ const styles = (theme: ThemeColors) =>
             bottom: -4,
         },
 
+        workspaceTypeIcon: {
+            margin: 3,
+        },
+
         autoGrowHeightMultilineInput: {
             maxHeight: 115,
         },

From b8f3bde7a401e9f6aec8f1828013dc358d988524 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 11:39:33 +0100
Subject: [PATCH 07/53] Drop height and width from svgs

---
 .../simple-illustrations/simple-illustration__bigrocket.svg     | 2 +-
 .../simple-illustrations/simple-illustration__hotdogstand.svg   | 2 +-
 .../simple-illustrations/simple-illustration__smallrocket.svg   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/images/simple-illustrations/simple-illustration__bigrocket.svg b/assets/images/simple-illustrations/simple-illustration__bigrocket.svg
index cab3fead6599..a7e8a9cd4ec6 100644
--- a/assets/images/simple-illustrations/simple-illustration__bigrocket.svg
+++ b/assets/images/simple-illustrations/simple-illustration__bigrocket.svg
@@ -1,4 +1,4 @@
-<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.59769 24.1755C7.43452 24.0323 7.08154 24.1639 6.81015 24.4719C6.53709 24.7799 6.44884 25.1446 6.61201 25.2894C6.77352 25.4326 7.12816 25.3011 7.39956 24.993C7.67262 24.685 7.76086 24.3204 7.59936 24.1755H7.59769Z" fill="#5BE3AA"/>
 <path d="M9.20611 24.2787L7.8891 22.7236C6.68364 23.4329 5.7962 24.3903 5.24841 25.5175L6.56543 27.0726C7.20645 25.9671 8.02729 24.9897 9.20611 24.2787ZM6.80852 24.4719C7.08158 24.1639 7.43289 24.0323 7.59606 24.1755C7.75756 24.3204 7.66932 24.6867 7.39626 24.993C7.12487 25.3011 6.77189 25.4326 6.60872 25.2894C6.44555 25.1445 6.53546 24.7782 6.80685 24.4719H6.80852Z" fill="#03D47C"/>
 <path d="M6.56714 27.0727C7.20816 25.9671 8.02901 24.9898 9.20783 24.2788" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
diff --git a/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
index 29549e8fb754..68f8e3ab282c 100644
--- a/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
+++ b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
@@ -1,4 +1,4 @@
-<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg 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"/>
diff --git a/assets/images/simple-illustrations/simple-illustration__smallrocket.svg b/assets/images/simple-illustrations/simple-illustration__smallrocket.svg
index 40fc12552cdf..8d79b8d0da50 100644
--- a/assets/images/simple-illustrations/simple-illustration__smallrocket.svg
+++ b/assets/images/simple-illustrations/simple-illustration__smallrocket.svg
@@ -1,4 +1,4 @@
-<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M27.9924 6.34188C28.1041 7.82157 27.7626 9.34422 26.7768 10.7079C25.7286 10.2505 24.1049 8.60759 23.6259 7.56171C24.9898 6.57382 26.5126 6.23235 27.9946 6.34188H27.9924Z" fill="#F25730"/>
 <path d="M19.1972 18.3653L18.4068 19.1513C18.381 19.1771 18.2414 19.0848 18.0352 18.9129C17.3737 18.361 16.0162 17.0059 15.4449 16.3251C15.2581 16.1039 15.155 15.9557 15.1829 15.9278L15.969 15.1353L18.3745 12.7107L22.7904 8.2673C23.0611 8.00315 23.3403 7.76691 23.6259 7.55859C24.1049 8.60447 25.7286 10.2474 26.7768 10.7048C26.5706 10.9926 26.3343 11.2718 26.068 11.5424L21.622 15.9557L19.1972 18.3632V18.3653ZM19.5086 15.7044C20.3892 14.8239 19.5086 13.9434 18.628 14.8239L17.1417 16.3101C17.3479 16.5162 17.8118 16.9801 18.0223 17.1906L19.5086 15.7044Z" fill="#FFFAF0"/>
 <path d="M21.6199 15.9592C23.0031 17.2477 23.3252 18.7296 22.5241 20.4111C22.2299 20.9266 22.0065 21.1757 21.4416 20.6109L19.195 18.3645L21.6199 15.957V15.9592Z" fill="#F25730"/>

From 3cc533c9108cb83a2ef2105cf9ab004f8e589d1c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 11:58:52 +0100
Subject: [PATCH 08/53] Remove explicit fill from icons

---
 .../simple-illustrations/simple-illustration__bigrocket.svg     | 2 +-
 .../simple-illustrations/simple-illustration__hotdogstand.svg   | 2 +-
 .../simple-illustrations/simple-illustration__smallrocket.svg   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/images/simple-illustrations/simple-illustration__bigrocket.svg b/assets/images/simple-illustrations/simple-illustration__bigrocket.svg
index a7e8a9cd4ec6..1afd5f66b6ea 100644
--- a/assets/images/simple-illustrations/simple-illustration__bigrocket.svg
+++ b/assets/images/simple-illustrations/simple-illustration__bigrocket.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.59769 24.1755C7.43452 24.0323 7.08154 24.1639 6.81015 24.4719C6.53709 24.7799 6.44884 25.1446 6.61201 25.2894C6.77352 25.4326 7.12816 25.3011 7.39956 24.993C7.67262 24.685 7.76086 24.3204 7.59936 24.1755H7.59769Z" fill="#5BE3AA"/>
 <path d="M9.20611 24.2787L7.8891 22.7236C6.68364 23.4329 5.7962 24.3903 5.24841 25.5175L6.56543 27.0726C7.20645 25.9671 8.02729 24.9897 9.20611 24.2787ZM6.80852 24.4719C7.08158 24.1639 7.43289 24.0323 7.59606 24.1755C7.75756 24.3204 7.66932 24.6867 7.39626 24.993C7.12487 25.3011 6.77189 25.4326 6.60872 25.2894C6.44555 25.1445 6.53546 24.7782 6.80685 24.4719H6.80852Z" fill="#03D47C"/>
 <path d="M6.56714 27.0727C7.20816 25.9671 8.02901 24.9898 9.20783 24.2788" stroke="#002140" stroke-width="0.4995" stroke-linecap="round" stroke-linejoin="round"/>
diff --git a/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
index 68f8e3ab282c..471b978bb97e 100644
--- a/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
+++ b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 68 68" 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"/>
diff --git a/assets/images/simple-illustrations/simple-illustration__smallrocket.svg b/assets/images/simple-illustrations/simple-illustration__smallrocket.svg
index 8d79b8d0da50..0f8f166c849f 100644
--- a/assets/images/simple-illustrations/simple-illustration__smallrocket.svg
+++ b/assets/images/simple-illustrations/simple-illustration__smallrocket.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 35 34" xmlns="http://www.w3.org/2000/svg">
 <path d="M27.9924 6.34188C28.1041 7.82157 27.7626 9.34422 26.7768 10.7079C25.7286 10.2505 24.1049 8.60759 23.6259 7.56171C24.9898 6.57382 26.5126 6.23235 27.9946 6.34188H27.9924Z" fill="#F25730"/>
 <path d="M19.1972 18.3653L18.4068 19.1513C18.381 19.1771 18.2414 19.0848 18.0352 18.9129C17.3737 18.361 16.0162 17.0059 15.4449 16.3251C15.2581 16.1039 15.155 15.9557 15.1829 15.9278L15.969 15.1353L18.3745 12.7107L22.7904 8.2673C23.0611 8.00315 23.3403 7.76691 23.6259 7.55859C24.1049 8.60447 25.7286 10.2474 26.7768 10.7048C26.5706 10.9926 26.3343 11.2718 26.068 11.5424L21.622 15.9557L19.1972 18.3632V18.3653ZM19.5086 15.7044C20.3892 14.8239 19.5086 13.9434 18.628 14.8239L17.1417 16.3101C17.3479 16.5162 17.8118 16.9801 18.0223 17.1906L19.5086 15.7044Z" fill="#FFFAF0"/>
 <path d="M21.6199 15.9592C23.0031 17.2477 23.3252 18.7296 22.5241 20.4111C22.2299 20.9266 22.0065 21.1757 21.4416 20.6109L19.195 18.3645L21.6199 15.957V15.9592Z" fill="#F25730"/>

From 4ac804da7b838ede3c03cb661c3520eed7012434 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 12:15:43 +0100
Subject: [PATCH 09/53] Friendly workspace type names

---
 src/pages/workspace/WorkspacesListRow.tsx | 25 ++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index d0c90fd0ad76..281112402947 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -22,10 +22,10 @@ type WorkspacesListRowProps = {
 const workspaceTypeIcon = (workspaceType: ValueOf<typeof CONST.POLICY.TYPE>): React.FC<SvgProps> => {
     switch (workspaceType) {
         case CONST.POLICY.TYPE.FREE:
+            return Illustrations.BigRocket;
+        case CONST.POLICY.TYPE.PERSONAL:
             // TODO: Ask design team to provide icon
             throw new Error("Don't know which icon to server for free workspace type");
-        case CONST.POLICY.TYPE.PERSONAL:
-            return Illustrations.BigRocket;
         case CONST.POLICY.TYPE.CORPORATE:
             return Illustrations.HotDogStand;
         case CONST.POLICY.TYPE.TEAM:
@@ -35,6 +35,21 @@ const workspaceTypeIcon = (workspaceType: ValueOf<typeof CONST.POLICY.TYPE>): Re
     }
 };
 
+const userFriendlyWorkspaceType = (workspaceType: ValueOf<typeof CONST.POLICY.TYPE>) => {
+    switch (workspaceType) {
+        case CONST.POLICY.TYPE.FREE:
+            return 'Free';
+        case CONST.POLICY.TYPE.PERSONAL:
+            return 'Personal';
+        case CONST.POLICY.TYPE.CORPORATE:
+            return 'Control';
+        case CONST.POLICY.TYPE.TEAM:
+            return 'Collect';
+        default:
+            throw new Error(`Don't know a friendly workspace name for this workspace type`);
+    }
+};
+
 function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, owner, workspaceType, item}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
 
@@ -51,13 +66,17 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, owner,
                 />
                 <Text style={styles.textStrong}>{title}</Text>
             </View>
-            <View style={[styles.flexRow]}>
+            <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
                 <Icon
                     src={workspaceTypeIcon(workspaceType)}
                     width={34}
                     height={34}
                     additionalStyles={styles.workspaceTypeIcon}
                 />
+                <View style={styles.dFlex}>
+                    <Text style={styles.buttonMediumText}>{userFriendlyWorkspaceType(workspaceType)}</Text>
+                    <Text style={[styles.textMicroBold, styles.textSupporting]}>Plan</Text>
+                </View>
             </View>
         </View>
     );

From b48be5a59e4a14a38d99f18ee1b323775abddc7a Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 12:16:07 +0100
Subject: [PATCH 10/53] Syntactic name for style

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

diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index ae4b566f98ee..3282a1137c4d 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -99,7 +99,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
                                     <Text
                                         // eslint-disable-next-line react/no-array-index-key
                                         key={`${text}${i}`}
-                                        style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsHandle]}
+                                        style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.textSupporting]}
                                     >
                                         {text}
                                     </Text>
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 8267ae87ead3..f52651abfd87 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -287,7 +287,7 @@ const styles = (theme: ThemeColors) =>
             fontWeight: fontWeightBold,
         },
 
-        mentionSuggestionsHandle: {
+        textSupporting: {
             color: theme.textSupporting,
         },
 

From 97f5c1b6455fedf262e5d82a9e9042f0f138dfaf Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 12:20:09 +0100
Subject: [PATCH 11/53] Strong label style

---
 src/pages/workspace/WorkspacesListRow.tsx | 2 +-
 src/styles/styles.ts                      | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 281112402947..137ee06e994b 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -74,7 +74,7 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, owner,
                     additionalStyles={styles.workspaceTypeIcon}
                 />
                 <View style={styles.dFlex}>
-                    <Text style={styles.buttonMediumText}>{userFriendlyWorkspaceType(workspaceType)}</Text>
+                    <Text style={styles.labelStrong}>{userFriendlyWorkspaceType(workspaceType)}</Text>
                     <Text style={[styles.textMicroBold, styles.textSupporting]}>Plan</Text>
                 </View>
             </View>
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index f52651abfd87..052b7d32767a 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1135,6 +1135,13 @@ const styles = (theme: ThemeColors) =>
 
         noOutline: addOutlineWidth(theme, {}, 0),
 
+        labelStrong: {
+            fontFamily: fontFamily.EXP_NEUE,
+            fontWeight: 'bold',
+            fontSize: variables.fontSizeLabel,
+            lineHeight: variables.lineHeightNormal,
+        },
+
         textLabelSupporting: {
             fontFamily: fontFamily.EXP_NEUE,
             fontSize: variables.fontSizeLabel,

From 0545dd721ced81641bf3b9aeb7814e3bd244289c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 12:34:46 +0100
Subject: [PATCH 12/53] More accurate types from Policy type

---
 src/pages/workspace/WorkspacesListRow.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 137ee06e994b..35ab392fd37c 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -9,14 +9,14 @@ import Text from '@components/Text';
 import {AvatarSource} from '@libs/UserUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import {Policy} from '@src/types/onyx';
 
 type WorkspacesListRowProps = {
-    title: string;
+    title: Policy['name'];
+    ownerAccountID: Policy['ownerAccountID'];
+    workspaceType: Policy['type'];
     workspaceIcon?: AvatarSource | undefined;
     fallbackWorkspaceIcon?: AvatarSource | undefined;
-    // owner
-    workspaceType: ValueOf<typeof CONST.POLICY.TYPE>;
-    item: any; // TBD
 };
 
 const workspaceTypeIcon = (workspaceType: ValueOf<typeof CONST.POLICY.TYPE>): React.FC<SvgProps> => {
@@ -50,7 +50,7 @@ const userFriendlyWorkspaceType = (workspaceType: ValueOf<typeof CONST.POLICY.TY
     }
 };
 
-function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, owner, workspaceType, item}: WorkspacesListRowProps) {
+function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAccountID, workspaceType, item}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
 
     return (
@@ -66,6 +66,18 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, owner,
                 />
                 <Text style={styles.textStrong}>{title}</Text>
             </View>
+            <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
+                <Icon
+                    src={workspaceTypeIcon(workspaceType)}
+                    width={34}
+                    height={34}
+                    additionalStyles={styles.workspaceTypeIcon}
+                />
+                <View style={styles.dFlex}>
+                    <Text style={styles.labelStrong}>{ownerAccountID}</Text>
+                    <Text style={[styles.textMicroBold, styles.textSupporting]}>email</Text>
+                </View>
+            </View>
             <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
                 <Icon
                     src={workspaceTypeIcon(workspaceType)}

From 2db64054abf9e0f2fa2dfd29b3d6529a8589abf1 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 12:37:33 +0100
Subject: [PATCH 13/53] Do not allow PERSONAL workspace type

---
 src/pages/workspace/WorkspacesListRow.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 35ab392fd37c..ff2bd3720fd0 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -14,18 +14,15 @@ import {Policy} from '@src/types/onyx';
 type WorkspacesListRowProps = {
     title: Policy['name'];
     ownerAccountID: Policy['ownerAccountID'];
-    workspaceType: Policy['type'];
+    workspaceType: typeof CONST.POLICY.TYPE.FREE | typeof CONST.POLICY.TYPE.CORPORATE | typeof CONST.POLICY.TYPE.TEAM;
     workspaceIcon?: AvatarSource | undefined;
     fallbackWorkspaceIcon?: AvatarSource | undefined;
 };
 
-const workspaceTypeIcon = (workspaceType: ValueOf<typeof CONST.POLICY.TYPE>): React.FC<SvgProps> => {
+const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType']): React.FC<SvgProps> => {
     switch (workspaceType) {
         case CONST.POLICY.TYPE.FREE:
             return Illustrations.BigRocket;
-        case CONST.POLICY.TYPE.PERSONAL:
-            // TODO: Ask design team to provide icon
-            throw new Error("Don't know which icon to server for free workspace type");
         case CONST.POLICY.TYPE.CORPORATE:
             return Illustrations.HotDogStand;
         case CONST.POLICY.TYPE.TEAM:
@@ -35,12 +32,10 @@ const workspaceTypeIcon = (workspaceType: ValueOf<typeof CONST.POLICY.TYPE>): Re
     }
 };
 
-const userFriendlyWorkspaceType = (workspaceType: ValueOf<typeof CONST.POLICY.TYPE>) => {
+const userFriendlyWorkspaceType = (workspaceType: WorkspacesListRowProps['workspaceType']) => {
     switch (workspaceType) {
         case CONST.POLICY.TYPE.FREE:
             return 'Free';
-        case CONST.POLICY.TYPE.PERSONAL:
-            return 'Personal';
         case CONST.POLICY.TYPE.CORPORATE:
             return 'Control';
         case CONST.POLICY.TYPE.TEAM:

From a4ce86e033fe00f4cf0e2b4bd6aae4a711f12e1b Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 13:47:58 +0100
Subject: [PATCH 14/53] Styles; data; commented props

---
 src/pages/workspace/WorkspacesListRow.tsx | 64 ++++++++++++++---------
 src/styles/styles.ts                      |  6 ++-
 2 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index ff2bd3720fd0..7b2b8913b223 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -1,21 +1,31 @@
 import React from 'react';
 import {View} from 'react-native';
 import {SvgProps} from 'react-native-svg';
-import {ValueOf} from 'type-fest';
 import Avatar from '@components/Avatar';
 import Icon from '@components/Icon';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
+import withCurrentUserPersonalDetails, {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {Policy} from '@src/types/onyx';
 
-type WorkspacesListRowProps = {
+type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
+    /** Name of the workspace */
     title: Policy['name'];
+
+    /** Account ID of the workspace's owner */
     ownerAccountID: Policy['ownerAccountID'];
+
+    /** Type of workspace. Type personal is not valid in this context so it's omitted */
     workspaceType: typeof CONST.POLICY.TYPE.FREE | typeof CONST.POLICY.TYPE.CORPORATE | typeof CONST.POLICY.TYPE.TEAM;
+
+    /** Icon to show next to the workspace name */
     workspaceIcon?: AvatarSource | undefined;
+
+    /** Icon to be used when workspaceIcon is not present */
     fallbackWorkspaceIcon?: AvatarSource | undefined;
 };
 
@@ -45,11 +55,12 @@ const userFriendlyWorkspaceType = (workspaceType: WorkspacesListRowProps['worksp
     }
 };
 
-function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAccountID, workspaceType, item}: WorkspacesListRowProps) {
+function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAccountID, workspaceType, currentUserPersonalDetails}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
+    const ownerDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];
 
     return (
-        <View style={[styles.highlightBG, styles.p5, styles.br3]}>
+        <View style={[styles.dFlex, styles.gap3, styles.highlightBG, styles.p5, styles.br3]}>
             <View style={[styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
                 <Avatar
                     imageStyles={[styles.alignSelfCenter]}
@@ -61,32 +72,33 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                 />
                 <Text style={styles.textStrong}>{title}</Text>
             </View>
-            <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
-                <Icon
-                    src={workspaceTypeIcon(workspaceType)}
-                    width={34}
-                    height={34}
-                    additionalStyles={styles.workspaceTypeIcon}
-                />
-                <View style={styles.dFlex}>
-                    <Text style={styles.labelStrong}>{ownerAccountID}</Text>
-                    <Text style={[styles.textMicroBold, styles.textSupporting]}>email</Text>
+            <View>
+                <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
+                    <Avatar
+                        source={ownerDetails.avatar}
+                        size={CONST.AVATAR_SIZE.SMALL}
+                        containerStyles={styles.workspaceOwnerAvatarWrapper}
+                    />
+                    <View style={styles.dFlex}>
+                        <Text style={styles.labelStrong}>{PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails, 'displayName')}</Text>
+                        <Text style={[styles.textMicroBold, styles.textSupporting]}>{ownerDetails.login}</Text>
+                    </View>
                 </View>
-            </View>
-            <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
-                <Icon
-                    src={workspaceTypeIcon(workspaceType)}
-                    width={34}
-                    height={34}
-                    additionalStyles={styles.workspaceTypeIcon}
-                />
-                <View style={styles.dFlex}>
-                    <Text style={styles.labelStrong}>{userFriendlyWorkspaceType(workspaceType)}</Text>
-                    <Text style={[styles.textMicroBold, styles.textSupporting]}>Plan</Text>
+                <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
+                    <Icon
+                        src={workspaceTypeIcon(workspaceType)}
+                        width={34}
+                        height={34}
+                        additionalStyles={styles.workspaceTypeWrapper}
+                    />
+                    <View style={styles.dFlex}>
+                        <Text style={styles.labelStrong}>{userFriendlyWorkspaceType(workspaceType)}</Text>
+                        <Text style={[styles.textMicroBold, styles.textSupporting]}>Plan</Text>
+                    </View>
                 </View>
             </View>
         </View>
     );
 }
 
-export default WorkspacesListRow;
+export default withCurrentUserPersonalDetails(WorkspacesListRow);
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 052b7d32767a..535118857b35 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -2839,7 +2839,11 @@ const styles = (theme: ThemeColors) =>
             bottom: -4,
         },
 
-        workspaceTypeIcon: {
+        workspaceOwnerAvatarWrapper: {
+            margin: 6,
+        },
+
+        workspaceTypeWrapper: {
             margin: 3,
         },
 

From d5182e8583bfd110b51acd276718e838c27a0e7c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 13:48:09 +0100
Subject: [PATCH 15/53] Randomized input for testing

---
 src/pages/workspace/WorkspacesListPage.js | 38 +++++++++++++----------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index 0860908523dd..84ce145429b6 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -108,7 +108,7 @@ function dismissWorkspaceError(policyID, pendingAction) {
     throw new Error('Not implemented');
 }
 
-function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, userWallet}) {
+function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, userWallet, personalDetails}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -164,28 +164,28 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
      */
     const workspaces = useMemo(() => {
         const reimbursementAccountBrickRoadIndicator = !_.isEmpty(reimbursementAccount.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
+
         return _.chain(policies)
             .filter((policy) => PolicyUtils.shouldShowPolicy(policy, isOffline))
             .map((policy) => ({
                 title: policy.name,
                 icon: policy.avatar ? policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policy.name),
-                iconType: policy.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON,
-                action: () => Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policy.id)),
-                iconFill: theme.textLight,
-                fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
-                brickRoadIndicator: reimbursementAccountBrickRoadIndicator || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, allPolicyMembers),
-                pendingAction: policy.pendingAction,
-                errors: policy.errors,
-                dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction),
-                disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+                type: policy.type,
+                ownerAccountID: policy.ownerAccountID,
+                // iconType: policy.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON,
+                // action: () => Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policy.id)),
+                // iconFill: theme.textLight,
+                // fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
+                // brickRoadIndicator: reimbursementAccountBrickRoadIndicator || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, allPolicyMembers),
+                // pendingAction: policy.pendingAction,
+                // errors: policy.errors,
+                // dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction),
+                // disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
             }))
             .sortBy((policy) => policy.title.toLowerCase())
             .value();
     }, [reimbursementAccount.errors, policies, isOffline, theme.textLight, allPolicyMembers]);
 
-    console.log({policies});
-    console.log({workspaces});
-
     return (
         <View style={[styles.dFlex, styles.gap3, styles.m5]}>
             {_.isEmpty(workspaces) ? (
@@ -201,9 +201,12 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
                         title={item.title}
                         workspaceIcon={item.icon}
                         fallbackWorkspaceIcon={item.fallbackIcon}
-                        owner={item.owner}
-                        workspaceType={item.type}
-                        item={item}
+                        // Real data
+                        // ownerAccountID={item.ownerAccountID}
+                        // workspaceType={item.type}
+                        // Randomized data for testing
+                        ownerAccountID={personalDetails ? Object.keys(personalDetails)[Math.floor(Math.random() * Object.keys(personalDetails).length)] : 1}
+                        workspaceType={[CONST.POLICY.TYPE.CORPORATE, CONST.POLICY.TYPE.TEAM, CONST.POLICY.TYPE.FREE][Math.floor(Math.random() * 3)]}
                     />
                 ))
             )}
@@ -230,5 +233,8 @@ export default compose(
         userWallet: {
             key: ONYXKEYS.USER_WALLET,
         },
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
     }),
 )(WorkspacesListPage);

From 6927f9fe15c5aeb6fd47e0dacdf36cca26058f9d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 13:53:15 +0100
Subject: [PATCH 16/53] Make fallback icon required

---
 src/pages/workspace/WorkspacesListRow.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 7b2b8913b223..7cccc46cad30 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -26,7 +26,7 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     workspaceIcon?: AvatarSource | undefined;
 
     /** Icon to be used when workspaceIcon is not present */
-    fallbackWorkspaceIcon?: AvatarSource | undefined;
+    fallbackWorkspaceIcon: AvatarSource | undefined;
 };
 
 const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType']): React.FC<SvgProps> => {
@@ -81,7 +81,7 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                     />
                     <View style={styles.dFlex}>
                         <Text style={styles.labelStrong}>{PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails, 'displayName')}</Text>
-                        <Text style={[styles.textMicroBold, styles.textSupporting]}>{ownerDetails.login}</Text>
+                        <Text style={[styles.textMicro, styles.textSupporting]}>{ownerDetails.login}</Text>
                     </View>
                 </View>
                 <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
@@ -93,7 +93,7 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                     />
                     <View style={styles.dFlex}>
                         <Text style={styles.labelStrong}>{userFriendlyWorkspaceType(workspaceType)}</Text>
-                        <Text style={[styles.textMicroBold, styles.textSupporting]}>Plan</Text>
+                        <Text style={[styles.textMicro, styles.textSupporting]}>Plan</Text>
                     </View>
                 </View>
             </View>

From d4aeb3f687a65f99d6a74164e0534bd8252fe3b9 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Dec 2023 18:26:38 +0100
Subject: [PATCH 17/53] Three dots menu UI

---
 src/pages/workspace/WorkspacesListRow.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 7cccc46cad30..3a14e5ea96fe 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -5,6 +5,7 @@ import Avatar from '@components/Avatar';
 import Icon from '@components/Icon';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
+import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import withCurrentUserPersonalDetails, {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
@@ -60,8 +61,8 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
     const ownerDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];
 
     return (
-        <View style={[styles.dFlex, styles.gap3, styles.highlightBG, styles.p5, styles.br3]}>
-            <View style={[styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
+        <View style={[styles.dFlex, styles.gap3, styles.highlightBG, styles.w100, styles.p5, styles.br3]}>
+            <View style={[styles.flexRow, styles.flexGrow1, styles.gap3, styles.alignItemsCenter]}>
                 <Avatar
                     imageStyles={[styles.alignSelfCenter]}
                     size={CONST.AVATAR_SIZE.DEFAULT}
@@ -71,6 +72,11 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                     type={CONST.ICON_TYPE_WORKSPACE}
                 />
                 <Text style={styles.textStrong}>{title}</Text>
+                <ThreeDotsMenu
+                    menuItems={[]}
+                    anchorPosition={{top: 0, right: 0}}
+                    iconStyles={[styles.flexGrow1]}
+                />
             </View>
             <View>
                 <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>

From 31fc5fe463123969735799bbd37aec7c8401f4a0 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 8 Dec 2023 12:32:39 +0100
Subject: [PATCH 18/53] Text ellipsis and proper margins

---
 src/pages/workspace/WorkspacesListRow.tsx | 44 +++++++++++++++++------
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 3a14e5ea96fe..ea87ea74c503 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -61,8 +61,8 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
     const ownerDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];
 
     return (
-        <View style={[styles.dFlex, styles.gap3, styles.highlightBG, styles.w100, styles.p5, styles.br3]}>
-            <View style={[styles.flexRow, styles.flexGrow1, styles.gap3, styles.alignItemsCenter]}>
+        <View style={[styles.dFlex, styles.gap3, styles.highlightBG, styles.br3, styles.pv5]}>
+            <View style={[styles.flexRow, styles.flex1, styles.gap3, styles.pl5, styles.pr2, styles.alignItemsCenter]}>
                 <Avatar
                     imageStyles={[styles.alignSelfCenter]}
                     size={CONST.AVATAR_SIZE.DEFAULT}
@@ -71,23 +71,37 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                     name={title}
                     type={CONST.ICON_TYPE_WORKSPACE}
                 />
-                <Text style={styles.textStrong}>{title}</Text>
+                <Text
+                    numberOfLines={1}
+                    style={[styles.flexGrow1, styles.textStrong]}
+                >
+                    {title}
+                </Text>
                 <ThreeDotsMenu
                     menuItems={[]}
                     anchorPosition={{top: 0, right: 0}}
-                    iconStyles={[styles.flexGrow1]}
                 />
             </View>
-            <View>
+            <View style={styles.ph5}>
                 <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
                     <Avatar
                         source={ownerDetails.avatar}
                         size={CONST.AVATAR_SIZE.SMALL}
                         containerStyles={styles.workspaceOwnerAvatarWrapper}
                     />
-                    <View style={styles.dFlex}>
-                        <Text style={styles.labelStrong}>{PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails, 'displayName')}</Text>
-                        <Text style={[styles.textMicro, styles.textSupporting]}>{ownerDetails.login}</Text>
+                    <View style={styles.flex1}>
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.labelStrong]}
+                        >
+                            {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails, 'displayName')}
+                        </Text>
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.textMicro, styles.textSupporting]}
+                        >
+                            {ownerDetails.login}
+                        </Text>
                     </View>
                 </View>
                 <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
@@ -98,8 +112,18 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                         additionalStyles={styles.workspaceTypeWrapper}
                     />
                     <View style={styles.dFlex}>
-                        <Text style={styles.labelStrong}>{userFriendlyWorkspaceType(workspaceType)}</Text>
-                        <Text style={[styles.textMicro, styles.textSupporting]}>Plan</Text>
+                        <Text
+                            numberOfLines={1}
+                            style={styles.labelStrong}
+                        >
+                            {userFriendlyWorkspaceType(workspaceType)}
+                        </Text>
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.textMicro, styles.textSupporting]}
+                        >
+                            Plan
+                        </Text>
                     </View>
                 </View>
             </View>

From bbb1cb9d9f769126a76ad1019b3fbe421cf8085f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 8 Dec 2023 13:09:10 +0100
Subject: [PATCH 19/53] Workspace type and plan translations

---
 src/languages/en.ts | 6 ++++++
 src/languages/es.ts | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 817f06f6b344..926af602ce39 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1444,6 +1444,7 @@ export default {
             invoices: 'Invoices',
             travel: 'Travel',
             members: 'Members',
+            plan: 'Plan',
             bankAccount: 'Bank account',
             connectBankAccount: 'Connect bank account',
             testTransactions: 'Test transactions',
@@ -1458,6 +1459,11 @@ export default {
             workspaceAvatar: 'Workspace avatar',
             mustBeOnlineToViewMembers: 'You must be online in order to view members of this workspace.',
         },
+        type: {
+            free: 'Free',
+            control: 'Control',
+            collect: 'Collect',
+        },
         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.",
diff --git a/src/languages/es.ts b/src/languages/es.ts
index b219021daa0f..88a58ab19508 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1465,6 +1465,7 @@ export default {
             invoices: 'Enviar facturas',
             travel: 'Viajes',
             members: 'Miembros',
+            plan: 'Plan',
             bankAccount: 'Cuenta bancaria',
             connectBankAccount: 'Conectar cuenta bancaria',
             testTransactions: 'Transacciones de prueba',
@@ -1479,6 +1480,11 @@ export default {
             workspaceAvatar: 'Espacio de trabajo avatar',
             mustBeOnlineToViewMembers: 'Debes estar en línea para poder ver los miembros de este espacio de trabajo.',
         },
+        type: {
+            free: '[Missing translation]',
+            control: '[Missing translation]',
+            collect: '[Missing translation]',
+        },
         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',

From 0ba4a292bf9126994ed57cffc8ec97de4f027391 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 8 Dec 2023 13:09:33 +0100
Subject: [PATCH 20/53] Use translate function

---
 src/pages/workspace/WorkspacesListRow.tsx | 34 ++++++++++++-----------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index ea87ea74c503..8088cd8e6cd5 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import {SvgProps} from 'react-native-svg';
 import Avatar from '@components/Avatar';
@@ -7,6 +7,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import withCurrentUserPersonalDetails, {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -43,23 +44,24 @@ const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType'
     }
 };
 
-const userFriendlyWorkspaceType = (workspaceType: WorkspacesListRowProps['workspaceType']) => {
-    switch (workspaceType) {
-        case CONST.POLICY.TYPE.FREE:
-            return 'Free';
-        case CONST.POLICY.TYPE.CORPORATE:
-            return 'Control';
-        case CONST.POLICY.TYPE.TEAM:
-            return 'Collect';
-        default:
-            throw new Error(`Don't know a friendly workspace name for this workspace type`);
-    }
-};
-
 function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAccountID, workspaceType, currentUserPersonalDetails}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
     const ownerDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];
 
+    const userFriendlyWorkspaceType = useMemo(() => {
+        switch (workspaceType) {
+            case CONST.POLICY.TYPE.FREE:
+                return translate('workspace.type.free');
+            case CONST.POLICY.TYPE.CORPORATE:
+                return translate('workspace.type.control');
+            case CONST.POLICY.TYPE.TEAM:
+                return translate('workspace.type.collect');
+            default:
+                throw new Error(`Don't know a friendly workspace name for this workspace type`);
+        }
+    }, [workspaceType, translate]);
+
     return (
         <View style={[styles.dFlex, styles.gap3, styles.highlightBG, styles.br3, styles.pv5]}>
             <View style={[styles.flexRow, styles.flex1, styles.gap3, styles.pl5, styles.pr2, styles.alignItemsCenter]}>
@@ -116,13 +118,13 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                             numberOfLines={1}
                             style={styles.labelStrong}
                         >
-                            {userFriendlyWorkspaceType(workspaceType)}
+                            {userFriendlyWorkspaceType}
                         </Text>
                         <Text
                             numberOfLines={1}
                             style={[styles.textMicro, styles.textSupporting]}
                         >
-                            Plan
+                            {translate('workspace.common.plan')}
                         </Text>
                     </View>
                 </View>

From a5da6e528e8077c3d55aa8bdadf803b228375872 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 8 Dec 2023 16:06:04 +0100
Subject: [PATCH 21/53] Screen width dependent styles

---
 src/pages/workspace/WorkspacesListRow.tsx | 35 +++++++++++++++++------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 8088cd8e6cd5..31f4f86dbbe4 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -8,6 +8,7 @@ import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import withCurrentUserPersonalDetails, {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -47,6 +48,11 @@ const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType'
 function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAccountID, workspaceType, currentUserPersonalDetails}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {isMediumScreenWidth, isLargeScreenWidth} = useWindowDimensions();
+    const isWide = isMediumScreenWidth || isLargeScreenWidth;
+    const isNarrow = !isWide;
+    const mainFlexDirection = isWide ? styles.flexRow : styles.flexColumn;
+
     const ownerDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];
 
     const userFriendlyWorkspaceType = useMemo(() => {
@@ -63,8 +69,8 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
     }, [workspaceType, translate]);
 
     return (
-        <View style={[styles.dFlex, styles.gap3, styles.highlightBG, styles.br3, styles.pv5]}>
-            <View style={[styles.flexRow, styles.flex1, styles.gap3, styles.pl5, styles.pr2, styles.alignItemsCenter]}>
+        <View style={[mainFlexDirection, styles.gap3, styles.highlightBG, styles.br3, styles.pv5, {backgroundColor: 'darkgreen'}]}>
+            <View style={[styles.flexRow, styles.flex1, styles.gap3, styles.ml5, isNarrow && styles.mr2, styles.alignItemsCenter]}>
                 <Avatar
                     imageStyles={[styles.alignSelfCenter]}
                     size={CONST.AVATAR_SIZE.DEFAULT}
@@ -79,13 +85,15 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                 >
                     {title}
                 </Text>
-                <ThreeDotsMenu
-                    menuItems={[]}
-                    anchorPosition={{top: 0, right: 0}}
-                />
+                {isNarrow && (
+                    <ThreeDotsMenu
+                        menuItems={[]}
+                        anchorPosition={{top: 0, right: 0}}
+                    />
+                )}
             </View>
-            <View style={styles.ph5}>
-                <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
+            <View style={[mainFlexDirection, isWide && styles.gap3, styles.flex2, isNarrow && styles.mh5, {backgroundColor: 'green'}]}>
+                <View style={[styles.flexRow, styles.flex1, styles.gap2, styles.alignItemsCenter]}>
                     <Avatar
                         source={ownerDetails.avatar}
                         size={CONST.AVATAR_SIZE.SMALL}
@@ -97,16 +105,18 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                             style={[styles.labelStrong]}
                         >
                             {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails, 'displayName')}
+                            {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails, 'displayName')}
                         </Text>
                         <Text
                             numberOfLines={1}
                             style={[styles.textMicro, styles.textSupporting]}
                         >
                             {ownerDetails.login}
+                            {ownerDetails.login}
                         </Text>
                     </View>
                 </View>
-                <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
+                <View style={[styles.flexRow, styles.flex1, styles.gap2, styles.alignItemsCenter]}>
                     <Icon
                         src={workspaceTypeIcon(workspaceType)}
                         width={34}
@@ -129,6 +139,13 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                     </View>
                 </View>
             </View>
+            {isWide && (
+                <ThreeDotsMenu
+                    menuItems={[]}
+                    anchorPosition={{top: 0, right: 0}}
+                    iconStyles={[styles.mr2]}
+                />
+            )}
         </View>
     );
 }

From a897973431ccc63c5875d52fba139cac0da6f03a Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 8 Dec 2023 16:34:24 +0100
Subject: [PATCH 22/53] Flat flex structure

---
 src/pages/workspace/WorkspacesListRow.tsx | 89 +++++++++++------------
 1 file changed, 42 insertions(+), 47 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 31f4f86dbbe4..e26da8ce674b 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -51,7 +51,6 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
     const {isMediumScreenWidth, isLargeScreenWidth} = useWindowDimensions();
     const isWide = isMediumScreenWidth || isLargeScreenWidth;
     const isNarrow = !isWide;
-    const mainFlexDirection = isWide ? styles.flexRow : styles.flexColumn;
 
     const ownerDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];
 
@@ -69,8 +68,8 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
     }, [workspaceType, translate]);
 
     return (
-        <View style={[mainFlexDirection, styles.gap3, styles.highlightBG, styles.br3, styles.pv5, {backgroundColor: 'darkgreen'}]}>
-            <View style={[styles.flexRow, styles.flex1, styles.gap3, styles.ml5, isNarrow && styles.mr2, styles.alignItemsCenter]}>
+        <View style={[isWide ? styles.flexRow : styles.flexColumn, isWide && styles.gap5, styles.highlightBG, styles.br3, styles.pv5, styles.pl5]}>
+            <View style={[styles.flexRow, styles.flex1, styles.gap3, isNarrow && [styles.mb3, styles.mr2], styles.alignItemsCenter]}>
                 <Avatar
                     imageStyles={[styles.alignSelfCenter]}
                     size={CONST.AVATAR_SIZE.DEFAULT}
@@ -92,51 +91,47 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                     />
                 )}
             </View>
-            <View style={[mainFlexDirection, isWide && styles.gap3, styles.flex2, isNarrow && styles.mh5, {backgroundColor: 'green'}]}>
-                <View style={[styles.flexRow, styles.flex1, styles.gap2, styles.alignItemsCenter]}>
-                    <Avatar
-                        source={ownerDetails.avatar}
-                        size={CONST.AVATAR_SIZE.SMALL}
-                        containerStyles={styles.workspaceOwnerAvatarWrapper}
-                    />
-                    <View style={styles.flex1}>
-                        <Text
-                            numberOfLines={1}
-                            style={[styles.labelStrong]}
-                        >
-                            {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails, 'displayName')}
-                            {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails, 'displayName')}
-                        </Text>
-                        <Text
-                            numberOfLines={1}
-                            style={[styles.textMicro, styles.textSupporting]}
-                        >
-                            {ownerDetails.login}
-                            {ownerDetails.login}
-                        </Text>
-                    </View>
+            <View style={[styles.flexRow, styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+                <Avatar
+                    source={ownerDetails.avatar}
+                    size={CONST.AVATAR_SIZE.SMALL}
+                    containerStyles={styles.workspaceOwnerAvatarWrapper}
+                />
+                <View style={styles.flex1}>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.labelStrong]}
+                    >
+                        {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails, 'displayName')}
+                    </Text>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.textMicro, styles.textSupporting]}
+                    >
+                        {ownerDetails.login}
+                    </Text>
                 </View>
-                <View style={[styles.flexRow, styles.flex1, styles.gap2, styles.alignItemsCenter]}>
-                    <Icon
-                        src={workspaceTypeIcon(workspaceType)}
-                        width={34}
-                        height={34}
-                        additionalStyles={styles.workspaceTypeWrapper}
-                    />
-                    <View style={styles.dFlex}>
-                        <Text
-                            numberOfLines={1}
-                            style={styles.labelStrong}
-                        >
-                            {userFriendlyWorkspaceType}
-                        </Text>
-                        <Text
-                            numberOfLines={1}
-                            style={[styles.textMicro, styles.textSupporting]}
-                        >
-                            {translate('workspace.common.plan')}
-                        </Text>
-                    </View>
+            </View>
+            <View style={[styles.flexRow, styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+                <Icon
+                    src={workspaceTypeIcon(workspaceType)}
+                    width={34}
+                    height={34}
+                    additionalStyles={styles.workspaceTypeWrapper}
+                />
+                <View style={styles.dFlex}>
+                    <Text
+                        numberOfLines={1}
+                        style={styles.labelStrong}
+                    >
+                        {userFriendlyWorkspaceType}
+                    </Text>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.textMicro, styles.textSupporting]}
+                    >
+                        {translate('workspace.common.plan')}
+                    </Text>
                 </View>
             </View>
             {isWide && (

From 760c9241b6dc6485a71f48b703ca252cd6e35cda Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 11 Dec 2023 11:47:55 +0100
Subject: [PATCH 23/53] Apply flex1 only on wide layout

---
 src/pages/workspace/WorkspacesListRow.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index e26da8ce674b..ca1719e0b3e7 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -69,7 +69,7 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
 
     return (
         <View style={[isWide ? styles.flexRow : styles.flexColumn, isWide && styles.gap5, styles.highlightBG, styles.br3, styles.pv5, styles.pl5]}>
-            <View style={[styles.flexRow, styles.flex1, styles.gap3, isNarrow && [styles.mb3, styles.mr2], styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, isNarrow && [styles.mb3, styles.mr2], styles.alignItemsCenter]}>
                 <Avatar
                     imageStyles={[styles.alignSelfCenter]}
                     size={CONST.AVATAR_SIZE.DEFAULT}
@@ -91,7 +91,7 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                     />
                 )}
             </View>
-            <View style={[styles.flexRow, styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
                 <Avatar
                     source={ownerDetails.avatar}
                     size={CONST.AVATAR_SIZE.SMALL}
@@ -112,7 +112,7 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                     </Text>
                 </View>
             </View>
-            <View style={[styles.flexRow, styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
                 <Icon
                     src={workspaceTypeIcon(workspaceType)}
                     width={34}

From 5832829c0374fef1d1a2227888e4c4f9ea0a3ced Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 12 Dec 2023 22:36:48 +0100
Subject: [PATCH 24/53] Add isWide prop; add missing attributes

---
 src/pages/workspace/WorkspacesListRow.tsx | 38 +++++++++++++++++------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index ca1719e0b3e7..5a264f605e5b 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -8,7 +8,6 @@ import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import withCurrentUserPersonalDetails, {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -30,6 +29,9 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
 
     /** Icon to be used when workspaceIcon is not present */
     fallbackWorkspaceIcon: AvatarSource | undefined;
+
+    /** Renders the component using big screen layout or small screen layout */
+    isWide: boolean | undefined;
 };
 
 const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType']): React.FC<SvgProps> => {
@@ -45,12 +47,9 @@ const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType'
     }
 };
 
-function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAccountID, workspaceType, currentUserPersonalDetails}: WorkspacesListRowProps) {
+function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAccountID, workspaceType, currentUserPersonalDetails, isWide}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isMediumScreenWidth, isLargeScreenWidth} = useWindowDimensions();
-    const isWide = isMediumScreenWidth || isLargeScreenWidth;
-    const isNarrow = !isWide;
 
     const ownerDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];
 
@@ -67,9 +66,13 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
         }
     }, [workspaceType, translate]);
 
+    if (isWide === undefined) {
+        return <></>;
+    }
+
     return (
         <View style={[isWide ? styles.flexRow : styles.flexColumn, isWide && styles.gap5, styles.highlightBG, styles.br3, styles.pv5, styles.pl5]}>
-            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, isNarrow && [styles.mb3, styles.mr2], styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, !isWide && [styles.mb3, styles.mr2], styles.alignItemsCenter]}>
                 <Avatar
                     imageStyles={[styles.alignSelfCenter]}
                     size={CONST.AVATAR_SIZE.DEFAULT}
@@ -84,14 +87,23 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                 >
                     {title}
                 </Text>
-                {isNarrow && (
+                {!isWide && (
                     <ThreeDotsMenu
                         menuItems={[]}
                         anchorPosition={{top: 0, right: 0}}
+                        iconTooltip={undefined}
+                        icon={undefined}
+                        iconFill={undefined}
+                        iconStyles={undefined}
+                        onIconPress={undefined}
+                        anchorAlignment={undefined}
+                        shouldOverlay={undefined}
+                        shouldSetModalVisibility={undefined}
+                        disabled={undefined}
                     />
                 )}
             </View>
-            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, !isWide && styles.mr5, styles.alignItemsCenter]}>
                 <Avatar
                     source={ownerDetails.avatar}
                     size={CONST.AVATAR_SIZE.SMALL}
@@ -112,7 +124,7 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                     </Text>
                 </View>
             </View>
-            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, !isWide && styles.mr5, styles.alignItemsCenter]}>
                 <Icon
                     src={workspaceTypeIcon(workspaceType)}
                     width={34}
@@ -139,6 +151,14 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                     menuItems={[]}
                     anchorPosition={{top: 0, right: 0}}
                     iconStyles={[styles.mr2]}
+                    iconTooltip={undefined}
+                    icon={undefined}
+                    iconFill={undefined}
+                    onIconPress={undefined}
+                    anchorAlignment={undefined}
+                    shouldOverlay={undefined}
+                    shouldSetModalVisibility={undefined}
+                    disabled={undefined}
                 />
             )}
         </View>

From 2dfe4aaefaaa60f3c8ee9de54b0d3b60bde985f4 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 12 Dec 2023 22:55:01 +0100
Subject: [PATCH 25/53] Fix merge

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

diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index e854da49aa9a..b42540bacb13 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -100,7 +100,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
                                     <Text
                                         // eslint-disable-next-line react/no-array-index-key
                                         key={`${text}${i}`}
-                                        style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsDisplayName]}
+                                        style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsHandle]}
                                     >
                                         {text}
                                     </Text>

From 81aad007f1a1ba1e18f15ee6629ba12b77791471 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 12 Dec 2023 22:57:46 +0100
Subject: [PATCH 26/53] Add validated spanish translations

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

diff --git a/src/languages/es.ts b/src/languages/es.ts
index 3724a2a59eb5..8c6a87af5b4d 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1494,9 +1494,9 @@ export default {
             mustBeOnlineToViewMembers: 'Debes estar en línea para poder ver los miembros de este espacio de trabajo.',
         },
         type: {
-            free: '[Missing translation]',
-            control: '[Missing translation]',
-            collect: '[Missing translation]',
+            free: 'Gratis',
+            control: 'Control',
+            collect: 'Recolectar',
         },
         emptyWorkspace: {
             title: 'Crear un nuevo espacio de trabajo',

From a73d34b13a35a79ce5d98b56ea2c1dbfeaf72ec1 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 12 Dec 2023 23:05:14 +0100
Subject: [PATCH 27/53] Revert changes made to WorkspacesListPage

---
 src/pages/workspace/WorkspacesListPage.js | 60 ++++++++++-------------
 1 file changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index 84ce145429b6..cf258b462285 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
-import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Button from '@components/Button';
@@ -29,7 +28,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
-import WorkspacesListRow from './WorkspacesListRow';
 
 const propTypes = {
     /** The list of this user's policies */
@@ -108,7 +106,7 @@ function dismissWorkspaceError(policyID, pendingAction) {
     throw new Error('Not implemented');
 }
 
-function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, userWallet, personalDetails}) {
+function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, userWallet}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -164,30 +162,40 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
      */
     const workspaces = useMemo(() => {
         const reimbursementAccountBrickRoadIndicator = !_.isEmpty(reimbursementAccount.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
-
         return _.chain(policies)
             .filter((policy) => PolicyUtils.shouldShowPolicy(policy, isOffline))
             .map((policy) => ({
                 title: policy.name,
                 icon: policy.avatar ? policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policy.name),
-                type: policy.type,
-                ownerAccountID: policy.ownerAccountID,
-                // iconType: policy.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON,
-                // action: () => Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policy.id)),
-                // iconFill: theme.textLight,
-                // fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
-                // brickRoadIndicator: reimbursementAccountBrickRoadIndicator || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, allPolicyMembers),
-                // pendingAction: policy.pendingAction,
-                // errors: policy.errors,
-                // dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction),
-                // disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+                iconType: policy.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON,
+                action: () => Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policy.id)),
+                iconFill: theme.textLight,
+                fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
+                brickRoadIndicator: reimbursementAccountBrickRoadIndicator || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, allPolicyMembers),
+                pendingAction: policy.pendingAction,
+                errors: policy.errors,
+                dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction),
+                disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
             }))
             .sortBy((policy) => policy.title.toLowerCase())
             .value();
     }, [reimbursementAccount.errors, policies, isOffline, theme.textLight, allPolicyMembers]);
 
     return (
-        <View style={[styles.dFlex, styles.gap3, styles.m5]}>
+        <IllustratedHeaderPageLayout
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.WORKSPACES].backgroundColor}
+            illustration={LottieAnimations.WorkspacePlanet}
+            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
+            title={translate('common.workspaces')}
+            footer={
+                <Button
+                    accessibilityLabel={translate('workspace.new.newWorkspace')}
+                    success
+                    text={translate('workspace.new.newWorkspace')}
+                    onPress={() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()}
+                />
+            }
+        >
             {_.isEmpty(workspaces) ? (
                 <FeatureList
                     menuItems={workspaceFeatures}
@@ -195,22 +203,9 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
                     description="workspace.emptyWorkspace.subtitle"
                 />
             ) : (
-                _.map(workspaces, (item, index) => (
-                    <WorkspacesListRow
-                        key={`${item.title}${index}`}
-                        title={item.title}
-                        workspaceIcon={item.icon}
-                        fallbackWorkspaceIcon={item.fallbackIcon}
-                        // Real data
-                        // ownerAccountID={item.ownerAccountID}
-                        // workspaceType={item.type}
-                        // Randomized data for testing
-                        ownerAccountID={personalDetails ? Object.keys(personalDetails)[Math.floor(Math.random() * Object.keys(personalDetails).length)] : 1}
-                        workspaceType={[CONST.POLICY.TYPE.CORPORATE, CONST.POLICY.TYPE.TEAM, CONST.POLICY.TYPE.FREE][Math.floor(Math.random() * 3)]}
-                    />
-                ))
+                _.map(workspaces, (item, index) => getMenuItem(item, index))
             )}
-        </View>
+        </IllustratedHeaderPageLayout>
     );
 }
 
@@ -233,8 +228,5 @@ export default compose(
         userWallet: {
             key: ONYXKEYS.USER_WALLET,
         },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
     }),
 )(WorkspacesListPage);

From 1c3727505168de8e8fe29c7cd377d59016150ffd Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 12 Dec 2023 23:07:07 +0100
Subject: [PATCH 28/53] Rename style

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

diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index b42540bacb13..7b816b0d052c 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -100,7 +100,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
                                     <Text
                                         // eslint-disable-next-line react/no-array-index-key
                                         key={`${text}${i}`}
-                                        style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsHandle]}
+                                        style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.textSupporting]}
                                     >
                                         {text}
                                     </Text>
@@ -119,7 +119,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
             styles.flexShrink1,
             styles.flex1,
             styles.mentionSuggestionsDisplayName,
-            styles.mentionSuggestionsHandle,
+            styles.textSupporting,
             theme.success,
             StyleUtils,
         ],

From 97402b4158de4c97d07e2efebe71678dd4869590 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 18:01:43 +0100
Subject: [PATCH 29/53] Fix import

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

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 5a264f605e5b..7e9333b9e289 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -10,7 +10,7 @@ import withCurrentUserPersonalDetails, {WithCurrentUserPersonalDetailsProps} fro
 import useLocalize from '@hooks/useLocalize';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import {Policy} from '@src/types/onyx';
 

From 27ada44e2f30e672fef1f4cafdce901c6fb9e48d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 19:14:58 +0100
Subject: [PATCH 30/53] Reorder imports

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

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 7e9333b9e289..0730b2f5a46f 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -8,9 +8,9 @@ import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import withCurrentUserPersonalDetails, {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
-import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import {Policy} from '@src/types/onyx';
 

From c9159237fe029e6c89dac80d245b10e384c56af1 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 13:22:44 +0100
Subject: [PATCH 31/53] Use basic types

---
 src/pages/workspace/WorkspacesListRow.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 0730b2f5a46f..0434c7108059 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -12,14 +12,13 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import CONST from '@src/CONST';
-import {Policy} from '@src/types/onyx';
 
 type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Name of the workspace */
-    title: Policy['name'];
+    title: string;
 
     /** Account ID of the workspace's owner */
-    ownerAccountID: Policy['ownerAccountID'];
+    ownerAccountID: number;
 
     /** Type of workspace. Type personal is not valid in this context so it's omitted */
     workspaceType: typeof CONST.POLICY.TYPE.FREE | typeof CONST.POLICY.TYPE.CORPORATE | typeof CONST.POLICY.TYPE.TEAM;

From 819a131b5f3998ee82e8caa9af3056800d6b51ec Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 13:23:49 +0100
Subject: [PATCH 32/53] Drop undefined from type list

---
 src/pages/workspace/WorkspacesListRow.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 0434c7108059..300463d98dc0 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -24,13 +24,13 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     workspaceType: typeof CONST.POLICY.TYPE.FREE | typeof CONST.POLICY.TYPE.CORPORATE | typeof CONST.POLICY.TYPE.TEAM;
 
     /** Icon to show next to the workspace name */
-    workspaceIcon?: AvatarSource | undefined;
+    workspaceIcon?: AvatarSource;
 
     /** Icon to be used when workspaceIcon is not present */
-    fallbackWorkspaceIcon: AvatarSource | undefined;
+    fallbackWorkspaceIcon: AvatarSource;
 
     /** Renders the component using big screen layout or small screen layout */
-    isWide: boolean | undefined;
+    isWide: boolean;
 };
 
 const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType']): React.FC<SvgProps> => {

From 6727a2441cea7ab856e2b10d5f545b7a00e0a70f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 13:25:08 +0100
Subject: [PATCH 33/53] Use array destructuring

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

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 300463d98dc0..37a992bdbaa6 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -50,7 +50,7 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const ownerDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];
+    const [ownerDetails] = PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID);
 
     const userFriendlyWorkspaceType = useMemo(() => {
         switch (workspaceType) {

From b324fb0c5658942fd8e63c4560ba86016381a8f0 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 13:32:38 +0100
Subject: [PATCH 34/53] Return null instead of empty Element

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

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 37a992bdbaa6..ad1819ebadde 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -66,7 +66,7 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
     }, [workspaceType, translate]);
 
     if (isWide === undefined) {
-        return <></>;
+        return null;
     }
 
     return (

From bd678adb4dc7eb164798d465a2e70801b791a0eb Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 13:32:54 +0100
Subject: [PATCH 35/53] Mark fallbackWorkspaceIcon as optional

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

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index ad1819ebadde..a00d3a9c4e21 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -27,7 +27,7 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     workspaceIcon?: AvatarSource;
 
     /** Icon to be used when workspaceIcon is not present */
-    fallbackWorkspaceIcon: AvatarSource;
+    fallbackWorkspaceIcon?: AvatarSource;
 
     /** Renders the component using big screen layout or small screen layout */
     isWide: boolean;

From 9133ee45d0daec80307bd404b028e97852fee7f1 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 13:37:14 +0100
Subject: [PATCH 36/53] Explanation to the isWide prop

---
 src/pages/workspace/WorkspacesListRow.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index a00d3a9c4e21..a881754f9be9 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -29,7 +29,8 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Icon to be used when workspaceIcon is not present */
     fallbackWorkspaceIcon?: AvatarSource;
 
-    /** Renders the component using big screen layout or small screen layout */
+    /** Renders the component using big screen layout or small screen layout. When isWide is undefined, component
+     * will return nil to prevent layout from jumping on initial render and when parent width changes. */
     isWide: boolean;
 };
 
@@ -66,6 +67,8 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
     }, [workspaceType, translate]);
 
     if (isWide === undefined) {
+        // To prevent layout from jumping or rendering for a split second, when
+        // isWide is undefined we don't assume anything and simply return null.
         return null;
     }
 

From cb54be72128aae86b62c25aa11eab7328befa425 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 16:18:34 +0100
Subject: [PATCH 37/53] Add menuItems prop and drop unnecessary props

---
 src/pages/workspace/WorkspacesListRow.tsx | 27 ++++++-----------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index a881754f9be9..9982f07ccac0 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -12,6 +12,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import CONST from '@src/CONST';
+import {MenuItem} from '@src/types/onyx/OnyxCommon';
 
 type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Name of the workspace */
@@ -29,6 +30,9 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Icon to be used when workspaceIcon is not present */
     fallbackWorkspaceIcon?: AvatarSource;
 
+    /** Items for the three dots menu */
+    menuItems: MenuItem[];
+
     /** Renders the component using big screen layout or small screen layout. When isWide is undefined, component
      * will return nil to prevent layout from jumping on initial render and when parent width changes. */
     isWide: boolean;
@@ -47,7 +51,7 @@ const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType'
     }
 };
 
-function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAccountID, workspaceType, currentUserPersonalDetails, isWide}: WorkspacesListRowProps) {
+function WorkspacesListRow({title, menuItems, workspaceIcon, fallbackWorkspaceIcon, ownerAccountID, workspaceType, currentUserPersonalDetails, isWide}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -91,17 +95,8 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
                 </Text>
                 {!isWide && (
                     <ThreeDotsMenu
-                        menuItems={[]}
+                        menuItems={menuItems}
                         anchorPosition={{top: 0, right: 0}}
-                        iconTooltip={undefined}
-                        icon={undefined}
-                        iconFill={undefined}
-                        iconStyles={undefined}
-                        onIconPress={undefined}
-                        anchorAlignment={undefined}
-                        shouldOverlay={undefined}
-                        shouldSetModalVisibility={undefined}
-                        disabled={undefined}
                     />
                 )}
             </View>
@@ -150,17 +145,9 @@ function WorkspacesListRow({title, workspaceIcon, fallbackWorkspaceIcon, ownerAc
             </View>
             {isWide && (
                 <ThreeDotsMenu
-                    menuItems={[]}
+                    menuItems={menuItems}
                     anchorPosition={{top: 0, right: 0}}
                     iconStyles={[styles.mr2]}
-                    iconTooltip={undefined}
-                    icon={undefined}
-                    iconFill={undefined}
-                    onIconPress={undefined}
-                    anchorAlignment={undefined}
-                    shouldOverlay={undefined}
-                    shouldSetModalVisibility={undefined}
-                    disabled={undefined}
                 />
             )}
         </View>

From 6bba756e13ac4510ad2f83fb5a27345d6e0b1bb2 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 18:15:08 +0100
Subject: [PATCH 38/53] CONST instead of boolean

---
 src/CONST.ts                              |  6 +++++
 src/pages/workspace/WorkspacesListRow.tsx | 31 ++++++++++++++++-------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 2e2f591f7117..980f766fe14a 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1285,6 +1285,12 @@ const CONST = {
         USE_EXPENSIFY_FEES: 'use.expensify.com/fees',
     },
 
+    LAYOUT: {
+        WIDE: 'wide',
+        NARROW: 'narrow',
+        NONE: 'none',
+    },
+
     ICON_TYPE_ICON: 'icon',
     ICON_TYPE_AVATAR: 'avatar',
     ICON_TYPE_WORKSPACE: 'workspace',
diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 9982f07ccac0..94d855b047d9 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import {SvgProps} from 'react-native-svg';
+import {ValueOf} from 'type-fest';
 import Avatar from '@components/Avatar';
 import Icon from '@components/Icon';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -33,9 +34,9 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Items for the three dots menu */
     menuItems: MenuItem[];
 
-    /** Renders the component using big screen layout or small screen layout. When isWide is undefined, component
-     * will return nil to prevent layout from jumping on initial render and when parent width changes. */
-    isWide: boolean;
+    /** Renders the component using big screen layout or small screen layout. When renderLayout === WorkspaceListRowLayout.NONE,
+     * component will return null to prevent layout from jumping on initial render and when parent width changes. */
+    renderLayout?: ValueOf<typeof CONST.LAYOUT>;
 };
 
 const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType']): React.FC<SvgProps> => {
@@ -51,7 +52,16 @@ const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType'
     }
 };
 
-function WorkspacesListRow({title, menuItems, workspaceIcon, fallbackWorkspaceIcon, ownerAccountID, workspaceType, currentUserPersonalDetails, isWide}: WorkspacesListRowProps) {
+function WorkspacesListRow({
+    title,
+    menuItems,
+    workspaceIcon,
+    fallbackWorkspaceIcon,
+    ownerAccountID,
+    workspaceType,
+    currentUserPersonalDetails,
+    renderLayout = CONST.LAYOUT.NONE,
+}: WorkspacesListRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -70,15 +80,18 @@ function WorkspacesListRow({title, menuItems, workspaceIcon, fallbackWorkspaceIc
         }
     }, [workspaceType, translate]);
 
-    if (isWide === undefined) {
+    if (renderLayout === CONST.LAYOUT.NONE) {
         // To prevent layout from jumping or rendering for a split second, when
         // isWide is undefined we don't assume anything and simply return null.
         return null;
     }
 
+    const isWide = renderLayout === CONST.LAYOUT.WIDE;
+    const isNarrow = renderLayout === CONST.LAYOUT.NARROW;
+
     return (
         <View style={[isWide ? styles.flexRow : styles.flexColumn, isWide && styles.gap5, styles.highlightBG, styles.br3, styles.pv5, styles.pl5]}>
-            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, !isWide && [styles.mb3, styles.mr2], styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, isNarrow && [styles.mb3, styles.mr2], styles.alignItemsCenter]}>
                 <Avatar
                     imageStyles={[styles.alignSelfCenter]}
                     size={CONST.AVATAR_SIZE.DEFAULT}
@@ -93,14 +106,14 @@ function WorkspacesListRow({title, menuItems, workspaceIcon, fallbackWorkspaceIc
                 >
                     {title}
                 </Text>
-                {!isWide && (
+                {isNarrow && (
                     <ThreeDotsMenu
                         menuItems={menuItems}
                         anchorPosition={{top: 0, right: 0}}
                     />
                 )}
             </View>
-            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, !isWide && styles.mr5, styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
                 <Avatar
                     source={ownerDetails.avatar}
                     size={CONST.AVATAR_SIZE.SMALL}
@@ -121,7 +134,7 @@ function WorkspacesListRow({title, menuItems, workspaceIcon, fallbackWorkspaceIc
                     </Text>
                 </View>
             </View>
-            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, !isWide && styles.mr5, styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
                 <Icon
                     src={workspaceTypeIcon(workspaceType)}
                     width={34}

From 67ecbbe2d0d1cf723d7f63b78ce93827b51b1624 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 19 Dec 2023 09:25:07 +0100
Subject: [PATCH 39/53] MenuItem type

---
 src/types/onyx/OnyxCommon.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/types/onyx/OnyxCommon.ts b/src/types/onyx/OnyxCommon.ts
index 956e9ff36b24..84289464595c 100644
--- a/src/types/onyx/OnyxCommon.ts
+++ b/src/types/onyx/OnyxCommon.ts
@@ -1,3 +1,4 @@
+import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import {AvatarSource} from '@libs/UserUtils';
 import CONST from '@src/CONST';
@@ -12,6 +13,14 @@ type Errors = Record<string, string>;
 
 type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
 
+type MenuItem = {
+    icon: React.FC<SvgProps>;
+
+    text: string;
+
+    onPress: () => void;
+};
+
 type Icon = {
     /** Avatar source to display */
     source: AvatarSource;
@@ -29,4 +38,4 @@ type Icon = {
     fallbackIcon?: AvatarSource;
 };
 
-export type {Icon, PendingAction, PendingFields, ErrorFields, Errors, AvatarType};
+export type {Icon, MenuItem, PendingAction, PendingFields, ErrorFields, Errors, AvatarType};

From 410915d951f9bb0220f6fc65d39805ef22f0e332 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 19 Dec 2023 10:30:11 +0100
Subject: [PATCH 40/53] Fix ownerDetails usage with util function

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

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 94d855b047d9..00d022ed8b7d 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -124,7 +124,7 @@ function WorkspacesListRow({
                         numberOfLines={1}
                         style={[styles.labelStrong]}
                     >
-                        {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails, 'displayName')}
+                        {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails.displayName)}
                     </Text>
                     <Text
                         numberOfLines={1}

From 9fb3e340a99186c3845477c33c6d1dd482981c19 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 19 Dec 2023 10:30:53 +0100
Subject: [PATCH 41/53] Fix wrong usage of nullish coalescing

---
 src/libs/PersonalDetailsUtils.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/libs/PersonalDetailsUtils.ts b/src/libs/PersonalDetailsUtils.ts
index 8bb4ac0aea3e..a5a033797c7b 100644
--- a/src/libs/PersonalDetailsUtils.ts
+++ b/src/libs/PersonalDetailsUtils.ts
@@ -20,7 +20,11 @@ Onyx.connect({
  * @param [defaultValue] optional default display name value
  */
 function getDisplayNameOrDefault(displayName?: string, defaultValue = ''): string {
-    return displayName ?? defaultValue ?? Localize.translateLocal('common.hidden');
+    // Not using nullish coalescing as it differs from OR for strings. For example:
+    // '' || 'A' === 'A'
+    // '' ?? 'A' === ''
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    return displayName || defaultValue || Localize.translateLocal('common.hidden');
 }
 
 /**

From 39628d0c6b3cebb2b415373f600bba4c1a5fd5de Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 19 Dec 2023 20:01:07 +0100
Subject: [PATCH 42/53] Use updated MenuItem prop

---
 src/pages/workspace/WorkspacesListRow.tsx |  4 ++--
 src/types/onyx/OnyxCommon.ts              | 11 +----------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 00d022ed8b7d..0e008a279c59 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -5,6 +5,7 @@ import {ValueOf} from 'type-fest';
 import Avatar from '@components/Avatar';
 import Icon from '@components/Icon';
 import * as Illustrations from '@components/Icon/Illustrations';
+import {MenuItemProps} from '@components/MenuItem';
 import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import withCurrentUserPersonalDetails, {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
@@ -13,7 +14,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import CONST from '@src/CONST';
-import {MenuItem} from '@src/types/onyx/OnyxCommon';
 
 type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Name of the workspace */
@@ -32,7 +32,7 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     fallbackWorkspaceIcon?: AvatarSource;
 
     /** Items for the three dots menu */
-    menuItems: MenuItem[];
+    menuItems: MenuItemProps[];
 
     /** Renders the component using big screen layout or small screen layout. When renderLayout === WorkspaceListRowLayout.NONE,
      * component will return null to prevent layout from jumping on initial render and when parent width changes. */
diff --git a/src/types/onyx/OnyxCommon.ts b/src/types/onyx/OnyxCommon.ts
index 84289464595c..956e9ff36b24 100644
--- a/src/types/onyx/OnyxCommon.ts
+++ b/src/types/onyx/OnyxCommon.ts
@@ -1,4 +1,3 @@
-import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import {AvatarSource} from '@libs/UserUtils';
 import CONST from '@src/CONST';
@@ -13,14 +12,6 @@ type Errors = Record<string, string>;
 
 type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
 
-type MenuItem = {
-    icon: React.FC<SvgProps>;
-
-    text: string;
-
-    onPress: () => void;
-};
-
 type Icon = {
     /** Avatar source to display */
     source: AvatarSource;
@@ -38,4 +29,4 @@ type Icon = {
     fallbackIcon?: AvatarSource;
 };
 
-export type {Icon, MenuItem, PendingAction, PendingFields, ErrorFields, Errors, AvatarType};
+export type {Icon, PendingAction, PendingFields, ErrorFields, Errors, AvatarType};

From 657b3fdaca98889c26dc9e48ea168f9d54731e23 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 20 Dec 2023 15:25:44 +0100
Subject: [PATCH 43/53] Rename layout to layout_width

---
 src/CONST.ts                              |  2 +-
 src/pages/workspace/WorkspacesListRow.tsx | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index a3f4736505ea..b283808368e9 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1291,7 +1291,7 @@ const CONST = {
         USE_EXPENSIFY_FEES: 'use.expensify.com/fees',
     },
 
-    LAYOUT: {
+    LAYOUT_WIDTH: {
         WIDE: 'wide',
         NARROW: 'narrow',
         NONE: 'none',
diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 0e008a279c59..014cdac13986 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -34,9 +34,9 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Items for the three dots menu */
     menuItems: MenuItemProps[];
 
-    /** Renders the component using big screen layout or small screen layout. When renderLayout === WorkspaceListRowLayout.NONE,
+    /** Renders the component using big screen layout or small screen layout. When layoutWidth === WorkspaceListRowLayout.NONE,
      * component will return null to prevent layout from jumping on initial render and when parent width changes. */
-    renderLayout?: ValueOf<typeof CONST.LAYOUT>;
+    layoutWidth?: ValueOf<typeof CONST.LAYOUT_WIDTH>;
 };
 
 const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType']): React.FC<SvgProps> => {
@@ -60,7 +60,7 @@ function WorkspacesListRow({
     ownerAccountID,
     workspaceType,
     currentUserPersonalDetails,
-    renderLayout = CONST.LAYOUT.NONE,
+    layoutWidth = CONST.LAYOUT_WIDTH.NONE,
 }: WorkspacesListRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -80,14 +80,14 @@ function WorkspacesListRow({
         }
     }, [workspaceType, translate]);
 
-    if (renderLayout === CONST.LAYOUT.NONE) {
+    if (layoutWidth === CONST.LAYOUT_WIDTH.NONE) {
         // To prevent layout from jumping or rendering for a split second, when
         // isWide is undefined we don't assume anything and simply return null.
         return null;
     }
 
-    const isWide = renderLayout === CONST.LAYOUT.WIDE;
-    const isNarrow = renderLayout === CONST.LAYOUT.NARROW;
+    const isWide = layoutWidth === CONST.LAYOUT_WIDTH.WIDE;
+    const isNarrow = layoutWidth === CONST.LAYOUT_WIDTH.NARROW;
 
     return (
         <View style={[isWide ? styles.flexRow : styles.flexColumn, isWide && styles.gap5, styles.highlightBG, styles.br3, styles.pv5, styles.pl5]}>

From 7938e1ee14f31661036b0cfebe7c3218de15d755 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 20 Dec 2023 16:52:12 +0100
Subject: [PATCH 44/53] Add new icons

---
 .../simple-illustration__handcard.svg         | 41 +++++++++++
 .../simple-illustration__mailbox.svg          | 71 +++++++++++++++++++
 src/components/Icon/Illustrations.ts          |  4 ++
 3 files changed, 116 insertions(+)
 create mode 100644 assets/images/simple-illustrations/simple-illustration__handcard.svg
 create mode 100644 assets/images/simple-illustrations/simple-illustration__mailbox.svg

diff --git a/assets/images/simple-illustrations/simple-illustration__handcard.svg b/assets/images/simple-illustrations/simple-illustration__handcard.svg
new file mode 100644
index 000000000000..7419b33d425c
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__handcard.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 68 68" style="enable-background:new 0 0 68 68;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#008C59;}
+	.st1{fill:#E3A171;}
+	.st2{fill:none;stroke:#002140;stroke-width:0.999;stroke-linecap:round;stroke-linejoin:round;}
+	.st3{fill:#085239;}
+	.st4{fill:#03D47C;}
+</style>
+<path class="st0" d="M56.1,41L32.3,24.8c-1.1-0.8-2.7-0.5-3.5,0.7l-8.4,12.3c-0.8,1.1-0.5,2.7,0.7,3.5l23.8,16.2
+	c1.1,0.8,2.7,0.5,3.5-0.7l8.4-12.3C57.5,43.3,57.2,41.7,56.1,41z"/>
+<path class="st1" d="M27.3,27.6c0,0,0.9,0.1,1.9,0.1c1-0.1,2.4-0.5,2.4-0.5s0.5,5.7,1.2,6.3c0.7,0.7,3,2.4,5.2,1.2
+	c2.2-1.2,3.1-1.4,2.7-2.9c-0.4-1.5-3.5-7.3-3.5-7.3s-0.1-3.2-0.1-3.9s0.7-5.2-3.2-6c-3.9-0.8-6.8-0.7-9.3-1.6C22.2,12.3,20,10,20,10
+	s-9.6,3.9-9.8,12.1c0,0,3.7,3.5,5.1,6.1c1.4,2.5,3.2,8.7,5.5,8.8L27.3,27.6L27.3,27.6z"/>
+<path class="st1" d="M38.1,53L22.3,42.4c0,0-4.6,3.9-2.6,6c2.1,2.1,5.5-0.2,5.5-0.2s-1.4,2.9,0,4.1c1.4,1.2,5.1-0.4,5.1-0.4
+	s-1.5,3,0.7,4.1C33.3,57.1,36.9,54.4,38.1,53L38.1,53z"/>
+<path class="st2" d="M40.3,30.4L56,41c1.2,0.8,1.5,2.4,0.7,3.5l-8.3,12.3c-0.8,1.2-2.4,1.5-3.5,0.7L20.9,41.2
+	c-1.2-0.8-1.5-2.4-0.7-3.5l7.1-10.4"/>
+<path class="st3" d="M31.6,35.6l-0.3-0.2c-0.3-0.2-0.6-0.1-0.8,0.2l-0.6,0.9c-0.2,0.3-0.1,0.6,0.2,0.8l0.3,0.2
+	c0.3,0.2,0.6,0.1,0.8-0.2l0.6-0.9C32,36.1,31.9,35.8,31.6,35.6z"/>
+<path class="st3" d="M32.9,33.7l-0.3-0.2c-0.3-0.2-0.6-0.1-0.8,0.2l-0.4,0.6c-0.2,0.3-0.1,0.6,0.2,0.8l0.3,0.2
+	c0.3,0.2,0.6,0.1,0.8-0.2l0.4-0.6C33.2,34.3,33.2,33.9,32.9,33.7z"/>
+<path class="st3" d="M33.1,37l-0.3-0.2c-0.3-0.2-0.6-0.1-0.8,0.2l-0.4,0.6c-0.2,0.3-0.1,0.6,0.2,0.8l0.3,0.2
+	c0.3,0.2,0.6,0.1,0.8-0.2l0.4-0.6C33.4,37.5,33.3,37.2,33.1,37z"/>
+<path class="st3" d="M34.5,34.8l-0.3-0.2c-0.3-0.2-0.6-0.1-0.8,0.2l-0.6,0.9c-0.2,0.3-0.1,0.6,0.2,0.8l0.3,0.2
+	c0.3,0.2,0.6,0.1,0.8-0.2l0.6-0.9C34.8,35.4,34.7,35,34.5,34.8z"/>
+<path class="st4" d="M52.7,41.8l-8.3-5.6c-1-0.7-2.4-0.4-3.1,0.6s-0.4,2.4,0.6,3.1l8.3,5.6c1,0.7,2.4,0.4,3.1-0.6
+	C54,43.9,53.7,42.5,52.7,41.8z"/>
+<path class="st2" d="M19.9,10c0,0-9.3,3.7-9.9,12c6,4.8,6.9,12.1,10.5,15.2"/>
+<path class="st2" d="M22.4,42.3c-2.8,2-4.3,5.5-1.8,6.7c1.8,0.9,4-0.4,5.4-1.5"/>
+<path class="st2" d="M27.6,45.9c-3,2.5-4.4,5.5-1.9,6.7c1.6,0.8,3.5-0.1,4.8-1.1"/>
+<path class="st2" d="M32.6,49.3c-3.1,2.8-4.2,5.6-1.8,6.8c1.8,0.9,4.2,0.2,7.2-3.2"/>
+<path class="st2" d="M23.7,39l4.9,3.4"/>
+<path class="st2" d="M30.9,43.9l4.9,3.4"/>
+<path class="st3" d="M29.2,36.2l2.7-4c0.1-0.2,0.1-0.5-0.1-0.6l-1.4-0.9c-0.1-0.1-0.3-0.1-0.4-0.1l-0.9,0.3c-0.1,0-0.2,0.1-0.2,0.2
+	l-2,2.9c-0.1,0.1-0.1,0.2-0.1,0.3l0,0.7c0,0.1,0.1,0.3,0.2,0.4l1.5,1C28.7,36.4,29,36.4,29.2,36.2z"/>
+<path class="st2" d="M25.2,26.2c0,0,3.9,2.9,6.6,0.6c-0.6,5.4,2.1,10,6.9,7.7c4.8-2.3-1.1-7.9-1.5-10.8s1.2-5.4-1.4-7.9
+	C33.1,13.3,24.3,15.1,20,10"/>
+</svg>
diff --git a/assets/images/simple-illustrations/simple-illustration__mailbox.svg b/assets/images/simple-illustrations/simple-illustration__mailbox.svg
new file mode 100644
index 000000000000..81b1f508fb52
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__mailbox.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 68 68" style="enable-background:new 0 0 68 68;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFAF0;}
+	.st1{fill:#FFED8F;}
+	.st2{fill:#E4BC07;}
+	.st3{fill:#D18000;}
+	.st4{fill:#0164BF;}
+	.st5{fill:#0185FF;}
+	.st6{fill:#F25730;}
+	.st7{fill:none;stroke:#002140;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<path class="st0" d="M24.5,27.1v11h-3.7v-9.6c0-0.9,0.4-1.4,1.4-1.4H24.5z"/>
+<path class="st1" d="M28.9,24.7v13.4h-4.5V26.3c0-0.9,0.5-1.6,1.5-1.6H28.9z"/>
+<path class="st2" d="M28.9,22.7v2H26c-1.1,0-1.5,0.7-1.5,1.6v0.8h-2.3c-1,0-1.4,0.5-1.4,1.4v9.6h-2.7V24.5c0-1.5,0.7-2.4,2.4-2.4
+	h8.4C28.9,22.3,28.9,22.5,28.9,22.7L28.9,22.7z"/>
+<path class="st3" d="M43,40.7v22.8c0,1.3-0.3,2-1.9,1.9h-2.6V40.7H43z"/>
+<path class="st3" d="M38.5,40.7v24.7h-1.2c-1.6,0-1.9-0.7-1.9-1.9V40.7H38.5z"/>
+<path class="st4" d="M28.9,22.1h-8.4c-1.7,0-2.4,0.9-2.4,2.4v13.6h-2.8V22.7c0-4.1,3.4-6.1,6.8-6.1S28.6,18.4,28.9,22.1L28.9,22.1z"
+	/>
+<path class="st5" d="M28.9,38.1v2.6H8.1c-2,0-2-2.6,0-2.6H28.9z"/>
+<path class="st5" d="M28.9,22.1c-0.3-3.7-3.5-5.5-6.8-5.5h12.7V31c0,0.8,0.4,1.3,1.3,1.3h3.3c0.9,0,1.5-0.5,1.5-1.4v-2.9
+	c0-0.9-0.5-1.5-1.5-1.5h-1.9v-10h13.9c3.3,0.1,6.6,2.1,6.6,6.1v18H28.9v-18C28.9,22.5,28.9,22.3,28.9,22.1L28.9,22.1z"/>
+<path class="st6" d="M37.7,30.7c0.6,0,1.2-0.5,1.2-1.2c0-0.6-0.5-1.2-1.2-1.2s-1.2,0.5-1.2,1.2C36.6,30.2,37.1,30.7,37.7,30.7z"/>
+<path class="st6" d="M44.1,9.8l0,1.5c0,1.1-0.5,1.8-1.8,1.8h-3.2c-1.1,0-1.6,0.6-1.6,1.6v12h1.9c0.9,0,1.4,0.6,1.5,1.5V31
+	c0,0.9-0.5,1.4-1.5,1.4h-3.3c-0.9,0-1.3-0.5-1.3-1.3V10.6c0-1.5,0.9-2.6,2.6-2.6h4.9C43.4,8,44.1,8.6,44.1,9.8z M38.9,29.6
+	c0-0.6-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2C38.4,30.7,38.9,30.2,38.9,29.6z"/>
+<path class="st7" d="M58,40.7H43h-4.6h-3.1h-6.4H8.1"/>
+<path class="st7" d="M28.9,38.1h-4.5h-3.7h-2.7h-2.8H8.1"/>
+<path class="st7" d="M8.1,38.1c-2,0-2,2.6,0,2.6"/>
+<path class="st7" d="M28.9,40.7v-2.6V24.7v-2"/>
+<path class="st7" d="M15.3,38.1V22.7"/>
+<path class="st7" d="M28.9,22.7c0-0.2,0-0.4,0-0.6c-0.3-3.7-3.5-5.5-6.8-5.5c-3.4,0-6.8,2-6.8,6.1"/>
+<path class="st7" d="M58,40.7v-18"/>
+<path class="st7" d="M58,22.7c0-4-3.3-6-6.6-6.1"/>
+<path class="st7" d="M34.8,16.6H22.1"/>
+<path class="st7" d="M51.4,16.6H37.5"/>
+<path class="st7" d="M24.5,26.3v0.8v11"/>
+<path class="st7" d="M20.8,28.5v9.6"/>
+<path class="st7" d="M24.5,26.3c0-0.9,0.5-1.6,1.5-1.6"/>
+<path class="st7" d="M20.8,28.5c0-0.9,0.4-1.4,1.4-1.4"/>
+<path class="st7" d="M18.1,38.1V24.5"/>
+<path class="st7" d="M26,24.7h2.9"/>
+<path class="st7" d="M22.2,27.1h2.3"/>
+<path class="st7" d="M18.1,24.5c0-1.5,0.7-2.4,2.4-2.4"/>
+<path class="st7" d="M35.3,40.7v22.8"/>
+<path class="st7" d="M20.5,22.1h8.4h0"/>
+<path class="st7" d="M34.8,31V16.6v-6"/>
+<path class="st7" d="M37.5,26.6v-10v-2"/>
+<path class="st7" d="M35.3,63.5c0,1.3,0.3,2,1.9,1.9"/>
+<path class="st7" d="M43,40.7v22.8"/>
+<path class="st7" d="M43,63.5c0,1.3-0.3,2-1.9,1.9"/>
+<path class="st7" d="M37.3,65.4h1.2h2.6"/>
+<path class="st7" d="M38.5,40.7v24.7"/>
+<path class="st7" d="M34.8,10.6c0-1.5,0.9-2.6,2.6-2.6"/>
+<path class="st7" d="M37.5,14.7c0-1,0.5-1.6,1.6-1.6"/>
+<path class="st7" d="M36.1,32.4h3.3"/>
+<path class="st7" d="M40.8,31v-2.8"/>
+<path class="st7" d="M39.4,26.6h-1.9"/>
+<path class="st7" d="M39.4,26.6c0.9,0,1.4,0.6,1.5,1.5"/>
+<path class="st7" d="M39.4,32.4c0.9,0,1.5-0.5,1.5-1.4"/>
+<path class="st7" d="M36.1,32.4c-0.9,0-1.3-0.5-1.3-1.3"/>
+<path class="st7" d="M39.1,13.1h3.2"/>
+<path class="st7" d="M37.4,8h4.9"/>
+<path class="st7" d="M42.3,13.1c1.3,0,1.8-0.7,1.8-1.8"/>
+<path class="st7" d="M42.3,8c1.1,0,1.8,0.6,1.8,1.8"/>
+<path class="st7" d="M44.1,11.3l0-1.5"/>
+<path class="st7" d="M37.7,30.7c0.6,0,1.2-0.5,1.2-1.2c0-0.6-0.5-1.2-1.2-1.2s-1.2,0.5-1.2,1.2C36.6,30.2,37.1,30.7,37.7,30.7z"/>
+</svg>
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 0084ecf86b4f..b0690211d6c5 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -35,11 +35,13 @@ import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustra
 import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg';
 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 HandCard from '@assets/images/simple-illustrations/simple-illustration__handcard.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';
+import Mailbox from '@assets/images/simple-illustrations/simple-illustration__mailbox.svg';
 import MoneyReceipts from '@assets/images/simple-illustrations/simple-illustration__money-receipts.svg';
 import MoneyBadge from '@assets/images/simple-illustrations/simple-illustration__moneybadge.svg';
 import MoneyIntoWallet from '@assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg';
@@ -64,6 +66,7 @@ export {
     ConciergeExclamation,
     CreditCardsBlue,
     EmailAddress,
+    HandCard,
     HotDogStand,
     InvoiceOrange,
     JewelBoxBlue,
@@ -72,6 +75,7 @@ export {
     JewelBoxPink,
     JewelBoxYellow,
     MagicCode,
+    Mailbox,
     MoneyEnvelopeBlue,
     MoneyMousePink,
     ReceiptsSearchYellow,

From e212e7dac22a916ee616f95b14958621149c9c60 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 20 Dec 2023 16:52:25 +0100
Subject: [PATCH 45/53] Replace icons with design approved icons

---
 src/pages/workspace/WorkspacesListRow.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 014cdac13986..b4aa291c0aed 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -42,11 +42,11 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
 const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType']): React.FC<SvgProps> => {
     switch (workspaceType) {
         case CONST.POLICY.TYPE.FREE:
-            return Illustrations.BigRocket;
+            return Illustrations.HandCard;
         case CONST.POLICY.TYPE.CORPORATE:
-            return Illustrations.HotDogStand;
+            return Illustrations.ShieldYellow;
         case CONST.POLICY.TYPE.TEAM:
-            return Illustrations.SmallRocket;
+            return Illustrations.Mailbox;
         default:
             throw new Error(`Don't know which icon to serve for workspace type`);
     }

From cae203d13c78699ea68c7fb7642b1d9b76bf9946 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 21 Dec 2023 10:42:07 +0100
Subject: [PATCH 46/53] Make a variable out of workspace type icon width

---
 src/pages/workspace/WorkspacesListRow.tsx | 5 +++--
 src/styles/variables.ts                   | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index b4aa291c0aed..1901b3d7d630 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -14,6 +14,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import CONST from '@src/CONST';
+import variables from '@styles/variables';
 
 type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Name of the workspace */
@@ -137,8 +138,8 @@ function WorkspacesListRow({
             <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
                 <Icon
                     src={workspaceTypeIcon(workspaceType)}
-                    width={34}
-                    height={34}
+                    width={variables.workspaceTypeIconWidth}
+                    height={variables.workspaceTypeIconWidth}
                     additionalStyles={styles.workspaceTypeWrapper}
                 />
                 <View style={styles.dFlex}>
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 4904a224327a..2377753943c6 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -178,6 +178,7 @@ export default {
     reportActionItemImagesMoreCornerTriangleWidth: 40,
     bankCardWidth: 40,
     bankCardHeight: 26,
+    workspaceTypeIconWidth: 34,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility

From 02660a04f7e27a51d37eff62795c83e630a0003a Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 21 Dec 2023 11:11:00 +0100
Subject: [PATCH 47/53] Fix anchorPosition props

---
 src/components/PopoverMenu/index.js                | 12 ------------
 src/components/PopoverMenu/popoverMenuPropTypes.js |  6 ++++++
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 1bb50dfbd89e..defd7669d4be 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -18,21 +18,9 @@ const propTypes = {
     ...createMenuPropTypes,
     ...windowDimensionsPropTypes,
 
-    /** The horizontal and vertical anchors points for the popover */
-    anchorPosition: PropTypes.shape({
-        horizontal: PropTypes.number.isRequired,
-        vertical: PropTypes.number.isRequired,
-    }).isRequired,
-
     /** Ref of the anchor */
     anchorRef: refPropTypes,
 
-    /** Where the popover should be positioned relative to the anchor points. */
-    anchorAlignment: PropTypes.shape({
-        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
-        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
-    }),
-
     withoutOverlay: PropTypes.bool,
 
     /** Should we announce the Modal visibility changes? */
diff --git a/src/components/PopoverMenu/popoverMenuPropTypes.js b/src/components/PopoverMenu/popoverMenuPropTypes.js
index ae7a385a5297..0046547f822f 100644
--- a/src/components/PopoverMenu/popoverMenuPropTypes.js
+++ b/src/components/PopoverMenu/popoverMenuPropTypes.js
@@ -33,6 +33,12 @@ const propTypes = {
         left: PropTypes.number,
     }).isRequired,
 
+    /** Where the popover should be positioned relative to the anchor points. */
+    anchorAlignment: PropTypes.shape({
+        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
+        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
+    }),
+
     /** The anchor reference of the CreateMenu popover */
     anchorRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
 

From db9ff9e3318bc67dc41668c3bc41a20ef9ef0821 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 21 Dec 2023 11:14:39 +0100
Subject: [PATCH 48/53] Missing underscore import

---
 src/components/PopoverMenu/popoverMenuPropTypes.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PopoverMenu/popoverMenuPropTypes.js b/src/components/PopoverMenu/popoverMenuPropTypes.js
index 0046547f822f..b300d09b2dc0 100644
--- a/src/components/PopoverMenu/popoverMenuPropTypes.js
+++ b/src/components/PopoverMenu/popoverMenuPropTypes.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import CONST from '@src/CONST';
 
 const propTypes = {

From 015cbc37e37ecd4907a0e4172a35934e4e799aa6 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 21 Dec 2023 11:14:53 +0100
Subject: [PATCH 49/53] Reorder import

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

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 1901b3d7d630..dd5731e90bd5 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -13,8 +13,8 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
-import CONST from '@src/CONST';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 
 type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Name of the workspace */

From 102cbbd67df3365b64c6ff0b5a86e8b789a2c6cf Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 21 Dec 2023 12:42:45 +0100
Subject: [PATCH 50/53] Make ownerAccountID optional

---
 src/pages/workspace/WorkspacesListRow.tsx | 46 ++++++++++++-----------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index dd5731e90bd5..cdfbd9cc5995 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -21,7 +21,7 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     title: string;
 
     /** Account ID of the workspace's owner */
-    ownerAccountID: number;
+    ownerAccountID?: number;
 
     /** Type of workspace. Type personal is not valid in this context so it's omitted */
     workspaceType: typeof CONST.POLICY.TYPE.FREE | typeof CONST.POLICY.TYPE.CORPORATE | typeof CONST.POLICY.TYPE.TEAM;
@@ -66,7 +66,7 @@ function WorkspacesListRow({
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const [ownerDetails] = PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID);
+    const ownerDetails = ownerAccountID && PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];
 
     const userFriendlyWorkspaceType = useMemo(() => {
         switch (workspaceType) {
@@ -115,25 +115,29 @@ function WorkspacesListRow({
                 )}
             </View>
             <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
-                <Avatar
-                    source={ownerDetails.avatar}
-                    size={CONST.AVATAR_SIZE.SMALL}
-                    containerStyles={styles.workspaceOwnerAvatarWrapper}
-                />
-                <View style={styles.flex1}>
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.labelStrong]}
-                    >
-                        {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails.displayName)}
-                    </Text>
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.textMicro, styles.textSupporting]}
-                    >
-                        {ownerDetails.login}
-                    </Text>
-                </View>
+                {ownerDetails && (
+                    <>
+                        <Avatar
+                            source={ownerDetails.avatar}
+                            size={CONST.AVATAR_SIZE.SMALL}
+                            containerStyles={styles.workspaceOwnerAvatarWrapper}
+                        />
+                        <View style={styles.flex1}>
+                            <Text
+                                numberOfLines={1}
+                                style={[styles.labelStrong]}
+                            >
+                                {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails.displayName)}
+                            </Text>
+                            <Text
+                                numberOfLines={1}
+                                style={[styles.textMicro, styles.textSupporting]}
+                            >
+                                {ownerDetails.login}
+                            </Text>
+                        </View>
+                    </>
+                )}
             </View>
             <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
                 <Icon

From 4d7cc3ae85bc8163a471c51ab361beaa4d53de1b Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Wed, 27 Dec 2023 14:06:23 +0100
Subject: [PATCH 51/53] Fix typecheck

---
 src/pages/workspace/WorkspacesListRow.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index cdfbd9cc5995..cc64d85fd061 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -1,6 +1,5 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import Avatar from '@components/Avatar';
 import Icon from '@components/Icon';
@@ -15,6 +14,7 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import IconAsset from '@src/types/utils/IconAsset';
 
 type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Name of the workspace */
@@ -40,7 +40,7 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     layoutWidth?: ValueOf<typeof CONST.LAYOUT_WIDTH>;
 };
 
-const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType']): React.FC<SvgProps> => {
+const workspaceTypeIcon = (workspaceType: WorkspacesListRowProps['workspaceType']): IconAsset => {
     switch (workspaceType) {
         case CONST.POLICY.TYPE.FREE:
             return Illustrations.HandCard;

From 0502b00af98281a2aba9690314e03ccce9e0be5d Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Wed, 27 Dec 2023 14:36:07 +0100
Subject: [PATCH 52/53] Fix conditional rendering logic

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

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index cc64d85fd061..0d208aaa44c8 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -115,7 +115,7 @@ function WorkspacesListRow({
                 )}
             </View>
             <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
-                {ownerDetails && (
+                {!!ownerDetails && (
                     <>
                         <Avatar
                             source={ownerDetails.avatar}

From 2498c82ee2915462252968cda506c3965b7c8ffd Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Wed, 27 Dec 2023 14:45:05 +0100
Subject: [PATCH 53/53] Add a displayName

---
 src/pages/workspace/WorkspacesListRow.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 0d208aaa44c8..1a28ff47bbde 100755
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -172,4 +172,6 @@ function WorkspacesListRow({
     );
 }
 
+WorkspacesListRow.displayName = 'WorkspacesListRow';
+
 export default withCurrentUserPersonalDetails(WorkspacesListRow);