From 2a27fdce73412641247b10c4fa9aaab40ba8a7e6 Mon Sep 17 00:00:00 2001 From: Houssein Djirdeh Date: Tue, 12 Dec 2017 11:13:49 -0500 Subject: [PATCH] style(*): Minor style updates (#665) --- src/auth/screens/auth-profile.screen.js | 19 ++++--- src/auth/screens/user-options.screen.js | 49 +++++++------------ src/components/section-list.component.js | 14 ++---- .../screens/notifications.screen.js | 1 - src/user/screens/profile.screen.js | 15 +++--- 5 files changed, 44 insertions(+), 54 deletions(-) diff --git a/src/auth/screens/auth-profile.screen.js b/src/auth/screens/auth-profile.screen.js index 2cdaf2e6d..acd763d2b 100644 --- a/src/auth/screens/auth-profile.screen.js +++ b/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 !== '' && ( - diff --git a/src/auth/screens/user-options.screen.js b/src/auth/screens/user-options.screen.js index 9d9f7959b..13113cbf8 100644 --- a/src/auth/screens/user-options.screen.js +++ b/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 ( - @@ -176,12 +175,9 @@ class UserOptions extends Component { {item.name} } - 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 { - openURLInView(this.props.user.html_url)} - underlayColor={colors.greyLight} /> - navigation.navigate('PrivacyPolicy', { title: translate('auth.privacyPolicy.title', locale), locale, })} - underlayColor={colors.greyLight} /> - openURLInView('https://opencollective.com/git-point')} - underlayColor={colors.greyLight} /> - this.signOutUser()} - underlayColor={colors.greyLight} + signOut /> diff --git a/src/components/section-list.component.js b/src/components/section-list.component.js index ae44f64b5..38a786151 100644 --- a/src/components/section-list.component.js +++ b/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 = ({ /> )} - - {listDisplay} - + {listDisplay} ); }; diff --git a/src/notifications/screens/notifications.screen.js b/src/notifications/screens/notifications.screen.js index 005e17303..a0a95a66a 100644 --- a/src/notifications/screens/notifications.screen.js +++ b/src/notifications/screens/notifications.screen.js @@ -127,7 +127,6 @@ const styles = StyleSheet.create({ markAllAsReadButtonContainer: { marginTop: 0, marginBottom: 20, - marginHorizontal: 10, }, contentBlock: { flex: 1, diff --git a/src/user/screens/profile.screen.js b/src/user/screens/profile.screen.js index 94d19e3b4..427fbb7e0 100644 --- a/src/user/screens/profile.screen.js +++ b/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 !== '' && ( -