Jpe#about screen (#185)

Jpe#about screen

src/Components/About/aboutCards.js

@@ -0,0 +1,75 @@
+import React from "react"
+import { View, StyleSheet, Text, Linking } from "react-native"
+import Icon from "react-native-vector-icons/FontAwesome"
+import { Avatar } from "react-native-elements"
+import LinearGradient from "react-native-linear-gradient"
+
+const aboutCards = props => {
+  const { name, desc, avatar, socialMedia } = props
+
+  const openURL = url => {
+    Linking.openURL(url)
+  }
+
+  return (
+    <LinearGradient colors={["#fff", "#F4F5F8"]} style={styles.cardView}>
+      <Avatar
+        rounded
+        icon={{ name: "user", type: "font-awesome" }}
+        source={avatar}
+        size="medium"
+      />
+      <View style={styles.cardViewText}>
+        <Text style={styles.titleTextStyle}>{name}</Text>
+        <Text style={styles.bodyTextStyle}>{desc}</Text>
+        <View style={styles.iconView}>
+          <Icon
+            name="twitter"
+            size={30}
+            color="#38A1F3"
+            onPress={() => openURL(socialMedia.twitter)}
+          />
+          <Icon
+            name="github"
+            size={30}
+            color="#333"
+            onPress={() => openURL(socialMedia.github)}
+          />
+        </View>
+      </View>
+    </LinearGradient>
+  )
+}
+
+const styles = StyleSheet.create({
+  cardView: {
+    elevation: 1,
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 10,
+    marginLeft: 30,
+    marginRight: 30,
+    marginBottom: 15,
+    flexDirection: "row"
+  },
+  iconView: {
+    flexDirection: "row"
+  },
+  cardViewText: {
+    marginLeft: 10
+  },
+  titleTextStyle: {
+    fontSize: 20,
+    fontFamily: "OpenSans",
+    color: "#999295"
+  },
+  bodyTextStyle: {
+    fontSize: 14,
+    fontFamily: "OpenSans",
+    color: "#999295"
+  }
+})
+
+export default aboutCards

src/Components/About/aboutHeader.js

@@ -0,0 +1,54 @@
+import React from "react"
+
+import { View, StyleSheet, Text, TouchableOpacity } from "react-native"
+import { Icon } from "react-native-elements"
+
+const aboutHeader = props => {
+  return (
+    <View style={styles.header}>
+      <View style={styles.headerContent}>
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={() => {
+            const { navigation } = props
+            navigation.navigate("SettingsScreen")
+          }}
+          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+        >
+          <Icon name="ios-arrow-back" color="#00aced" type="ionicon" />
+        </TouchableOpacity>
+        <Text style={styles.languagesInfo}>Sobre</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  header: {
+    backgroundColor: "#fff",
+    elevation: 5,
+    marginTop: 0,
+    fontFamily: "OpenSans"
+  },
+  headerContent: {
+    backgroundColor: "#fff",
+    marginBottom: 15,
+    marginTop: 15,
+    marginLeft: 15,
+    marginRight: 10,
+    flexDirection: "row"
+  },
+  backButton: {
+    justifyContent: "center"
+  },
+  languagesInfo: {
+    flex: 1,
+    fontSize: 22,
+    textAlign: "center",
+    backgroundColor: "#fff",
+    marginLeft: 20,
+    paddingRight: 20
+  }
+})
+
+export default aboutHeader

src/Components/Config/configBody.js

