Merge pull request #6 from DiegoOTdC/styling

Styling
DiegoOTdC · Aug 20, 2020 · 1b44d24 · 1b44d24
2 parents dd57c07 + 41b8f48
commit 1b44d24
Show file tree

Hide file tree

Showing 12 changed files with 421 additions and 145 deletions.
diff --git a/App.js b/App.js
@@ -3,6 +3,8 @@ import { Provider } from "react-redux";
 import store from "./src/store";
 import { YellowBox } from "react-native";
 import * as firebase from "firebase";
+import StackNavigator from "./src/navigation/StackNavigator";
+
 import {
   apiKey,
   authDomain,
@@ -12,17 +14,6 @@ import {
   messagingSenderId,
 } from "@env";
 
-import { NavigationContainer } from "@react-navigation/native";
-import { createStackNavigator } from "@react-navigation/stack";
-import HomeScreen from "./src/screens/HomeScreen";
-import BarcodeScanner from "./src/screens/BarcodeScanner";
-import Camera from "./src/screens/Camera";
-import Preview from "./src/screens/Preview";
-import Recipes from "./src/screens/Recipes";
-import RecipeDetails from "./src/screens/RecipeDetails";
-import Register from "./src/screens/Register";
-import Login from "./src/screens/Login";
-
 const firebaseConfig = {
   apiKey: apiKey,
   authDomain: authDomain,
@@ -36,25 +27,12 @@ if (!firebase.apps.length) {
   firebase.initializeApp(firebaseConfig);
 }
 
-const Stack = createStackNavigator();
-
 function App() {
   //This warning is not causing any problems and as far as I know we can't do anything about it. Created by using firebase.
   YellowBox.ignoreWarnings(["Setting a timer"]);
   return (
     <Provider store={store}>
-      <NavigationContainer>
-        <Stack.Navigator screenOptions={{ headerShown: false }}>
-          <Stack.Screen name="Login" component={Login} />
-          <Stack.Screen name="Register" component={Register} />
-          <Stack.Screen name="HomeScreen" component={HomeScreen} />
-          <Stack.Screen name="BarcodeScanner" component={BarcodeScanner} />
-          <Stack.Screen name="Camera" component={Camera} />
-          <Stack.Screen name="Preview" component={Preview} />
-          <Stack.Screen name="Recipes" component={Recipes} />
-          <Stack.Screen name="RecipeDetails" component={RecipeDetails} />
-        </Stack.Navigator>
-      </NavigationContainer>
+      <StackNavigator />
     </Provider>
   );
 }

diff --git a/src/components/Loading/index.js b/src/components/Loading/index.js
@@ -1,19 +1,21 @@
 import React from "react";
-import { Text, View, ActivityIndicator } from "react-native";
-import { green, blue } from "../../colours";
+import { View, Image } from "react-native";
+import { green } from "../../colours";
 
 export default function Loading() {
   return (
     <View
       style={{
         flex: 1,
         justifyContent: "center",
+        alignItems: "center",
         backgroundColor: green,
       }}
     >
-      <Text style={{ color: blue }}>Niles: </Text>
-      <Text style={{ color: blue }}>"Going as fast as I can.."</Text>
-      <ActivityIndicator size="large" color={blue} />
+      <Image
+        style={{ width: 400, height: 400 }}
+        source={require("../../images/scanFoodLoading.gif")}
+      />
     </View>
   );
 }
diff --git a/src/components/Recipe/index.js b/src/components/Recipe/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import { Text, View, StyleSheet, Image, ActivityIndicator } from "react-native";
 import placeholder from "../../images/placeholder.png";
 
-import { green, red } from "../../colours";
+import { green, lightGreen, red, salmon } from "../../colours";
 import {
   useFonts,
   AlfaSlabOne_400Regular,
@@ -25,7 +25,9 @@ export default function Recipe(props) {
           style={styles.image}
           source={{ uri: image ? image : placeholder }}
         />
-        <Text style={styles.title}>{title}</Text>
+        <Text adjustFontSizeToFit={true} numberOfLines={3} style={styles.title}>
+          {title}
+        </Text>
       </View>
     );
   }
@@ -34,16 +36,26 @@ export default function Recipe(props) {
 const styles = StyleSheet.create({
   recipeCard: {
     flex: 0.5,
+    justifyContent: "space-between",
     backgroundColor: red,
     margin: 10,
+    height: 280,
+    borderTopLeftRadius: 90,
+    borderTopRightRadius: 90,
+    borderRadius: 10,
+  },
+  image: {
+    width: "100%",
+    height: 180,
+    borderRadius: 90,
   },
-  image: { width: "100%", height: 150 },
   touch: { backgroundColor: green, width: "50%" },
   title: {
-    alignSelf: "center",
+    textAlign: "center",
     fontFamily: alfa,
     fontSize: 20,
-    color: "white",
-    padding: 10,
+    color: "#f8f8ff",
+    paddingHorizontal: 10,
+    paddingBottom: 10,
   },
 });
diff --git a/src/images/pressToScan.png b/src/images/pressToScan.png
diff --git a/src/images/scanFoodLoading.gif b/src/images/scanFoodLoading.gif
diff --git a/src/images/trialGif.gif b/src/images/trialGif.gif
diff --git a/src/navigation/StackNavigator.js b/src/navigation/StackNavigator.js
@@ -0,0 +1,35 @@
+import React from "react";
+
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import HomeScreen from "../screens/HomeScreen";
+import BarcodeScanner from "../screens/BarcodeScanner";
+import CameraScreen from "../screens/Camera";
+import Preview from "../screens/Preview";
+import Recipes from "../screens/Recipes";
+import RecipeDetails from "../screens/RecipeDetails";
+import Register from "../screens/Register";
+import Login from "../screens/Login";
+
+import { useSelector } from "react-redux";
+import { selectToken } from "../store/user/selectors";
+
+export default function StackNavigator() {
+  const Stack = createStackNavigator();
+  const token = useSelector(selectToken);
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="HomeScreen" component={HomeScreen} />
+        {!token ? <Stack.Screen name="Login" component={Login} /> : null}
+        {!token ? <Stack.Screen name="Register" component={Register} /> : null}
+        <Stack.Screen name="BarcodeScanner" component={BarcodeScanner} />
+        <Stack.Screen name="Camera" component={CameraScreen} />
+        <Stack.Screen name="Preview" component={Preview} />
+        <Stack.Screen name="Recipes" component={Recipes} />
+        <Stack.Screen name="RecipeDetails" component={RecipeDetails} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
@@ -19,19 +19,20 @@ 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);
   const [fontsLoaded] = useFonts({ Alata_400Regular });
+  const [scanner, setScanner] = useState(true);
 
   if (message) {
     Alert.alert(message);
@@ -40,6 +41,10 @@ export default function BarcodeScanner({ navigation }) {
     dispatch(removeRecipes());
   }
 
+  useEffect(() => {
+    setScanner(true);
+  }, [scanned]);
+
   useEffect(() => {
     (async () => {
       const { status } = await BarCodeScanner.requestPermissionsAsync();
@@ -55,6 +60,7 @@ export default function BarcodeScanner({ navigation }) {
   useEffect(() => {
     if (scanned && imageUri && !message && labels) {
       setScanned(false);
+      setScanner(false);
       navigation.navigate("Preview", { imageUri });
     }
   }, [scanned, handleBarCodeScanned]);
@@ -82,42 +88,85 @@ export default function BarcodeScanner({ navigation }) {
       <Text
         style={{
           textAlign: "center",
-          color: lightBrown,
+          color: green,
           fontFamily: alata,
           fontSize: 35,
           marginTop: 25,
         }}
       >
         Aim at the barcode!
       </Text>
-      <BarCodeScanner
-        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
-        style={StyleSheet.absoluteFillObject}
-      />
+      {scanner ? (
+        <BarCodeScanner
+          onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
+          style={StyleSheet.absoluteFillObject}
+        />
+      ) : 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,
+  },
+});
diff --git a/src/screens/Camera/index.js b/src/screens/Camera/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Text, View, TouchableOpacity } from "react-native";
+import { Text, View, TouchableOpacity, Image } from "react-native";
 import * as firebase from "firebase";
 import { Camera } from "expo-camera";
 import Loading from "../../components/Loading";
@@ -10,9 +10,10 @@ import { removeUrl } from "../../store/labels/actions";
 import { selectUser } from "../../store/user/selectors";
 import { selectUrl } from "../../store/labels/selectors";
 
-export default function App({ navigation }) {
+export default function CameraScreen({ navigation }) {
   const dispatch = useDispatch();
   const [hasPermission, setHasPermission] = useState(null);
+  const [opacity, setOpacity] = useState(1);
   const [loading, setLoading] = useState(false);
   const user = useSelector(selectUser);
   const url = useSelector(selectUrl);
@@ -43,7 +44,7 @@ export default function App({ navigation }) {
     return <Text>No access to camera</Text>;
   }
 
-  const snap = async () => {
+  const scan = async () => {
     if (this.camera) {
       try {
         const image = await this.camera.takePictureAsync();
@@ -63,8 +64,10 @@ export default function App({ navigation }) {
                 .then((url) => {
                   dispatch(fetchImageLabels(url));
                 })
-                .then(() => setLoading(false))
-                .then(() => navigation.navigate("Preview", { imageUri }))
+                .then(() => {
+                  setLoading(false);
+                  navigation.navigate("Preview", { imageUri });
+                })
                 .catch((e) =>
                   console.log("getting downloadURL of image error", e.message)
                 );
@@ -111,17 +114,20 @@ export default function App({ navigation }) {
             }}
           >
             <TouchableOpacity
+              onPressIn={() => setOpacity(0.5)}
+              onPressOut={() => setOpacity(1)}
+              onLongPress={scan}
               style={{
-                flex: 0.1,
+                flex: 1,
                 alignSelf: "center",
                 alignItems: "center",
               }}
-              onPress={snap}
+              onPress={scan}
             >
-              <Text style={{ fontSize: 18, marginBottom: 10, color: "white" }}>
-                {" "}
-                [SCAN IMAGE]{" "}
-              </Text>
+              <Image
+                style={{ width: 418, height: 570, opacity: opacity }}
+                source={require("../../images/pressToScan.png")}
+              />
             </TouchableOpacity>
           </View>
         </Camera>