diff --git a/vds-app/App/assets/buttonBg.png b/vds-app/App/assets/buttonBg.png new file mode 100644 index 0000000..b1709a8 Binary files /dev/null and b/vds-app/App/assets/buttonBg.png differ diff --git a/vds-app/App/components/Button.js b/vds-app/App/components/Button.js index 1d89d81..d29bb36 100644 --- a/vds-app/App/components/Button.js +++ b/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(subtitle) { - return ( - - {text} - {subtitle} - - ) + if(hasBg) { + if(subtitle) { + return ( + + + {text} + {subtitle} + + + ) + } else { + return ( + + + {text} + + + ) + } } else { - return ( - - {text} - - ) + if(subtitle) { + return ( + + {text} + {subtitle} + + ) + } else { + return ( + + {text} + + ) + } } } else { if(subtitle) { return ( - {text} - {subtitle} + {text} + {subtitle} ) } else { return ( - {text} + {text} ) } @@ -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 ( {children} diff --git a/vds-app/App/screens/Exam.js b/vds-app/App/screens/Exam.js index 1a2d637..ab14cd8 100644 --- a/vds-app/App/screens/Exam.js +++ b/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 { {new Date(this.state.timer * 1000).toISOString().substr(11, 8)} + {question.id} {question.question} diff --git a/vds-app/App/screens/Quiz.js b/vds-app/App/screens/Quiz.js index 6ba17cc..e033e44 100644 --- a/vds-app/App/screens/Quiz.js +++ b/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 ? + {question.id} {question.question} diff --git a/vds-app/App/screens/Recap.js b/vds-app/App/screens/Recap.js index 82019b9..26d4168 100644 --- a/vds-app/App/screens/Recap.js +++ b/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 { {questions.map( (question, index) => ( + {question.id} {question.text} diff --git a/vds-app/App/screens/RecapTrueFalse.js b/vds-app/App/screens/RecapTrueFalse.js index 9fbd61b..1d388ad 100644 --- a/vds-app/App/screens/RecapTrueFalse.js +++ b/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 { {questions.map( (question, index) => ( + {question.id} {question.text} diff --git a/vds-app/App/screens/Splash.js b/vds-app/App/screens/Splash.js index 836c2d4..54e9dd2 100644 --- a/vds-app/App/screens/Splash.js +++ b/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 {