From b156447229732d9a69cbf7aa10b8a18f50ee7d12 Mon Sep 17 00:00:00 2001
From: Dastan21 <loicd21@gmail.com>
Date: Sat, 22 May 2021 23:12:18 +0200
Subject: [PATCH] enhanced About screen

---
 assets/img/about_icon.png   | Bin 0 -> 2126 bytes
 assets/styles/styles.js     |  26 +++++++++++++++++++++-----
 components/AboutScreen.js   |  16 +++++++++++++---
 components/ChapterScreen.js |   3 ++-
 4 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 assets/img/about_icon.png

diff --git a/assets/img/about_icon.png b/assets/img/about_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..422cd1907176a05594e3b34b6c24f15c5b5d240d
GIT binary patch
literal 2126
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
Ef_5sRD*ylh

literal 0
HcmV?d00001

diff --git a/assets/styles/styles.js b/assets/styles/styles.js
index 7a78e9c..fb703de 100644
--- a/assets/styles/styles.js
+++ b/assets/styles/styles.js
@@ -38,8 +38,7 @@ export default StyleSheet.create({
 	},
 	text: {
 		fontSize: 18,
-		color: colors.white,
-		// fontFamily: "Source Sans Pro"
+		color: colors.white
 	},
 	link: {
 		fontSize: 18,
@@ -268,12 +267,29 @@ export default StyleSheet.create({
 	aboutContainer: {
 		flex: 1,
 		marginVertical: 32,
-		textAlign: 'left'
+		textAlign: 'left',
+		alignItems: 'center'
 	},
 	aboutTitle: {
 		fontSize: 20,
 		fontWeight: 'bold',
-		marginTop: 16,
-		marginBottom: 8
+		marginTop: 8
+	},
+	aboutImage: {
+		width: 80,
+		height: 80,
+		borderRadius: 80,
+		borderColor: colors.orange,
+		borderWidth: 1
+	},
+	aboutVersion: {
+		marginBottom: 16,
+		marginRight: 32,
+		width: "100%"
+	},
+	aboutVersionText: {
+		fontSize: 12,
+		color: colors.secondary,
+		textAlign: 'right'
 	}
 });
diff --git a/components/AboutScreen.js b/components/AboutScreen.js
index 4e79cb1..3e3c49d 100644
--- a/components/AboutScreen.js
+++ b/components/AboutScreen.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
 	View,
 	Image,
@@ -15,23 +15,33 @@ const AboutScreen = () => {
 			if (supported) Linking.openURL(url).catch(() => {});
 		}).catch(() => {});
 	}
+
+	useEffect(() => {
+		Image.resolveAssetSource({ uri: '../assets/img/about_icon.png' });
+	}, []);
+
 	return (
 		<BackgroundImage>
 			<View style={styles.container}>
 				<View style={styles.container}>
 					<View style={styles.aboutContainer}>
-						<Text style={[styles.text, styles.aboutTitle]}>Team Scantrad France :</Text>
+						<Image style={styles.aboutImage} source={require('../assets/img/about_icon.png')}></Image>
+						<Text style={[styles.text, styles.aboutTitle]}>Team Scantrad France</Text>
 						<Text style={styles.text}>Équipe de traduction de divers mangas.</Text>
 						<Text style={styles.link} onPress={() => openURL("https://linktr.ee/scantradfrance")}>Linktree</Text>
 					</View>
 				</View>
 				<View style={styles.container}>
 					<View style={styles.aboutContainer}>
-						<Text style={[styles.text, styles.aboutTitle]}>Dastan21 :</Text>
+						<Image style={styles.aboutImage} source={{ uri: "https://avatars.githubusercontent.com/u/58090137?v=4" }}></Image>
+						<Text style={[styles.text, styles.aboutTitle]}>Dastan21</Text>
 						<Text style={styles.text}>Développeur de l'application mobile.</Text>
 						<Text style={styles.link} onPress={() => openURL("https://github.com/Dastan21")}>Github</Text>
 					</View>
 				</View>
+				<View style={styles.aboutVersion}>
+					<Text style={[styles.text, styles.aboutVersionText]}>v2.2.1</Text>
+				</View>
 			</View>
 		</BackgroundImage>
 	);
diff --git a/components/ChapterScreen.js b/components/ChapterScreen.js
index c8f1ce2..4c6b3a5 100644
--- a/components/ChapterScreen.js
+++ b/components/ChapterScreen.js
@@ -140,9 +140,10 @@ const ChapterScreen = ({ navigation, route }) => {
 	}
 
 	useEffect(() => {
+		Image.resolveAssetSource({uri: '../assets/img/settings.png'});
+		
 		updateHeader();
 		loadChapterPages();
-		Image.resolveAssetSource({uri: '../assets/img/settings.png'});
 	}, []);
 
 	useEffect(() => {