Add indicators to let the user know if they are on staging or dev

.env.production

@@ -4,3 +4,4 @@ EXPENSIFY_PARTNER_NAME=chat-expensify-com
 EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66
 PUSHER_APP_KEY=268df511a204fbb60884
 USE_WEB_PROXY=false
+ENVIRONMENT=PRODUCTION

.env.staging

@@ -4,3 +4,4 @@ EXPENSIFY_PARTNER_NAME=chat-expensify-com
 EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66
 PUSHER_APP_KEY=268df511a204fbb60884
 USE_WEB_PROXY=false
+ENVIRONMENT=STAGING

config/electron.config.js

@@ -6,7 +6,7 @@ module.exports = {
     },
     mac: {
         category: 'public.app-category.finance',
-        icon: './desktop/icon.png',
+        icon: process.env.SHOULD_DEPLOY_PRODUCTION === 'true' ? './desktop/icon.png' : './desktop/icon-stg.png',
         hardenedRuntime: true,
         entitlements: 'desktop/entitlements.mac.plist',
         entitlementsInherit: 'desktop/entitlements.mac.plist',

desktop/main.js

@@ -117,6 +117,12 @@ const mainWindow = (() => {
         ? win => win.loadURL(`http://localhost:${port}`)
         : serve({directory: `${__dirname}/../dist`});
 
+    // Prod and staging set the icon in the electron-builder config, so only update it here for dev
+    if (isDev) {
+        app.dock.setIcon(`${__dirname}/icon-dev.png`);
+        app.setName('Expensify.cash');
+    }
+
     return app.whenReady()
         .then(() => {
             const browserWindow = new BrowserWindow({
@@ -130,6 +136,11 @@ const mainWindow = (() => {
                 titleBarStyle: 'hidden',
             });
 
+            // Prod and staging overwrite the app name in the electron-builder config, so only update it here for dev
+            if (isDev) {
+                browserWindow.setTitle('Expensify.cash');
+            }
+
             // List the Expensify Chat instance under the Window menu, even when it's hidden
             const systemMenu = Menu.getApplicationMenu();
             systemMenu.insert(4, new MenuItem({

src/CONFIG.js

@@ -28,6 +28,7 @@ export default {
         PARTNER_NAME: lodashGet(Config, 'EXPENSIFY_PARTNER_NAME', 'chat-expensify-com'),
         PARTNER_PASSWORD: lodashGet(Config, 'EXPENSIFY_PARTNER_PASSWORD', 'e21965746fd75f82bb66'),
         EXPENSIFY_CASH_REFERER: 'ecash',
+        ENVIRONMENT: lodashGet(Config, 'ENVIRONMENT', 'DEV'),
     },
     // eslint-disable-next-line no-undef
     IS_IN_PRODUCTION: Platform.OS === 'web' ? process.env.NODE_ENV === 'production' : !__DEV__,

src/CONST.js

@@ -108,6 +108,12 @@ const CONST = {
     },
 
     EMOJI_PICKER_SIZE: 360,
+
+    ENVIRONMENT: {
+        DEV: 'DEV',
+        STAGING: 'STAGING',
+        PRODUCTION: 'PRODUCTION',
+    },
 };
 
 export default CONST;

src/components/EnvironmentBadge.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Text, View} from 'react-native';
+import styles from '../styles/styles';
+import borders from '../styles/utilities/borders';
+import CONFIG from '../CONFIG';
+import CONST from '../CONST';
+
+const EnvironmentBadge = () => {
+    // If we are on production, don't show any badge
+    if (CONFIG.EXPENSIFY.ENVIRONMENT === CONST.ENVIRONMENT.PRODUCTION) {
+        return null;
+    }
+
+    let badgeText = 'DEV';
+    let style = styles.badgeDanger;
+
+    if (CONFIG.EXPENSIFY.ENVIRONMENT === CONST.ENVIRONMENT.STAGING) {
+        badgeText = 'STG';
+        style = styles.badgeSuccess;
+    }
+
+    return (
+        <View
+            style={[styles.badge, borders.brSmall, style, styles.ml2]}
+        >
+            <Text
+                style={styles.badgeText}
+                numberOfLines={1}
+            >
+                {badgeText}
+            </Text>
+        </View>
+    );
+};
+
+EnvironmentBadge.displayName = 'EnvironmentBadge';
+export default EnvironmentBadge;

src/components/ExpensifyCashLogo.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ProductionLogo from '../../assets/images/expensify-cash.svg';
+import DevLogo from '../../assets/images/expensify-cash-dev.svg';
+import StagingLogo from '../../assets/images/expensify-cash-stg.svg';
+import CONFIG from '../CONFIG';
+import CONST from '../CONST';
+
+const propTypes = {
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+};
+
+const ExpensifyCashLogo = (props) => {
+    if (CONFIG.EXPENSIFY.ENVIRONMENT === CONST.ENVIRONMENT.PRODUCTION) {
+        return <ProductionLogo width={props.width} height={props.height} />;
+    }
+
+    if (CONFIG.EXPENSIFY.ENVIRONMENT === CONST.ENVIRONMENT.STAGING) {
+        return <StagingLogo width={props.width} height={props.height} />;
+    }
+
+    return <DevLogo width={props.width} height={props.height} />;
+};
+
+ExpensifyCashLogo.propTypes = propTypes;
+ExpensifyCashLogo.displayName = 'ExpensifyCashLogo';
+
+export default ExpensifyCashLogo;

src/components/Header.js

@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import Text from './Text';
+import EnvironmentBadge from './EnvironmentBadge';
 
 const propTypes = {
     /** Title of the Header */
@@ -16,10 +17,11 @@ const defaultProps = {
     textSize: 'default',
 };
 const Header = props => (
-    <View style={[styles.flex1]}>
+    <View style={[styles.flex1, styles.flexRow]}>
         <Text numberOfLines={2} style={[styles.headerText, props.textSize === 'large' && styles.textLarge]}>
             {props.title}
         </Text>
+        <EnvironmentBadge />
     </View>
 );
 

src/components/IOUBadge.js

@@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import Num from 'expensify-common/lib/Num';
 import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
+import borders from '../styles/utilities/borders';
 
 const propTypes = {
     // IOU Report data object
@@ -22,7 +23,7 @@ const defaultProps = {
 
 const IOUBadge = props => (
     <View
-        style={[styles.badge, styles.badgeSuccess, styles.ml2]}
+        style={[styles.badge, borders.brLarge, styles.badgeSuccess, styles.ml2]}
     >
         <Text
             style={styles.badgeText}

src/pages/SetPasswordPage.js

@@ -11,7 +11,7 @@ import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import validateLinkPropTypes from './validateLinkPropTypes';
 import styles from '../styles/styles';
-import ExpensifyCashLogo from '../../assets/images/expensify-cash.svg';
+import ExpensifyCashLogo from '../components/ExpensifyCashLogo';
 import {setPassword} from '../libs/actions/Session';
 import ONYXKEYS from '../ONYXKEYS';
 import variables from '../styles/variables';

src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js

@@ -6,7 +6,7 @@ import {
 import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
-import ExpensifyCashLogo from '../../../../assets/images/expensify-cash.svg';
+import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png';
 import TermsAndLicenses from '../TermsAndLicenses';
 import WelcomeText from '../../../components/WelcomeText';

src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';
-import ExpensifyCashLogo from '../../../../assets/images/expensify-cash.svg';
+import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 import welcomeScreenshot from '../../../../assets/images/welcome-screenshot-wide.png';
 import variables from '../../../styles/variables';
 import TermsAndLicenses from '../TermsAndLicenses';

src/styles/styles.js

@@ -231,7 +231,6 @@ const styles = {
 
     badge: {
         backgroundColor: themeColors.badgeDefaultBG,
-        borderRadius: 14,
         height: variables.iconSizeNormal,
         flexDirection: 'row',
         paddingHorizontal: 7,
@@ -242,6 +241,10 @@ const styles = {
         backgroundColor: themeColors.badgeSuccessBG,
     },
 
+    badgeDanger: {
+        backgroundColor: themeColors.badgeDangerBG,
+    },
+
     badgeText: {
         color: themeColors.textReversed,
         fontSize: variables.fontSizeSmall,

src/styles/themes/default.js

@@ -29,6 +29,7 @@ export default {
     sidebarButtonBG: 'rgba(198, 201, 202, 0.25)',
     modalBackdrop: colors.gray3,
     modalBackground: colors.gray2,
+    badgeDangerBG: colors.red,
     badgeDefaultBG: colors.gray2,
     badgeSuccessBG: colors.green,
     buttonDisabledBG: colors.gray2,

src/styles/utilities/borders.js

@@ -0,0 +1,20 @@
+import variables from '../variables';
+
+/**
+ * Spacing utility styles with Bootstrap inspired naming.
+ *
+ * https://getbootstrap.com/docs/5.0/utilities/borders
+ */
+export default {
+    brSmall: {
+        borderRadius: variables.componentBorderRadiusSmall,
+    },
+
+    brNormal: {
+        borderRadius: variables.componentBorderRadiusNormal,
+    },
+
+    brLarge: {
+        borderRadius: variables.componentBorderRadiusLarge,
+    },
+};

src/styles/variables.js

@@ -6,6 +6,7 @@ export default {
     componentBorderRadius: 8,
     componentBorderRadiusSmall: 4,
     componentBorderRadiusNormal: 8,
+    componentBorderRadiusLarge: 12,
     avatarSizeNormal: 40,
     avatarSizeSmall: 28,
     fontSizeSmall: 11,