diff --git a/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
new file mode 100644
index 000000000000..732c16a75a2b
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/DatePicker/CalendarPicker/index.js b/src/components/DatePicker/CalendarPicker/index.js
index a404c4746397..bbdeda6ef84f 100644
--- a/src/components/DatePicker/CalendarPicker/index.js
+++ b/src/components/DatePicker/CalendarPicker/index.js
@@ -236,7 +236,7 @@ class CalendarPicker extends React.PureComponent {
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 440350895826..c8a14c7aba03 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -35,6 +35,7 @@ import ConciergeNew from '@assets/images/simple-illustrations/simple-illustratio
import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg';
+import HotDogStand from '@assets/images/simple-illustrations/simple-illustration__hotdogstand.svg';
import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg';
import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
@@ -60,6 +61,7 @@ export {
ConciergeExclamation,
CreditCardsBlue,
EmailAddress,
+ HotDogStand,
InvoiceOrange,
JewelBoxBlue,
JewelBoxGreen,
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index c2cc4abce6c5..96e6ea0bbc44 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -531,7 +531,7 @@ function MenuItem(
{badgeText && (
)}
{/* Since subtitle can be of type number, we should allow 0 to be shown */}
diff --git a/src/components/Section/IconSection.js b/src/components/Section/IconSection.js
new file mode 100644
index 000000000000..21dc458f2c76
--- /dev/null
+++ b/src/components/Section/IconSection.js
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+const iconSectionPropTypes = {
+ icon: PropTypes.icon,
+ IconComponent: PropTypes.IconComponent,
+ iconContainerStyles: PropTypes.iconContainerStyles,
+};
+
+const defaultIconSectionPropTypes = {
+ icon: null,
+ IconComponent: null,
+ iconContainerStyles: [],
+};
+
+function IconSection({icon, IconComponent, iconContainerStyles}) {
+ const styles = useThemeStyles();
+
+ return (
+
+ {Boolean(icon) && (
+
+ )}
+ {Boolean(IconComponent) && }
+
+ );
+}
+
+IconSection.displayName = 'IconSection';
+IconSection.propTypes = iconSectionPropTypes;
+IconSection.defaultProps = defaultIconSectionPropTypes;
+
+export default IconSection;
diff --git a/src/components/Section.js b/src/components/Section/index.js
similarity index 61%
rename from src/components/Section.js
rename to src/components/Section/index.js
index a59476fb0c05..cadadfe94b39 100644
--- a/src/components/Section.js
+++ b/src/components/Section/index.js
@@ -1,11 +1,16 @@
import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
+import MenuItemList from '@components/MenuItemList';
+import menuItemPropTypes from '@components/menuItemPropTypes';
+import Text from '@components/Text';
import useThemeStyles from '@hooks/useThemeStyles';
-import Icon from './Icon';
-import MenuItemList from './MenuItemList';
-import menuItemPropTypes from './menuItemPropTypes';
-import Text from './Text';
+import IconSection from './IconSection';
+
+const CARD_LAYOUT = {
+ ICON_ON_TOP: 'iconOnTop',
+ ICON_ON_RIGHT: 'iconOnRight',
+};
const propTypes = {
/** An array of props that are pass to individual MenuItem components */
@@ -23,6 +28,10 @@ const propTypes = {
/** Icon component */
IconComponent: PropTypes.func,
+ /** Card layout that affects icon positioning, margins, sizes. */
+ // eslint-disable-next-line rulesdir/prefer-underscore-method
+ cardLayout: PropTypes.oneOf(Object.values(CARD_LAYOUT)),
+
/** Contents to display inside the section */
children: PropTypes.node,
@@ -38,6 +47,9 @@ const propTypes = {
// eslint-disable-next-line react/forbid-prop-types
subtitleStyles: PropTypes.arrayOf(PropTypes.object),
+ /** Whether the subtitle should have a muted style */
+ subtitleMuted: PropTypes.bool,
+
/** Customize the Section container */
// eslint-disable-next-line react/forbid-prop-types
childrenStyles: PropTypes.arrayOf(PropTypes.object),
@@ -52,38 +64,45 @@ const defaultProps = {
children: null,
icon: null,
IconComponent: null,
+ cardLayout: CARD_LAYOUT.ICON_ON_RIGHT,
containerStyles: [],
iconContainerStyles: [],
titleStyles: [],
subtitleStyles: [],
+ subtitleMuted: false,
childrenStyles: [],
subtitle: null,
};
-function Section({children, childrenStyles, containerStyles, icon, IconComponent, iconContainerStyles, menuItems, subtitle, subtitleStyles, title, titleStyles}) {
+function Section({children, childrenStyles, containerStyles, icon, IconComponent, cardLayout, iconContainerStyles, menuItems, subtitle, subtitleStyles, subtitleMuted, title, titleStyles}) {
const styles = useThemeStyles();
+
return (
<>
-
+ {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
+
+ )}
+
{title}
-
- {Boolean(icon) && (
-
- )}
- {Boolean(IconComponent) && }
-
+ {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
+
+ )}
{Boolean(subtitle) && (
-
- {subtitle}
+
+ {subtitle}
)}
@@ -94,9 +113,9 @@ function Section({children, childrenStyles, containerStyles, icon, IconComponent
);
}
-
Section.displayName = 'Section';
Section.propTypes = propTypes;
Section.defaultProps = defaultProps;
+export {CARD_LAYOUT};
export default Section;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index fec747ae253b..71d27e341cac 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1489,8 +1489,9 @@ export default {
mustBeOnlineToViewMembers: 'You must be online in order to view members of this workspace.',
},
emptyWorkspace: {
- title: 'Create a new workspace',
- subtitle: "Workspaces are where you'll chat with your team, reimburse expenses, issue cards, send invoices, pay bills, and more — all in one place.",
+ title: 'Create a workspace',
+ subtitle: 'Manage business expenses, issue cards, send invoices, and more.',
+ createAWorkspaceCTA: 'Get Started',
features: {
trackAndCollect: 'Track and collect receipts',
companyCards: 'Company credit cards',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 73ee616d57bb..85223c559f81 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1512,8 +1512,9 @@ export default {
mustBeOnlineToViewMembers: 'Debes estar en línea para poder ver los miembros de este espacio de trabajo.',
},
emptyWorkspace: {
- title: 'Crear un nuevo espacio de trabajo',
- subtitle: 'En los espacios de trabajo es donde puedes chatear con tu equipo, reembolsar gastos, emitir tarjetas, enviar y pagar facturas y mas — todo en un mismo lugar',
+ title: 'Crea un espacio de trabajo',
+ subtitle: 'Administra gastos de empresa, emite tarjetas, envía facturas y mucho más.',
+ createAWorkspaceCTA: 'Comenzar',
features: {
trackAndCollect: 'Organiza recibos',
companyCards: 'Tarjetas de crédito corporativas',
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
new file mode 100644
index 000000000000..9e45bd143e7e
--- /dev/null
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import Button from '@components/Button';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Section, {CARD_LAYOUT} from '@components/Section';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function WorkspaceCardCreateAWorkspace() {
+ const styles = useThemeStyles();
+ const {translate} = useLocalize();
+
+ return (
+
+ );
+}
+
+WorkspaceCardCreateAWorkspace.displayName = 'WorkspaceCardNoVBAView';
+
+export default WorkspaceCardCreateAWorkspace;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index aececf93beb9..074e70622dac 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -938,10 +938,14 @@ const styles = (theme: ThemeColors) =>
overflow: 'hidden',
},
- calendarDayContainerSelected: {
+ buttonDefaultBG: {
backgroundColor: theme.buttonDefaultBG,
},
+ buttonHoveredBG: {
+ backgroundColor: theme.buttonHoveredBG,
+ },
+
autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>
({
height: lodashClamp(textInputHeight, minHeight, maxHeight),
@@ -1952,10 +1956,6 @@ const styles = (theme: ThemeColors) =>
alignSelf: 'flex-end',
},
- hoveredButton: {
- backgroundColor: theme.buttonHoveredBG,
- },
-
composerSizeButton: {
alignSelf: 'center',
height: 32,