@@ -130,7 +130,12 @@ export default class configBody extends Component {
               <Text style={styles.touchableStyle}>Política de Privacidade</Text>
             </TouchableOpacity>
 
-            <TouchableOpacity style={styles.touchableIcon}>
+            <TouchableOpacity
+              style={styles.touchableIcon}
+              onPress={() => {
+                navigation.navigate("AboutScreen")
+              }}
+            >
               <Icon name="info" size={28} color="#ef9739" />
               <Text style={styles.touchableStyle}>Sobre</Text>
             </TouchableOpacity>

src/Screens/About/about.js

@@ -0,0 +1,138 @@
+import React from "react"
+import {
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  Linking
+} from "react-native"
+import AboutHeader from "~/Components/About/aboutHeader"
+import AboutCards from "~/Components/About/aboutCards"
+
+const aboutScreen = props => {
+  const { navigation } = props
+
+  const openURL = url => {
+    Linking.openURL(url)
+  }
+
+  const devCards = [
+    {
+      id: "1",
+      name: "José Chaves",
+      desc: "Cara que fez (quase) tudo",
+      avatar: require("../../assets/imgs/dev_profiles/neto.jpeg"),
+      socialMedia: {
+        twitter: "https://twitter.com/dctlol",
+        github: "https://github.com/netochaves"
+      }
+    },
+    {
+      id: "2",
+      name: "João Pedro",
+      desc: "Só ajudou mesmo",
+      avatar: require("../../assets/imgs/dev_profiles/jpe.jpeg"),
+      socialMedia: {
+        twitter: "https://twitter.com/",
+        github: "https://github.com/sosolidkk"
+      }
+    },
+    {
+      id: "3",
+      name: "Max Nícolas",
+      desc: "100% estresse",
+      avatar: require("../../assets/imgs/dev_profiles/max.jpeg"),
+      socialMedia: {
+        twitter: "https://twitter.com/Mex978",
+        github: "https://github.com/Mex978"
+      }
+    },
+    {
+      id: "4",
+      name: "Evandro Monte",
+      desc: "Foi o último team leader",
+      avatar: require("../../assets/imgs/dev_profiles/evandro.jpeg"),
+      socialMedia: {
+        twitter: "https://twitter.com/",
+        github: "https://github.com/mrvan04"
+      }
+    }
+  ]
+
+  return (
+    <View style={styles.container}>
+      <AboutHeader navigation={navigation} />
+      <View style={styles.elevationBody}>
+        <Text style={styles.titleTextStyle}>Unichat</Text>
+        <Text style={styles.titleTextStyle}>Versão 0.3.0</Text>
+        <Image
+          source={require("../../assets/imgs/unichat-icon.png")}
+          style={styles.imageStyle}
+        />
+        <Text style={styles.titleTextStyle}>2019 Unichat Inc.</Text>
+        <TouchableOpacity
+          onPress={() =>
+            openURL("https://github.com/ES2-UFPI/Unichat/blob/master/LICENSE")
+          }
+        >
+          <Text style={styles.linkStyle}>Licença</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.textViewStyle}>
+        <Text style={styles.titleTextStyle}>Créditos</Text>
+      </View>
+      <ScrollView>
+        {devCards.map(dev => {
+          return <AboutCards {...dev} key={dev.id} />
+        })}
+      </ScrollView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#F4F5F8"
+  },
+  elevationBody: {
+    backgroundColor: "#fff",
+    elevation: 1,
+    borderRadius: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
+    marginTop: 30,
+    marginLeft: 30,
+    marginRight: 30,
+    marginBottom: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column"
+  },
+  textViewStyle: {
+    marginTop: 15,
+    marginBottom: 20,
+    marginLeft: 30,
+    marginRight: 30
+  },
+  imageStyle: {
+    marginTop: 10,
+    marginBottom: 10,
+    width: 75,
+    height: 75
+  },
+  linkStyle: {
+    fontSize: 20,
+    color: "#0000ff",
+    textDecorationLine: "underline"
+  },
+  titleTextStyle: {
+    fontSize: 20,
+    fontFamily: "OpenSans",
+    color: "#999295"
+  }
+})
+
+export default aboutScreen

src/routes.js

@@ -15,7 +15,7 @@ import Conversas from "~/Screens/Conversas/conversas"
 import Settings from "~/Screens/Config/config"
 import EditPerfil from "~/Screens/EditPerfil/editperfil"
 import Languages from "~/Screens/Languages/languages"
-
+import About from "~/Screens/About/about"
 import { Icon } from "react-native-elements"
 
 const tabBarNavigator = createMaterialTopTabNavigator(
@@ -91,13 +91,14 @@ const HomeStackNavigator = createStackNavigator(
         header: null
       }
     },
+    PreviewImage: {
+      screen: PreviewImage
+    },
+
     LanguagesScreen: {
       screen: Languages,
       navigationOptions: {
-        title: "Tela de Idiomas",
-        headerTitleStyle: {
-          fontWeight: "normal"
-        }
+        header: null
       }
     },
     Contacts: {
@@ -118,6 +119,12 @@ const HomeStackNavigator = createStackNavigator(
       navigationOptions: {
         header: null
       }
+    },
+    AboutScreen: {
+      screen: About,
+      navigationOptions: {
+        header: null
+      }
     }
   },
   {