add question ids

add button bg

vds-app/App/components/Button.js

@@ -1,7 +1,9 @@
 import React from "react"
-import { View, TouchableOpacity, Text, StyleSheet } from "react-native"
+import { View, TouchableOpacity, Text, StyleSheet, ImageBackground } from "react-native"
 import { colors } from "../components/Variables"
 
+const bgImage = require("../assets/buttonBg.png")
+
 const styles = StyleSheet.create({
   button: {
     backgroundColor: colors.white_alpha,
@@ -15,6 +17,10 @@ const styles = StyleSheet.create({
     width: "100%",
     marginTop: 15
   },
+  noPadding: {
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+  },
   text: {
     color: colors.white,
     fontSize: 20,
@@ -37,10 +43,20 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     overflow: "hidden",
     borderRadius: 10
+  },
+  buttonBg: {
+    flex: 1,
+    paddingVertical: 15,
+    height: '100%',
+    width: '100%',
+    resizeMode: 'cover'
+  },
+  buttonPadding: {
+    paddingHorizontal: 20
   }
 })
 
-export const Button = ({ text, subtitle = null, isBig = false, colorize = false, color = false, noPadding = false, noBorder = false, halfSize = false, hasShadow = false,  onPress = false }) => {
+export const Button = ({ text, subtitle = null, isBig = false, colorize = false, color = false, noPadding = false, noBorder = false, halfSize = false, hasShadow = false, hasBg = false,  onPress = false }) => {
 
   const buttonBig = isBig ? {fontSize: 25} : {}
   const isClicked = colorize.clicked == colorize.id
@@ -65,32 +81,53 @@ export const Button = ({ text, subtitle = null, isBig = false, colorize = false,
   }
 
   if(onPress) {
+    if(hasBg) {
+      if(subtitle) {
+        return (
+          <TouchableOpacity onPress={onPress} style={[styles.button, styles.noPadding, buttonColor, planeButton, noBorderButton, isHalf]}>
+            <ImageBackground source={bgImage} style={styles.buttonBg}>
+              <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : '', {fontWeight: "500"}]}>{text}</Text>
+              <Text style={[styles.subtitle, styles.buttonPadding, hasShadow ? styles.shadow : '']}>{subtitle}</Text>
+            </ImageBackground>
+          </TouchableOpacity>
+        )
+      } else {
+        return (
+          <TouchableOpacity onPress={onPress} style={[styles.button, styles.noPadding, buttonColor, planeButton, noBorderButton, isHalf]}>
+            <ImageBackground source={bgImage} style={styles.buttonBg}>
+              <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : '']}>{text}</Text>
+            </ImageBackground>
+          </TouchableOpacity>
+        )
+      }
+    } else {
       if(subtitle) {
         return (
           <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
-          <Text style={[styles.text, buttonBig, hasShadow ? styles.shadow : '', {fontWeight: "500"}]}>{text}</Text>
-          <Text style={[styles.subtitle, hasShadow ? styles.shadow : '']}>{subtitle}</Text>
+            <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : '', {fontWeight: "500"}]}>{text}</Text>
+            <Text style={[styles.subtitle, styles.buttonPadding, hasShadow ? styles.shadow : '']}>{subtitle}</Text>
           </TouchableOpacity>
         )
       } else {
         return (
           <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
-          <Text style={[styles.text, buttonBig, hasShadow ? styles.shadow : '']}>{text}</Text>
+            <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : '']}>{text}</Text>
           </TouchableOpacity>
         )
       }
+    }
   } else {
     if(subtitle) {
       return (
         <View style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
-          <Text style={[styles.text, buttonBig, hasShadow ? styles.shadow : ''], {fontWeight: "500"}}>{text}</Text>
-          <Text style={[styles.subtitle, hasShadow ? styles.shadow : '']}>{subtitle}</Text>
+          <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : ''], {fontWeight: "500"}}>{text}</Text>
+          <Text style={[styles.subtitle, styles.buttonPadding, hasShadow ? styles.shadow : '']}>{subtitle}</Text>
         </View>
       )
     } else {
       return (
         <View style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
-          <Text style={[styles.text, buttonBig, hasShadow ? styles.shadow : '']}>{text}</Text>
+          <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : '']}>{text}</Text>
         </View>
       )
     }
