style(*): Minor style updates (#665)

Author: Houssein Djirdeh

src/auth/screens/auth-profile.screen.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import styled from 'styled-components/native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import {
@@ -44,10 +45,6 @@ const mapDispatchToProps = dispatch =>
   );
 
 const styles = StyleSheet.create({
-  listTitle: {
-    color: colors.greyDark,
-    ...fonts.fontPrimary,
-  },
   update: {
     flex: 1,
     alignItems: 'center',
@@ -72,6 +69,17 @@ const styles = StyleSheet.create({
   },
 });
 
+const BioListItem = styled(ListItem).attrs({
+  containerStyle: {
+    borderBottomColor: colors.greyLight,
+    borderBottomWidth: 1,
+  },
+  titleStyle: {
+    color: colors.greyDark,
+    ...fonts.fontPrimary,
+  },
+})``;
+
 class AuthProfile extends Component {
   props: {
     getUser: Function,
@@ -154,10 +162,9 @@ class AuthProfile extends Component {
             user.bio &&
             user.bio !== '' && (
               <SectionList title={translate('common.bio', locale)}>
-                <ListItem
+                <BioListItem
                   titleNumberOfLines={0}
                   title={emojifyText(user.bio)}
-                  titleStyle={styles.listTitle}
                   hideChevron
                 />
               </SectionList>

src/auth/screens/user-options.screen.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-shadow */
 import React, { Component } from 'react';
+import styled from 'styled-components/native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import {
@@ -46,14 +47,6 @@ const styles = StyleSheet.create({
     color: colors.black,
     ...fonts.fontPrimary,
   },
-  listSubTitle: {
-    color: colors.greyDark,
-    ...fonts.fontPrimary,
-  },
-  logoutTitle: {
-    color: colors.red,
-    ...fonts.fontPrimary,
-  },
   update: {
     flex: 1,
     alignItems: 'center',
@@ -73,14 +66,20 @@ const styles = StyleSheet.create({
     paddingRight: 7,
     color: colors.black, // random any color for the correct display emoji
   },
+});
+
+const StyledListItem = styled(ListItem).attrs({
   containerStyle: {
-    paddingTop: 0,
-    paddingBottom: 0,
-    height: 45,
-    justifyContent: 'center',
-    alignItems: 'center',
+    borderBottomColor: colors.greyLight,
+    borderBottomWidth: 1,
   },
-});
+  titleStyle: props => ({
+    color: props.signOut ? colors.red : colors.black,
+    ...fonts.fontPrimary,
+  }),
+  underlayColor: colors.greyLight,
+  hideChevron: props => props.hideChevron,
+})``;
 
 const updateText = locale => ({
   check: translate('auth.profile.codePushCheck', locale),
@@ -167,7 +166,7 @@ class UserOptions extends Component {
               data={languages}
               renderItem={({ item }) => {
                 return (
-                  <ListItem
+                  <StyledListItem
                     title={
                       <View style={styles.language}>
                         <Text style={styles.flag}>
@@ -176,12 +175,9 @@ class UserOptions extends Component {
                         <Text style={styles.listTitle}>{item.name}</Text>
                       </View>
                     }
-                    titleStyle={styles.listTitle}
-                    containerStyle={styles.containerStyle}
                     hideChevron={locale !== item.code}
                     rightIcon={{ name: 'check' }}
                     onPress={() => changeLocale(item.code)}
-                    underlayColor={colors.greyLight}
                   />
                 );
               }}
@@ -191,36 +187,29 @@ class UserOptions extends Component {
           </SectionList>
 
           <SectionList>
-            <ListItem
+            <StyledListItem
               title={translate('common.openInBrowser', locale)}
-              titleStyle={styles.listTitle}
               onPress={() => openURLInView(this.props.user.html_url)}
-              underlayColor={colors.greyLight}
             />
 
-            <ListItem
+            <StyledListItem
               title={translate('auth.userOptions.privacyPolicy', locale)}
-              titleStyle={styles.listTitle}
               onPress={() =>
                 navigation.navigate('PrivacyPolicy', {
                   title: translate('auth.privacyPolicy.title', locale),
                   locale,
                 })}
-              underlayColor={colors.greyLight}
             />
-            <ListItem
+            <StyledListItem
               title={translate('auth.userOptions.donate', locale)}
-              titleStyle={styles.listTitle}
               onPress={() =>
                 openURLInView('https://opencollective.com/git-point')}
-              underlayColor={colors.greyLight}
             />
-            <ListItem
+            <StyledListItem
               title={translate('auth.userOptions.signOut', locale)}
-              titleStyle={styles.logoutTitle}
               hideChevron
               onPress={() => this.signOutUser()}
-              underlayColor={colors.greyLight}
+              signOut
             />
           </SectionList>
 

src/components/section-list.component.js

@@ -10,7 +10,6 @@ type Props = {
   children?: React.Element<*>,
   showButton: boolean,
   buttonTitle: string,
-  noOuterBorders: boolean,
   noItems: boolean,
   noItemsMessage: string,
   buttonAction: Function,
@@ -45,10 +44,8 @@ const styles = StyleSheet.create({
   },
   list: {
     marginTop: 0,
-  },
-  noOuterBorders: {
-    borderTopWidth: 0,
-    borderBottomWidth: 0,
+    borderBottomColor: colors.grey,
+    borderBottomWidth: 1,
   },
   loadingIcon: {
     marginVertical: 20,
@@ -61,7 +58,6 @@ export const SectionList = ({
   showButton,
   buttonTitle,
   buttonAction,
-  noOuterBorders,
   noItems,
   noItemsMessage,
   children,
@@ -109,11 +105,7 @@ export const SectionList = ({
             />
           )}
       </View>
-      <List
-        containerStyle={[styles.list, noOuterBorders && styles.noOuterBorders]}
-      >
-        {listDisplay}
-      </List>
+      <List containerStyle={styles.list}>{listDisplay}</List>
     </View>
   );
 };

src/notifications/screens/notifications.screen.js

@@ -127,7 +127,6 @@ const styles = StyleSheet.create({
   markAllAsReadButtonContainer: {
     marginTop: 0,
     marginBottom: 20,
-    marginHorizontal: 10,
   },
   contentBlock: {
     flex: 1,

src/user/screens/profile.screen.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-shadow */
 import React, { Component } from 'react';
+import styled from 'styled-components/native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import {
-  StyleSheet,
   ActivityIndicator,
   Dimensions,
   View,
@@ -57,12 +57,16 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-const styles = StyleSheet.create({
-  listTitle: {
+const BioListItem = styled(ListItem).attrs({
+  containerStyle: {
+    borderBottomColor: colors.greyLight,
+    borderBottomWidth: 1,
+  },
+  titleStyle: {
     color: colors.greyDark,
     ...fonts.fontPrimary,
   },
-});
+})``;
 
 class Profile extends Component {
   props: {
@@ -206,10 +210,9 @@ class Profile extends Component {
                 {!!user.bio &&
                   user.bio !== '' && (
                     <SectionList title={translate('common.bio', locale)}>
-                      <ListItem
+                      <BioListItem
                         titleNumberOfLines={0}
                         title={emojifyText(user.bio)}
-                        titleStyle={styles.listTitle}
                         hideChevron
                       />
                     </SectionList>