From 41b8f4809c51babe11af1141df541f3edf676498 Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Thu, 20 Aug 2020 17:44:14 +0200
Subject: [PATCH] change stylefor barcodescanner, colors, add views to create
 'barcode'-style

---
 src/components/Loading/index.js     |  4 +-
 src/screens/BarcodeScanner/index.js | 57 +++++++++++++++++++++++++----
 2 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/components/Loading/index.js b/src/components/Loading/index.js
index 5986697..781a73a 100644
--- a/src/components/Loading/index.js
+++ b/src/components/Loading/index.js
@@ -1,6 +1,6 @@
 import React from "react";
-import { Text, View, ActivityIndicator, Image } from "react-native";
-import { green, blue } from "../../colours";
+import { View, Image } from "react-native";
+import { green } from "../../colours";
 
 export default function Loading() {
   return (
diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
index c2a1bbe..396e506 100644
--- a/src/screens/BarcodeScanner/index.js
+++ b/src/screens/BarcodeScanner/index.js
@@ -19,7 +19,7 @@ import { selectUrl } from "../../store/labels/selectors";
 import { selectLabels } from "../../store/labels/selectors";
 import { selectMessage } from "../../store/labels/selectors";
 
-import { blue, lightBrown, lightBlue } from "../../colours";
+import { blue, lightBrown, lightBlue, green, darkBlue } from "../../colours";
 import { useFonts, Alata_400Regular } from "@expo-google-fonts/alata";
 const alata = "Alata_400Regular";
 
@@ -27,7 +27,7 @@ export default function BarcodeScanner({ navigation }) {
   const dispatch = useDispatch();
   const [hasPermission, setHasPermission] = useState(null);
   const [scanned, setScanned] = useState(false);
-  const [fontColor, setFontColor] = useState(lightBrown);
+  const [fontColor, setFontColor] = useState(blue);
   const imageUri = useSelector(selectUrl);
   const labels = useSelector(selectLabels);
   const message = useSelector(selectMessage);
@@ -88,7 +88,7 @@ export default function BarcodeScanner({ navigation }) {
       <Text
         style={{
           textAlign: "center",
-          color: lightBrown,
+          color: green,
           fontFamily: alata,
           fontSize: 35,
           marginTop: 25,
@@ -103,14 +103,45 @@ export default function BarcodeScanner({ navigation }) {
         />
       ) : null}
 
+      <View style={{ flexDirection: "row", flex: 1, marginTop: 594 }}>
+        <View style={[styles.bar, { width: 10 }]} />
+        <View style={[styles.bar, { width: 30 }]} />
+        <View style={[styles.bar, { width: 10 }]} />
+        <View style={[styles.bar, { width: 5 }]} />
+        <View style={[styles.bar, { width: 5 }]} />
+        <View style={[styles.bar, { width: 25 }]} />
+        <View style={[styles.bar, { width: 10 }]} />
+        <View style={[styles.bar, { width: 5 }]} />
+        <View style={[styles.bar, { width: 3 }]} />
+        <View style={[styles.bar, { width: 15 }]} />
+        <View style={[styles.bar, { width: 10 }]} />
+        <View style={[styles.bar, { width: 15 }]} />
+        <View style={[styles.bar, { width: 25 }]} />
+        <View style={[styles.bar, { width: 15 }]} />
+        <View style={[styles.bar, { width: 10 }]} />
+        <View style={[styles.bar, { width: 25 }]} />
+        <View style={[styles.bar, { width: 15 }]} />
+        <View style={[styles.bar, { width: 10 }]} />
+        <View style={[styles.bar, { width: 3 }]} />
+        <View style={[styles.bar, { width: 5 }]} />
+        <View style={[styles.bar, { width: 10 }]} />
+        <View style={[styles.bar, { width: 20 }]} />
+        <View style={[styles.bar, { width: 5 }]} />
+        <View style={[styles.bar, { width: 20 }]} />
+      </View>
+
       {scanned && (
         <TouchableHighlight
-          style={{ alignSelf: "center", marginBottom: 25 }}
+          style={{
+            alignSelf: "center",
+            marginBottom: 30,
+            backgroundColor: green,
+          }}
           activeOpacity={1}
           underlayColor={blue}
-          onShowUnderlay={() => setFontColor(lightBlue)}
+          onShowUnderlay={() => setFontColor(green)}
           onPress={() => {
-            setFontColor(lightBrown);
+            setFontColor(blue);
             setScanned(false);
           }}
         >
@@ -118,14 +149,24 @@ export default function BarcodeScanner({ navigation }) {
             style={{
               textAlign: "center",
               color: fontColor,
-              fontSize: 35,
+              fontSize: 45,
               fontFamily: alata,
+              marginTop: -15,
+              marginBottom: 3,
             }}
           >
-            Tap to Scan Again
+            Tap to Scan
           </Text>
         </TouchableHighlight>
       )}
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  bar: {
+    height: 145,
+    backgroundColor: green,
+    marginRight: 5,
+  },
+});