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 {