Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: improve general UI and UX #56

Merged
merged 6 commits into from
Dec 8, 2020
Merged

feat: improve general UI and UX #56

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d201940
fix(home): display the pinned article only if pinned is selected
mheob Dec 8, 2020
82c1cbb
feat(settings): add a link to write an email to the convertion team
mheob Dec 8, 2020
c7cd603
feat(article): increase the body text and line height a bit
mheob Dec 8, 2020
0365e7f
fix(article): hide unneeded navigation of post slideshow
mheob Dec 8, 2020
62969d1
Merge branch 'release/v1' into 49-ui--ux-modifications
mheob Dec 8, 2020
c9623ec
feat(article): remove DETAILS buttons and link complete preview
mheob Dec 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(article): increase the body text and line height a bit
  • Loading branch information
@mheob
mheob committed Dec 8, 2020
commit c7cd6031064ef9394774c4bd0d4a8a7ed407c50e
5 changes: 4 additions & 1 deletion src/components/Articles/ArticlePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ const styles = StyleSheet.create<Styles>({
title: {
fontFamily: fonts.sans,
fontSize: 13,
lineHeight: 13 * 1.25,
color: colors.primaryColor,
},
sponsoredArticleContainer: {
Expand All @@ -145,6 +146,7 @@ const styles = StyleSheet.create<Styles>({
},
sponsoredText: {
fontSize: 14,
lineHeight: 14 * 1.25,
textAlign: 'right',
},
sponsoredTitleContainer: {
Expand All @@ -156,7 +158,8 @@ const styles = StyleSheet.create<Styles>({
borderBottomRightRadius: 15,
},
sponsoredTitle: {
fontSize: 16,
fontSize: 14,
lineHeight: 14 * 1.25,
fontFamily: fonts.sans,
},
})
Expand Down
4 changes: 3 additions & 1 deletion src/components/Articles/FeaturedCarousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ const styles = StyleSheet.create<Styles>({
paddingHorizontal: 30,
paddingVertical: 10,
fontSize: 14,
lineHeight: 14 * 1.25,
textAlign: 'right',
},
titleContainer: {
Expand All @@ -100,7 +101,8 @@ const styles = StyleSheet.create<Styles>({
paddingVertical: 10,
},
title: {
fontSize: 16,
fontSize: 14,
lineHeight: 14 * 1.25,
fontFamily: fonts.sans,
},
})
Expand Down
6 changes: 5 additions & 1 deletion src/components/Articles/__tests__/__snapshots__/ArticleList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ exports[`<ArticleList /> renders correctly 1`] = `
"color": "#333333",
"fontFamily": "sans",
"fontSize": 14,
"lineHeight": 17.5,
"textAlign": "right",
}
}
Expand All @@ -158,6 +159,8 @@ exports[`<ArticleList /> renders correctly 1`] = `
Object {
"color": "#333333",
"fontFamily": "sans-bold",
"fontSize": 15,
"lineHeight": 22.5,
}
}
>
Expand Down Expand Up @@ -195,7 +198,8 @@ exports[`<ArticleList /> renders correctly 1`] = `
style={
Object {
"fontFamily": "sans",
"fontSize": 16,
"fontSize": 14,
"lineHeight": 17.5,
}
}
>
Expand Down
6 changes: 5 additions & 1 deletion src/components/Articles/__tests__/__snapshots__/ArticlePreview.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ exports[`<ArticleList /> renders correctly 1`] = `
"color": "#333333",
"fontFamily": "sans",
"fontSize": 14,
"lineHeight": 17.5,
"textAlign": "right",
}
}
Expand All @@ -91,6 +92,8 @@ exports[`<ArticleList /> renders correctly 1`] = `
Object {
"color": "#333333",
"fontFamily": "sans-bold",
"fontSize": 15,
"lineHeight": 22.5,
}
}
>
Expand Down Expand Up @@ -128,7 +131,8 @@ exports[`<ArticleList /> renders correctly 1`] = `
style={
Object {
"fontFamily": "sans",
"fontSize": 16,
"fontSize": 14,
"lineHeight": 17.5,
}
}
>
Expand Down
2 changes: 2 additions & 0 deletions src/components/Articles/__tests__/__snapshots__/CategoryList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ exports[`<CategoryList /> renders correctly 1`] = `
Object {
"color": "#333333",
"fontFamily": "sans",
"fontSize": 15,
"lineHeight": 22.5,
}
}
>
Expand Down
9 changes: 7 additions & 2 deletions src/components/Articles/__tests__/__snapshots__/FeaturedCarousel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,7 @@ exports[`<FeaturedCarousel /> renders correctly 1`] = `
"color": "#333333",
"fontFamily": "sans",
"fontSize": 14,
"lineHeight": 17.5,
"paddingHorizontal": 30,
"paddingVertical": 10,
"textAlign": "right",
Expand All @@ -273,6 +274,8 @@ exports[`<FeaturedCarousel /> renders correctly 1`] = `
Object {
"color": "#333333",
"fontFamily": "sans-bold",
"fontSize": 15,
"lineHeight": 22.5,
}
}
>
Expand Down Expand Up @@ -307,7 +310,8 @@ exports[`<FeaturedCarousel /> renders correctly 1`] = `
style={
Object {
"fontFamily": "sans",
"fontSize": 16,
"fontSize": 14,
"lineHeight": 17.5,
}
}
>
Expand Down Expand Up @@ -439,7 +443,8 @@ exports[`<FeaturedCarousel /> renders correctly 1`] = `
style={
Object {
"fontFamily": "sans",
"fontSize": 16,
"fontSize": 14,
"lineHeight": 17.5,
}
}
>
Expand Down
6 changes: 6 additions & 0 deletions src/components/Articles/__tests__/__snapshots__/NewsCarousel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ exports[`<NewsCarousel /> renders correctly 1`] = `
"color": "#333333",
"fontFamily": "sans",
"fontSize": 13,
"lineHeight": 16.25,
}
}
>
Expand All @@ -260,6 +261,7 @@ exports[`<NewsCarousel /> renders correctly 1`] = `
"color": "#872232",
"fontFamily": "sans",
"fontSize": 10,
"lineHeight": 22.5,
"marginLeft": 5,
}
}
Expand Down Expand Up @@ -300,6 +302,7 @@ exports[`<NewsCarousel /> renders correctly 1`] = `
"color": "white",
"fontFamily": "sans-bold",
"fontSize": 12,
"lineHeight": 22.5,
"textTransform": "uppercase",
}
}
Expand Down Expand Up @@ -377,6 +380,7 @@ exports[`<NewsCarousel /> renders correctly 1`] = `
"color": "#333333",
"fontFamily": "sans",
"fontSize": 13,
"lineHeight": 16.25,
}
}
>
Expand All @@ -401,6 +405,7 @@ exports[`<NewsCarousel /> renders correctly 1`] = `
"color": "#872232",
"fontFamily": "sans",
"fontSize": 10,
"lineHeight": 22.5,
"marginLeft": 5,
}
}
Expand Down Expand Up @@ -441,6 +446,7 @@ exports[`<NewsCarousel /> renders correctly 1`] = `
"color": "white",
"fontFamily": "sans-bold",
"fontSize": 12,
"lineHeight": 22.5,
"textTransform": "uppercase",
}
}
Expand Down
6 changes: 6 additions & 0 deletions src/components/Settings/__tests__/__snapshots__/LegalList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ exports[`<LegalList /> renders correctly 1`] = `
Object {
"color": "#333333",
"fontFamily": "sans",
"fontSize": 15,
"lineHeight": 22.5,
}
}
>
Expand Down Expand Up @@ -116,6 +118,8 @@ exports[`<LegalList /> renders correctly 1`] = `
Object {
"color": "#333333",
"fontFamily": "sans",
"fontSize": 15,
"lineHeight": 22.5,
}
}
>
Expand Down Expand Up @@ -160,6 +164,8 @@ exports[`<LegalList /> renders correctly 1`] = `
Object {
"color": "#333333",
"fontFamily": "sans",
"fontSize": 15,
"lineHeight": 22.5,
}
}
>
Expand Down
2 changes: 2 additions & 0 deletions src/components/Settings/__tests__/__snapshots__/SettingsList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ exports[`<SettingsList /> renders correctly 1`] = `
Object {
"color": "#333333",
"fontFamily": "sans",
"fontSize": 15,
"lineHeight": 22.5,
}
}
>
Expand Down
2 changes: 2 additions & 0 deletions src/components/UI/__tests__/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ exports[`<Button /> renders correctly 1`] = `
Object {
"color": "white",
"fontFamily": "sans-bold",
"fontSize": 15,
"lineHeight": 22.5,
"textTransform": "uppercase",
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/components/UI/__tests__/__snapshots__/Text.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ exports[`<Text /> renders correctly 1`] = `
Object {
"color": "#333333",
"fontFamily": "sans",
"fontSize": 15,
"lineHeight": 22.5,
}
}
/>
Expand Down
27 changes: 2 additions & 25 deletions src/screens/ArticleScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,5 @@
import React, { useEffect, useState } from 'react'
import {
Dimensions,
// TODO: Maybe add an additional image above the content (there are more parts belong to this)
// Image,
// ImageStyle,
Linking,
ScrollView,
StyleSheet,
TextStyle,
View,
ViewStyle,
} from 'react-native'
import { Dimensions, Linking, ScrollView, StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
import { RouteProp, useRoute } from '@react-navigation/native'
import HTML from 'react-native-render-html'
import { Ionicons } from '@expo/vector-icons'
Expand Down Expand Up @@ -66,9 +55,6 @@ const ArticleScreen: React.FC = () => {
<Text style={styles.date}>{getLocaleLongDate(new Date(article.date_gmt || Date.now.toString()))}</Text>
</View>
<HTML baseFontStyle={styles.teaser} html={article.excerpt.rendered} />
{/* <View style={styles.imageContainer}>
<Image style={styles.image} source={{ uri: article.featured_image_medium }} />
</View> */}
<HTML
containerStyle={styles.htmlContainer}
baseFontStyle={styles.text}
Expand All @@ -90,8 +76,6 @@ interface Styles extends DefaultStyles {
category: TextStyle
titleContainer: ViewStyle
teaser: TextStyle
// imageContainer: ViewStyle
// image: ImageStyle
htmlContainer: ViewStyle
}

Expand Down Expand Up @@ -122,15 +106,8 @@ const styles = StyleSheet.create<Styles>({
teaser: {
color: colors.accentColor,
fontSize: 18,
lineHeight: 18 * 1.5,
},
// imageContainer: {
// height: Dimensions.get('screen').width,
// borderRadius: 10,
// },
// image: {
// flex: 1,
// borderRadius: 15,
// },
htmlContainer: {
paddingBottom: 15,
},
Expand Down
2 changes: 2 additions & 0 deletions src/styles/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ export const defaultStyles = StyleSheet.create<DefaultStyles>({
},
text: {
fontFamily: fonts.sans,
fontSize: 15,
lineHeight: 15 * 1.5,
color: colors.primaryColor,
},
dateContainer: {
Expand Down