Merge pull request #308 from Expensify/tgolen-cleanup-styles

General cleanup on stylesheet
Expensify · Aug 27, 2020 · 35b40e4 · 35b40e4
2 parents ec184cd + 42c685d
commit 35b40e4
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 30 deletions.
diff --git 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/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 {
                     <TouchableOpacity
                         style={[styles.chatItemSubmitButton, styles.buttonSuccess]}
                         onPress={this.submitForm}
-                        underlayColor="#fff"
+                        underlayColor={colors.componentBG}
                     >
                         <Image
                             resizeMode="contain"

diff --git 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}
                             />
@@ -109,7 +109,7 @@ class App extends Component {
                             <TouchableOpacity
                                 style={[styles.button, styles.buttonSuccess, styles.mb4]}
                                 onPress={this.submitForm}
-                                underlayColor="#fff"
+                                underlayColor={colors.componentBG}
                             >
                                 <Text style={[styles.buttonText, styles.buttonSuccessText]}>Log In</Text>
                             </TouchableOpacity>

diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
@@ -1,16 +1,20 @@
 // 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 = {
     componentBG: '#FFFFFF',
     background: '#FAFAFA',
+    black: '#000000',
+    blue: '#2EAAE2',
     border: '#ECECEC',
-    icon: '#C6C9CA',
+    green: '#2ECB70',
     heading: '#37444C',
+    icon: '#C6C9CA',
     text: '#4A5960',
+    textReversed: '#FFFFFF',
     textSupporting: '#7D8B8F',
-    blue: '#2EAAE2',
-    green: '#2ECB70',
     red: '#E84A3B',
 };
 
@@ -99,7 +103,7 @@ const styles = {
     },
 
     colorReversed: {
-        color: '#ffffff',
+        color: colors.textReversed,
     },
 
     button: {
@@ -122,7 +126,7 @@ const styles = {
     },
 
     buttonSuccessText: {
-        color: '#ffffff',
+        color: colors.textReversed,
     },
 
     // History Items
@@ -142,7 +146,7 @@ const styles = {
         borderColor: colors.border,
         borderWidth: 1,
         color: colors.text,
-        fontFamily: 'GTAmericaExp-Regular',
+        fontFamily: fontFamily.GTA,
         padding: 12,
         textAlignVertical: 'center',
     },
@@ -152,7 +156,7 @@ const styles = {
         borderRadius: 8,
         borderColor: colors.text,
         borderWidth: 1,
-        color: '#ffffff',
+        color: colors.textReversed,
         padding: 12,
     },
 
@@ -251,16 +255,16 @@ const styles = {
     },
 
     sidebarFooterUsername: {
-        color: '#FFFFFF',
+        color: colors.textReversed,
         fontSize: 15,
         fontWeight: '700',
     },
 
     sidebarFooterLink: {
-        color: '#C6C9CA',
+        color: colors.icon,
         fontSize: 11,
         textDecorationLine: 'none',
-        fontFamily: 'GTAmericaExp-Regular',
+        fontFamily: fontFamily.GTA,
         lineHeight: 20,
     },
 
@@ -276,7 +280,7 @@ const styles = {
     },
 
     sidebarListHeader: {
-        color: '#FFFFFF',
+        color: colors.textReversed,
         fontSize: 15,
         fontWeight: '700',
         paddingTop: 8,
@@ -307,7 +311,7 @@ const styles = {
     },
 
     sidebarLinkText: {
-        color: '#C6C9CA',
+        color: colors.icon,
         fontSize: 13,
         textDecorationLine: 'none',
         overflow: 'hidden',
@@ -325,17 +329,17 @@ const styles = {
     },
     sidebarLinkTextUnread: {
         fontWeight: '600',
-        color: '#ffffff',
+        color: colors.textReversed,
     },
     sidebarLinkActiveText: {
-        color: '#ffffff',
+        color: colors.textReversed,
         fontSize: 13,
         textDecorationLine: 'none',
         overflow: 'hidden',
     },
 
     unreadBadge: {
-        backgroundColor: '#2ECB70',
+        backgroundColor: colors.green,
         borderRadius: 15,
         height: 10,
         marginTop: 3,
@@ -467,7 +471,7 @@ const styles = {
     chatItemMessage: {
         color: colors.text,
         fontSize: 15,
-        fontFamily: 'GTAmericaExp-Regular',
+        fontFamily: fontFamily.GTA,
         lineHeight: 20,
         marginTop: -2,
         marginBottom: -2,
@@ -484,7 +488,7 @@ const styles = {
     },
 
     chatItemComposeBox: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: colors.componentBG,
         borderWidth: 1,
         borderColor: colors.border,
         borderRadius: 8,
@@ -523,7 +527,7 @@ const styles = {
         bottom: 0,
         zIndex: 2,
         width: 300,
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: {
             width: 0,
             height: 0,
@@ -542,7 +546,7 @@ const webViewStyles = {
     tagStyles: {
         em: {
             fontStyle: 'italic',
-            fontFamily: 'System'
+            fontFamily: fontFamily.SYSTEM,
         },
 
         del: {
@@ -562,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
@@ -1,7 +1,6 @@
 const fontFamily = {
-    GTA: {
-        fontFamily: 'GTAmericaExp-Regular',
-    },
+    GTA: 'GTAmericaExp-Regular',
+    SYSTEM: 'System',
 };
 
 export default fontFamily;