diff --git a/package.json b/package.json index 64ff367f0..84ada3fed 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "react-native-config": "^0.6.0", "react-native-cookies": "^3.2.0", "react-native-device-info": "^0.11.0", - "react-native-elements": "^0.17.0", + "react-native-elements": "^0.18.2", "react-native-htmlview": "^0.12.0", "react-native-i18n": "^2.0.4", "react-native-linear-gradient": "^2.3.0", diff --git a/src/components/entity-info.component.js b/src/components/entity-info.component.js index ab48ded31..aef75da55 100644 --- a/src/components/entity-info.component.js +++ b/src/components/entity-info.component.js @@ -15,6 +15,10 @@ type Props = { }; const StyledListItem = styled(ListItem).attrs({ + containerStyle: { + borderBottomColor: colors.greyLight, + borderBottomWidth: 1, + }, titleStyle: { color: colors.black, ...fonts.fontPrimary, @@ -23,8 +27,8 @@ const StyledListItem = styled(ListItem).attrs({ color: colors.greyDark, ...fonts.fontPrimary, }, - underlayColor: props => (props.unknown ? null : colors.greyLight), - hideChevron: props => props.unknown, + underlayColor: props => (props.hideChevron ? null : colors.greyLight), + hideChevron: props => props.hideChevron, })``; const getBlogLink = url => @@ -78,7 +82,7 @@ export const EntityInfo = ({ entity, orgs, locale, navigation }: Props) => { }} subtitle={entity.company} onPress={() => navigateToCompany(entity.company, orgs, navigation)} - unknown={companyInOrgs(entity.company, orgs)} + hideChevron={!companyInOrgs(entity.company, orgs)} /> )} diff --git a/src/components/issue-description.component.js b/src/components/issue-description.component.js index 0f1fc3a4f..298502d20 100644 --- a/src/components/issue-description.component.js +++ b/src/components/issue-description.component.js @@ -8,12 +8,12 @@ import styled from 'styled-components/native'; import { StateBadge, MembersList, - LabelButton, + InlineLabel, DiffBlocks, Button, } from 'components'; import { translate } from 'utils'; -import { colors, styledFonts, normalize } from 'config'; +import { colors, fonts, normalize } from 'config'; import { v3 } from 'api'; const styles = StyleSheet.create({ @@ -35,19 +35,32 @@ const ContainerBorderBottom = styled.View` border-bottom-color: ${colors.greyLight}; `; -const ListItemStyled = styled(ListItem)` - color: ${colors.primaryDark}; - font-family: ${styledFonts.fontPrimarySemiBold}; -`; - -const ListItemURL = ListItemStyled.extend` - font-size: ${normalize(10)}; -`; +const RepoLink = styled(ListItem).attrs({ + titleStyle: { + color: colors.primaryDark, + ...fonts.fontPrimarySemiBold, + fontSize: normalize(10), + }, + leftIconContainerStyle: { + flex: 0, + }, + containerStyle: { + borderBottomColor: colors.greyLight, + borderBottomWidth: 1, + }, +})``; -const ListItemIssueTitle = ListItemStyled.extend` - border-bottom-width: 0; - flex: 1; -`; +const IssueTitle = styled(ListItem).attrs({ + titleStyle: { + color: colors.primaryDark, + ...fonts.fontPrimarySemiBold, + }, + containerStyle: { + borderBottomWidth: 0, + flex: 1, + }, + titleNumberOfLines: 0, +})``; const DiffBlocksContainer = styled.View` flex-direction: row; @@ -94,7 +107,7 @@ export class IssueDescription extends Component { renderLabelButtons = labels => { return labels .slice(0, 3) - .map(label => ); + .map(label => ); }; render() { @@ -124,7 +137,7 @@ export class IssueDescription extends Component { return ( {issue.repository_url && ( - - { + switch (name) { + case 'git-branch': + case 'git-merge': + case 'primitive-dot': + return 8; + case 'bookmark': + return 6; + case 'person': + case 'lock': + return 4; + default: + return 2; + } +}; + +const Container = styled.View` padding-top: 10; + padding-right: 10; background-color: transparent; flex-direction: row; align-items: stretch; `; -const IconStyled = styled(Icon)` - background-color: ${colors.greyLight}; - border-radius: 13; - width: 26; - height: 26; - margin-left: 14; - margin-right: 14; - flex: 0 0 26px; -`; +const Icon = styled(BaseIcon).attrs({ + iconStyle: props => ({ + marginTop: 1, + color: props.color, + marginLeft: marginLeftForIconName(props.name), + }), + containerStyle: props => ({ + borderRadius: 13, + width: 26, + height: 26, + marginLeft: 14, + marginRight: 14, + flexGrow: 0, + flexShrink: 0, + flexBasis: 26, + backgroundColor: props.backgroundColor, + }), +})``; const ContentContainer = styled.View` flex-direction: row; @@ -47,16 +72,16 @@ const DateContainer = styled.View` width: 39; `; +const Date = styled.Text` + color: ${colors.greyDark}; +`; + const BoldText = styled.Text` font-family: ${styledFonts.fontPrimaryBold}; font-size: ${normalize(13)}; color: ${colors.primaryDark}; `; -const DateText = styled.Text` - color: ${colors.greyDark}; -`; - export class IssueEventListItem extends Component { props: { event: Object, @@ -300,22 +325,6 @@ export class IssueEventListItem extends Component { } } -const marginLeftForIconName = name => { - switch (name) { - case 'git-branch': - case 'git-merge': - case 'primitive-dot': - return 8; - case 'bookmark': - return 6; - case 'person': - case 'lock': - return 4; - default: - return 2; - } -}; - class Event extends Component { props: { iconName: String, @@ -335,25 +344,21 @@ class Event extends Component { } = this.props; return ( -
- + {text} - {moment(createdAt).fromNow()} + {moment(createdAt).fromNow()} -
+ ); } } diff --git a/src/components/repository-list-item.component.js b/src/components/repository-list-item.component.js index dab513f20..f32ba27dd 100644 --- a/src/components/repository-list-item.component.js +++ b/src/components/repository-list-item.component.js @@ -49,6 +49,10 @@ const styles = StyleSheet.create({ justifyContent: 'center', flex: 1, }, + container: { + borderBottomColor: colors.greyLight, + borderBottomWidth: 1, + }, }); const renderTitle = (repository, showFullName) => ( @@ -128,6 +132,7 @@ export const RepositoryListItem = ({ color: colors.grey, type: 'octicon', }} + containerStyle={styles.container} underlayColor={colors.greyLight} onPress={() => navigation.navigate('Repository', { repository })} /> diff --git a/src/repository/screens/repository-code-list.screen.js b/src/repository/screens/repository-code-list.screen.js index a863e4bf0..2ff6ce12d 100644 --- a/src/repository/screens/repository-code-list.screen.js +++ b/src/repository/screens/repository-code-list.screen.js @@ -40,6 +40,10 @@ const styles = StyleSheet.create({ fontSize: normalize(18), textAlign: 'center', }, + container: { + borderBottomColor: colors.greyLight, + borderBottomWidth: 1, + }, }); class RepositoryCodeList extends Component { @@ -99,6 +103,7 @@ class RepositoryCodeList extends Component { type: 'octicon', }} titleStyle={item.type === 'dir' ? styles.titleBold : styles.title} + containerStyle={styles.container} onPress={() => this.goToPath(item)} underlayColor={colors.greyLight} /> diff --git a/src/repository/screens/repository.screen.js b/src/repository/screens/repository.screen.js index e703b49b5..21c4e7008 100644 --- a/src/repository/screens/repository.screen.js +++ b/src/repository/screens/repository.screen.js @@ -65,6 +65,10 @@ const styles = StyleSheet.create({ color: colors.black, ...fonts.fontPrimary, }, + listContainerStyle: { + borderBottomColor: colors.greyLight, + borderBottomWidth: 1, + }, }); class Repository extends Component { @@ -280,32 +284,35 @@ class Repository extends Component { > {initalRepository && !initalRepository.owner && - isPendingRepository && - - - } + isPendingRepository && ( + + + + )} {!(initalRepository && initalRepository.owner) && (repository && repository.owner) && - !isPendingRepository && - - - } + !isPendingRepository && ( + + + + )} {initalRepository && - initalRepository.owner && - - - } + initalRepository.owner && ( + + + + )} {(isPendingRepository || isPendingContributors) && ( )} - {!isPendingContributors && + {!isPendingContributors && ( } + /> + )} - {showReadMe && + {showReadMe && ( navigation.navigate('ReadMe', { repository, })} underlayColor={colors.greyLight} - />} + /> + )} {!repository.fork && - repository.has_issues && - 0 - ? translate('repository.main.viewAllButton', locale) - : translate('repository.main.newIssueButton', locale) - } - buttonAction={() => { - if (pureIssues.length > 0) { - navigation.navigate('IssueList', { - title: translate('repository.issueList.title', locale), - type: 'issue', - issues: pureIssues, - }); - } else { - navigation.navigate('NewIssue', { - title: translate('issue.newIssue.title', locale), - }); + repository.has_issues && ( + - {openIssues - .slice(0, 3) - .map(item => - - )} - } + showButton + buttonTitle={ + pureIssues.length > 0 + ? translate('repository.main.viewAllButton', locale) + : translate('repository.main.newIssueButton', locale) + } + buttonAction={() => { + if (pureIssues.length > 0) { + navigation.navigate('IssueList', { + title: translate('repository.issueList.title', locale), + type: 'issue', + issues: pureIssues, + }); + } else { + navigation.navigate('NewIssue', { + title: translate('issue.newIssue.title', locale), + }); + } + }} + > + {openIssues + .slice(0, 3) + .map(item => ( + + ))} + + )}