From 8766ee501ee6a26b2978637382afe4ddb0c92a3d Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 22 Nov 2022 12:59:50 -0800 Subject: [PATCH 1/6] Switch to dark mode, fix dark mode workspace list icon/checkmark colors. --- src/components/Checkbox.js | 3 ++- src/pages/workspace/WorkspacesListPage.js | 2 +- src/styles/themes/default.js | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 612220faf2081..b3d2c5ad953e8 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -2,6 +2,7 @@ import React from 'react'; import {View, Pressable} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; import stylePropTypes from '../styles/stylePropTypes'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; @@ -112,7 +113,7 @@ class Checkbox extends React.Component { this.state.isFocused && styles.borderColorFocus, ]} > - + )} diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js index e75bfe2dead81..41c6b3babed3e 100755 --- a/src/pages/workspace/WorkspacesListPage.js +++ b/src/pages/workspace/WorkspacesListPage.js @@ -122,7 +122,7 @@ class WorkspacesListPage extends Component { iconType: policy.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON, action: () => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policy.id)), iconStyles: policy.avatar ? [] : [styles.popoverMenuIconEmphasized], - iconFill: themeColors.iconReversed, + iconFill: themeColors.textLight, fallbackIcon: Expensicons.FallbackWorkspaceAvatar, brickRoadIndicator: PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, this.props.policyMembers), pendingAction: policy.pendingAction, diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index d38f514dbddfe..93bec3c15e33f 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -56,6 +56,7 @@ const darkTheme = { uploadPreviewActivityIndicator: colors.greenHighlightBackground, }; +// DEPRECATED THEME, Delete after successful rebranding. const oldTheme = { shadow: colors.black, link: colors.blue, @@ -111,4 +112,4 @@ const oldTheme = { textDark: colors.dark, }; -export default oldTheme; +export default darkTheme; From b6d7e41b72fcb84b1bdb235667acd4acdc606a97 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 22 Nov 2022 13:36:47 -0800 Subject: [PATCH 2/6] Fix unread message indicator --- src/pages/home/report/FloatingMessageCounter/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js index 97287442ce298..2d0067217c1bb 100644 --- a/src/pages/home/report/FloatingMessageCounter/index.js +++ b/src/pages/home/report/FloatingMessageCounter/index.js @@ -79,7 +79,7 @@ class FloatingMessageCounter extends PureComponent { onPress={this.props.onClick} ContentComponent={() => ( - + Date: Tue, 22 Nov 2022 15:54:49 -0800 Subject: [PATCH 3/6] Update Checkmark to green / remove icon when unchecked. --- src/components/Checkbox.js | 2 +- src/styles/styles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index b3d2c5ad953e8..d4f6adbf2c6c6 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -113,7 +113,7 @@ class Checkbox extends React.Component { this.state.isFocused && styles.borderColorFocus, ]} > - + {this.props.isChecked && } )} diff --git a/src/styles/styles.js b/src/styles/styles.js index 7adc9d975c173..ac0fce527bce1 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2150,7 +2150,7 @@ const styles = { }, checkedContainer: { - backgroundColor: themeColors.link, + backgroundColor: themeColors.success, }, iouAmountText: { From bf40317bc9a5d90e7c039cf2bdd8109cbb9426e7 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 22 Nov 2022 15:59:48 -0800 Subject: [PATCH 4/6] Adding checkbox color to themes incase we need to revert. --- src/styles/styles.js | 2 +- src/styles/themes/default.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index ac0fce527bce1..52ca2890663b9 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2150,7 +2150,7 @@ const styles = { }, checkedContainer: { - backgroundColor: themeColors.success, + backgroundColor: themeColors.checkBox, }, iouAmountText: { diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 93bec3c15e33f..aadce4fa652f7 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -54,6 +54,7 @@ const darkTheme = { placeholderText: colors.greenIcons, heroCard: colors.blue, uploadPreviewActivityIndicator: colors.greenHighlightBackground, + checkBox: colors.green, }; // DEPRECATED THEME, Delete after successful rebranding. @@ -95,6 +96,7 @@ const oldTheme = { heroCard: colors.blue, uploadPreviewActivityIndicator: colors.gray1, cardBG: colors.gray1, + checkBox: colors.blue, // Merging new Keys for Dark Mode merge. Delete after new branding is implemented. highlightBG: colors.gray1, From 7a505334da7da2fb809c36dd417c4e83230df58b Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 22 Nov 2022 17:32:41 -0800 Subject: [PATCH 5/6] Change status bar color to white for ios and android --- src/components/CustomStatusBar/index.android.js | 2 +- src/components/CustomStatusBar/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CustomStatusBar/index.android.js b/src/components/CustomStatusBar/index.android.js index 464d7437392d9..2d3579dbfeba4 100644 --- a/src/components/CustomStatusBar/index.android.js +++ b/src/components/CustomStatusBar/index.android.js @@ -7,7 +7,7 @@ import {StatusBar} from 'react-native'; export default class CustomStatusBar extends React.Component { componentDidMount() { - StatusBar.setBarStyle('dark-content'); + StatusBar.setBarStyle('light-content'); StatusBar.setBackgroundColor('transparent'); StatusBar.setTranslucent(true); } diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js index 0c5f999365cbb..e0f344e9e1c08 100644 --- a/src/components/CustomStatusBar/index.js +++ b/src/components/CustomStatusBar/index.js @@ -3,7 +3,7 @@ import {StatusBar} from 'react-native'; export default class CustomStatusBar extends React.Component { componentDidMount() { - StatusBar.setBarStyle('dark-content', true); + StatusBar.setBarStyle('light-content', true); } render() { From 8ea2b5f48db16ce6467d5ddd6e6b283408f10af9 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 23 Nov 2022 16:00:42 -0800 Subject: [PATCH 6/6] Fix Android and IOS splash screen colors. Note IOS is inverse of desired color. --- android/app/src/main/res/values/colors.xml | 2 +- ios/NewExpensify/BootSplash.storyboard | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml index 21e97a75c38aa..1b925f61ae28d 100644 --- a/android/app/src/main/res/values/colors.xml +++ b/android/app/src/main/res/values/colors.xml @@ -1,5 +1,5 @@ - #FFFFFF + #061B09 #FFFFFF #0185ff #0b1b34 diff --git a/ios/NewExpensify/BootSplash.storyboard b/ios/NewExpensify/BootSplash.storyboard index 8ee04cf74b3b6..00b73194f144c 100644 --- a/ios/NewExpensify/BootSplash.storyboard +++ b/ios/NewExpensify/BootSplash.storyboard @@ -24,7 +24,7 @@ - +