change stylefor barcodescanner, colors, add views to create 'barcode'…

…-style
DiegoOTdC · Aug 20, 2020 · 41b8f48 · 41b8f48
1 parent fc961ba
commit 41b8f48
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 10 deletions.
diff --git 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
@@ -19,15 +19,15 @@ 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";
 
 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,29 +103,70 @@ 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);
           }}
         >
           <Text
             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,
+  },
+});