From f46e2d6db04d1905a0f74babaf8048558f327ba1 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 27 Aug 2020 11:00:56 -0600 Subject: [PATCH 1/5] Use variables for white text --- src/style/StyleSheet.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index eab5b2792736..7fbbf3516f44 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -8,6 +8,7 @@ const colors = { icon: '#C6C9CA', heading: '#37444C', text: '#4A5960', + textReversed: '#FFFFFF', textSupporting: '#7D8B8F', blue: '#2EAAE2', green: '#2ECB70', @@ -99,7 +100,7 @@ const styles = { }, colorReversed: { - color: '#ffffff', + color: colors.textReversed, }, button: { @@ -122,7 +123,7 @@ const styles = { }, buttonSuccessText: { - color: '#ffffff', + color: colors.textReversed, }, // History Items @@ -152,7 +153,7 @@ const styles = { borderRadius: 8, borderColor: colors.text, borderWidth: 1, - color: '#ffffff', + color: colors.textReversed, padding: 12, }, @@ -251,7 +252,7 @@ const styles = { }, sidebarFooterUsername: { - color: '#FFFFFF', + color: colors.textReversed, fontSize: 15, fontWeight: '700', }, @@ -276,7 +277,7 @@ const styles = { }, sidebarListHeader: { - color: '#FFFFFF', + color: colors.textReversed, fontSize: 15, fontWeight: '700', paddingTop: 8, @@ -325,10 +326,10 @@ const styles = { }, sidebarLinkTextUnread: { fontWeight: '600', - color: '#ffffff', + color: colors.textReversed, }, sidebarLinkActiveText: { - color: '#ffffff', + color: colors.textReversed, fontSize: 13, textDecorationLine: 'none', overflow: 'hidden', @@ -484,7 +485,7 @@ const styles = { }, chatItemComposeBox: { - backgroundColor: '#FFFFFF', + backgroundColor: colors.componentBG, borderWidth: 1, borderColor: colors.border, borderRadius: 8, From 31630a1288b63a36851fbb93fe7f75369f43cedd Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 27 Aug 2020 11:02:24 -0600 Subject: [PATCH 2/5] Use variable for icon color --- src/page/SignInPage.js | 4 ++-- src/style/StyleSheet.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/page/SignInPage.js b/src/page/SignInPage.js index 7d3f03cbee23..55f0d4711f7d 100644 --- a/src/page/SignInPage.js +++ b/src/page/SignInPage.js @@ -14,7 +14,7 @@ import {withRouter} from '../lib/Router'; import {signIn} from '../lib/actions/Session'; import IONKEYS from '../IONKEYS'; import withIon from '../components/withIon'; -import styles from '../style/StyleSheet'; +import styles, {colors} from '../style/StyleSheet'; import logo from '../../assets/images/expensify-logo_reversed.png'; const propTypes = { @@ -100,7 +100,7 @@ class App extends Component { style={[styles.textInput, styles.textInputReversed]} value={this.state.twoFactorAuthCode} placeholder="Required when 2FA is enabled" - placeholderTextColor="#C6C9CA" + placeholderTextColor={colors.icon} onChangeText={text => this.setState({twoFactorAuthCode: text})} onSubmitEditing={this.submitForm} /> diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index 7fbbf3516f44..34a8bf294942 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -258,7 +258,7 @@ const styles = { }, sidebarFooterLink: { - color: '#C6C9CA', + color: colors.icon, fontSize: 11, textDecorationLine: 'none', fontFamily: 'GTAmericaExp-Regular', @@ -308,7 +308,7 @@ const styles = { }, sidebarLinkText: { - color: '#C6C9CA', + color: colors.icon, fontSize: 13, textDecorationLine: 'none', overflow: 'hidden', From 4715f390f3bb5f8d50beeb72a398a94338cb24cc Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 27 Aug 2020 11:10:48 -0600 Subject: [PATCH 3/5] Move more values into variables --- src/page/HomePage/Report/ReportHistoryCompose.js | 6 +++--- src/page/SignInPage.js | 2 +- src/style/StyleSheet.js | 11 ++++++----- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/page/HomePage/Report/ReportHistoryCompose.js b/src/page/HomePage/Report/ReportHistoryCompose.js index 71e2c90051b0..8c78e80b87ba 100644 --- a/src/page/HomePage/Report/ReportHistoryCompose.js +++ b/src/page/HomePage/Report/ReportHistoryCompose.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {View, Image, TouchableOpacity} from 'react-native'; -import styles from '../../../style/StyleSheet'; +import styles, {colors} from '../../../style/StyleSheet'; import TextInputFocusable from '../../../components/TextInputFocusable'; import sendIcon from '../../../../assets/images/icon-send.png'; @@ -81,7 +81,7 @@ class ReportHistoryCompose extends React.Component { multiline textAlignVertical="top" placeholder="Write something..." - placeholderTextColor="#7D8B8F" + placeholderTextColor={colors.textSupporting} onChangeText={this.updateComment} onKeyPress={this.triggerSubmitShortcut} style={[styles.textInput, styles.textInputCompose, styles.flex4]} @@ -90,7 +90,7 @@ class ReportHistoryCompose extends React.Component { Log In diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index 34a8bf294942..a248bdddd3f0 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -4,15 +4,16 @@ const safeInsertPercentage = 0.7; const colors = { componentBG: '#FFFFFF', background: '#FAFAFA', + blue: '#2EAAE2', border: '#ECECEC', - icon: '#C6C9CA', + green: '#2ECB70', heading: '#37444C', + icon: '#C6C9CA', text: '#4A5960', textReversed: '#FFFFFF', textSupporting: '#7D8B8F', - blue: '#2EAAE2', - green: '#2ECB70', red: '#E84A3B', + shadow: '#000000', }; const styles = { @@ -336,7 +337,7 @@ const styles = { }, unreadBadge: { - backgroundColor: '#2ECB70', + backgroundColor: colors.green, borderRadius: 15, height: 10, marginTop: 3, @@ -524,7 +525,7 @@ const styles = { bottom: 0, zIndex: 2, width: 300, - shadowColor: '#000000', + shadowColor: colors.shadow, shadowOffset: { width: 0, height: 0, From 54af24ecd0413ac0598ad1c8a89b2ea8c854d86b Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 27 Aug 2020 11:15:11 -0600 Subject: [PATCH 4/5] Refer to all font families with a variable --- src/components/Text.js | 2 +- src/style/StyleSheet.js | 12 +++++++----- src/style/fontFamily/index.js | 5 ++--- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/Text.js b/src/components/Text.js index 3540b3d97cd6..2e9754218225 100644 --- a/src/components/Text.js +++ b/src/components/Text.js @@ -55,7 +55,7 @@ const Text = ({ fontSize, lineHeight: 20, textAlign, - ...fontFamily[family], + fontFamily: fontFamily[family], ...mergedStyles, }; diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index a248bdddd3f0..a48ad8759df6 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -1,4 +1,6 @@ // We place items a percentage to the safe area on the top or bottom of the screen +import fontFamily from './fontFamily'; + const safeInsertPercentage = 0.7; const colors = { @@ -144,7 +146,7 @@ const styles = { borderColor: colors.border, borderWidth: 1, color: colors.text, - fontFamily: 'GTAmericaExp-Regular', + fontFamily: fontFamily.GTA, padding: 12, textAlignVertical: 'center', }, @@ -262,7 +264,7 @@ const styles = { color: colors.icon, fontSize: 11, textDecorationLine: 'none', - fontFamily: 'GTAmericaExp-Regular', + fontFamily: fontFamily.GTA, lineHeight: 20, }, @@ -469,7 +471,7 @@ const styles = { chatItemMessage: { color: colors.text, fontSize: 15, - fontFamily: 'GTAmericaExp-Regular', + fontFamily: fontFamily.GTA, lineHeight: 20, marginTop: -2, marginBottom: -2, @@ -544,7 +546,7 @@ const webViewStyles = { tagStyles: { em: { fontStyle: 'italic', - fontFamily: 'System' + fontFamily: fontFamily.SYSTEM, }, del: { @@ -564,7 +566,7 @@ const webViewStyles = { baseFontStyle: { color: colors.text, fontSize: 15, - fontFamily: 'GTAmericaExp-Regular' + fontFamily: fontFamily.GTA } }; diff --git a/src/style/fontFamily/index.js b/src/style/fontFamily/index.js index 163676b8ae54..47b13f74fb3a 100644 --- a/src/style/fontFamily/index.js +++ b/src/style/fontFamily/index.js @@ -1,7 +1,6 @@ const fontFamily = { - GTA: { - fontFamily: 'GTAmericaExp-Regular', - }, + GTA: 'GTAmericaExp-Regular', + SYSTEM: 'System', }; export default fontFamily; From 42c685d54a867fc644db0823457b9dda0c95bac7 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 27 Aug 2020 12:40:09 -0600 Subject: [PATCH 5/5] Rename to black --- src/style/StyleSheet.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index a48ad8759df6..af265eac67a4 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -6,6 +6,7 @@ const safeInsertPercentage = 0.7; const colors = { componentBG: '#FFFFFF', background: '#FAFAFA', + black: '#000000', blue: '#2EAAE2', border: '#ECECEC', green: '#2ECB70', @@ -15,7 +16,6 @@ const colors = { textReversed: '#FFFFFF', textSupporting: '#7D8B8F', red: '#E84A3B', - shadow: '#000000', }; const styles = { @@ -527,7 +527,7 @@ const styles = { bottom: 0, zIndex: 2, width: 300, - shadowColor: colors.shadow, + shadowColor: colors.black, shadowOffset: { width: 0, height: 0,