@@ -100,7 +137,7 @@ export const Button = ({ text, subtitle = null, isBig = false, colorize = false,
 
 export const ButtonContainer = ({ children, isBoxed = false}) => {
 
-  let boxedStyle = isBoxed ? {borderWidth: 3, borderColor: colors.white_alpha2} : {}
+  let boxedStyle = isBoxed ? {borderWidth: 2, borderColor: colors.white_alpha2} : {}
 
   return (
     <View style={[styles.buttonContainer, boxedStyle]}>{children}</View>

vds-app/App/screens/Exam.js

@@ -37,7 +37,16 @@ const styles = StyleSheet.create({
     fontSize: 20,
     textAlign: "center",
     fontWeight: "600",
-    paddingVertical: 20
+    paddingTop: 5,
+    paddingBottom: 20
+  },
+  textCode: {
+    color: colors.white,
+    fontSize: 12,
+    textAlign: "center",
+    fontWeight: "500",
+    paddingTop: 20,
+    paddingBottom: 0
   },
   timer: {
     color: colors.white,
@@ -219,6 +228,7 @@ class Exam extends React.Component {
         <SafeAreaView style={styles.safearea}>
           <Text style={styles.timer}>{new Date(this.state.timer * 1000).toISOString().substr(11, 8)}</Text>
           <View>
+            <Text style={styles.textCode}>{question.id}</Text>
             <Text style={styles.text}>{question.question}</Text>
 
             <ButtonContainer>

vds-app/App/screens/Quiz.js

@@ -17,7 +17,16 @@ const styles = StyleSheet.create({
     fontSize: 20,
     textAlign: "center",
     fontWeight: "600",
-    paddingVertical: 20
+    paddingTop: 5,
+    paddingBottom: 20
+  },
+  textCode: {
+    color: colors.white,
+    fontSize: 12,
+    textAlign: "center",
+    fontWeight: "500",
+    paddingTop: 20,
+    paddingBottom: 0
   },
   safearea: {
     flex: 1,
@@ -159,6 +168,7 @@ class Quiz extends React.Component {
               {!this.state.results ?
               <SafeAreaView style={styles.safearea}>
                 <View>
+                  <Text style={styles.textCode}>{question.id}</Text>
                   <Text style={styles.text}>{question.question}</Text>
 
                   <ButtonContainer>

vds-app/App/screens/Recap.js

@@ -66,7 +66,15 @@ const styles = StyleSheet.create({
     fontSize: 20,
     textAlign: "center",
     fontWeight: "600",
-    paddingTop: 10
+    paddingTop: 0
+  },
+  textCode: {
+    color: colors.white,
+    fontSize: 12,
+    textAlign: "center",
+    fontWeight: "500",
+    paddingTop: 10,
+    paddingBottom: 0
   },
   textBig: {
     color: colors.white,
@@ -141,6 +149,7 @@ class Recap extends React.Component {
           <SafeAreaView style={styles.safearea}>
             {questions.map( (question, index) => (
               <View style={styles.box} key={question.id}>
+                <Text style={styles.textCode}>{question.id}</Text>
                 <Text style={styles.text}>{question.text}</Text>
 
                 <ButtonContainer>

vds-app/App/screens/RecapTrueFalse.js

@@ -66,7 +66,15 @@ const styles = StyleSheet.create({
     fontSize: 20,
     textAlign: "center",
     fontWeight: "600",
-    paddingTop: 10
+    paddingTop: 0
+  },
+  textCode: {
+    color: colors.white,
+    fontSize: 12,
+    textAlign: "center",
+    fontWeight: "500",
+    paddingTop: 10,
+    paddingBottom: 0
   },
   textBig: {
     color: colors.white,
@@ -145,6 +153,7 @@ class RecapTrueFalse extends React.Component {
           <SafeAreaView style={styles.safearea}>
             {questions.map( (question, index) => (
               <View style={styles.box} key={question.id}>
+                <Text style={styles.textCode}>{question.id}</Text>
                 <Text style={styles.text}>{question.text}</Text>
 
                 <ButtonContainer>

vds-app/App/screens/Splash.js

@@ -145,6 +145,7 @@ class Splash extends React.Component {
                 text={texts.section_quizzes}
                 subtitle={`(${texts.section_quizzes_subtitle})`}
                 isBig={false}
+                hasBg={true}
                 noPadding={true}
                 hasShadow={true}
                 color={colors.white_alpha}
@@ -158,6 +159,7 @@ class Splash extends React.Component {
                 text={texts.exam}
                 subtitle={`(${texts.exam_simulation})`}
                 isBig={false}
+                hasBg={true}
                 noPadding={true}
                 hasShadow={true}
                 color={colors.white_alpha}
@@ -173,6 +175,7 @@ class Splash extends React.Component {
                 text={texts.trueFalse}
                 subtitle={`(${texts.trueFalseSubtitle})`}
                 isBig={false}
+                hasBg={true}
                 noPadding={true}
                 hasShadow={true}
                 color={colors.white_alpha}
@@ -187,6 +190,7 @@ class Splash extends React.Component {
                 text={texts.dictionaryTitle}
                 subtitle={`(${texts.dictionarySubtitle})`}
                 isBig={false}
+                hasBg={true}
                 noPadding={true}
                 hasShadow={true}
                 color={colors.white_alpha}
@@ -195,6 +199,7 @@ class Splash extends React.Component {
               <Button
                 text={texts.infoTitle}
                 isBig={false}
+                hasBg={true}
                 noPadding={true}
                 hasShadow={true}
                 color={colors.white_alpha}
@@ -203,6 +208,7 @@ class Splash extends React.Component {
               <Button
                 text={texts.exit}
                 isBig={false}
+                hasBg={true}
                 noPadding={true}
                 hasShadow={true}
                 noBorder={true}

vds-app/App/screens/TrueFalse.js

@@ -39,7 +39,16 @@ const styles = StyleSheet.create({
     fontSize: 20,
     textAlign: "center",
     fontWeight: "600",
-    paddingVertical: 20
+    paddingTop: 5,
+    paddingBottom: 20
+  },
+  textCode: {
+    color: colors.white,
+    fontSize: 12,
+    textAlign: "center",
+    fontWeight: "500",
+    paddingTop: 20,
+    paddingBottom: 0
   },
   textAnswer: {
     color: colors.black,
@@ -215,6 +224,7 @@ class Quiz extends React.Component {
               {!this.state.results ?
               <SafeAreaView style={styles.safearea}>
                 <View>
+                  <Text style={styles.textCode}>{question.id}</Text>
                   <Text style={styles.text}>{question.question}</Text>
                   <Text style={styles.textAnswer}>{randomAnswer.text}</Text>
 

vds-app/package.json

@@ -4,6 +4,7 @@
     "start": "expo start",
     "android": "expo start --android",
     "build-android": "expo build:android -t app-bundle",
+    "build-ios": "expo build:ios",
     "ios": "expo start --ios",
     "eject": "expo eject",
     "lint": "eslint ."