Merge pull request #82 from InvTrack/app-redesign

App redesign

native/components/BarcodeScanner/_ReanimatedCameraTracers.tsx

@@ -176,7 +176,7 @@ const useStyles = createStyles((theme) =>
     container: {
       flex: 1,
       justifyContent: "center",
-      backgroundColor: theme.colors.lightBlue,
+      // backgroundColor: theme.colors.lightBlue,
       height: "100%",
     },
     camera: {

native/components/BarcodeScanner/index.tsx

@@ -3,7 +3,6 @@ import { BarCodeScanningResult, Camera, CameraType, Point } from "expo-camera";
 import { useNavigation } from "@react-navigation/native";
 import React, { useRef, useState } from "react";
 import {
-  ActivityIndicator,
   Alert,
   Animated,
   StyleSheet,
@@ -16,6 +15,7 @@ import { useListBarcodes } from "../../db/hooks/useListBarcodes";
 import { BarcodeModalScreenProps } from "../../screens/BarcodeModalScreen";
 import { createStyles } from "../../theme/useStyles";
 import { CameraSwitchIcon } from "../Icon";
+import { LoadingSpinner } from "../LoadingSpinner";
 import { Typography } from "../Typography";
 import { BarcodeOutline } from "./BarcodeOutline";
 
@@ -88,10 +88,10 @@ export const BarcodeScanner = ({
     setTRCornerAnimation(corners[3]);
   };
 
-  if (isLoading && !barcodeList) {
+  if (!isLoading && !barcodeList) {
     return (
       <View style={styles.container}>
-        <ActivityIndicator size="large" color="#000" />
+        <LoadingSpinner size={"large"} />
       </View>
     );
   }
@@ -101,6 +101,7 @@ export const BarcodeScanner = ({
       <View style={[styles.container, styles.paddingH]}>
         <Typography
           align="center"
+          color="darkGrey"
           style={{
             alignItems: "center",
             justifyContent: "center",
@@ -141,7 +142,10 @@ export const BarcodeScanner = ({
 
     // FIXME do it properly with navigation
     // @ts-ignore
-    navigation.navigate("RecordScreen", { id, recordId: barcodeMappedToId });
+    navigation.navigate("RecordScreen", {
+      id: inventoryId,
+      recordId: barcodeMappedToId,
+    });
   };
 
   return (
@@ -163,7 +167,7 @@ export const BarcodeScanner = ({
         />
         <View style={styles.buttonContainer}>
           <TouchableOpacity style={styles.button} onPress={toggleCameraType}>
-            <CameraSwitchIcon size={32} color="mediumBlue" />
+            <CameraSwitchIcon size={32} color="highlight" />
           </TouchableOpacity>
         </View>
       </Camera>
@@ -176,7 +180,7 @@ const useStyles = createStyles((theme) =>
     container: {
       flex: 1,
       justifyContent: "center",
-      backgroundColor: theme.colors.lightBlue,
+      backgroundColor: theme.colors.darkBlue,
       height: "100%",
     },
     camera: {

native/components/BottomSheet/BottomSheet.tsx

@@ -27,21 +27,6 @@ import { useInternalBottomSheet } from "./internal/useInternalBottomSheet";
 
 export const BOTTOMSHEET_TIMING_CLOSE = 250;
 
-const useStyles = createStyles(() =>
-  StyleSheet.create({
-    absoluteFill: StyleSheet.absoluteFillObject,
-    overlay: {
-      backgroundColor: "black",
-    },
-    bottomSheet: {
-      position: "absolute",
-      left: 0,
-      bottom: 0,
-      right: 0,
-    },
-  })
-);
-
 const BottomSheet = () => {
   const theme = useTheme();
   const styles = useStyles();
@@ -196,3 +181,18 @@ const BottomSheet = () => {
 };
 
 export default BottomSheet;
+
+const useStyles = createStyles(() =>
+  StyleSheet.create({
+    absoluteFill: StyleSheet.absoluteFillObject,
+    overlay: {
+      backgroundColor: "black",
+    },
+    bottomSheet: {
+      position: "absolute",
+      left: 0,
+      bottom: 0,
+      right: 0,
+    },
+  })
+);

native/components/BottomSheet/contents/DatePicker.tsx

@@ -20,18 +20,21 @@ export const DatePickerBottomSheetContent = ({
 
   return (
     <View
-      style={{
-        paddingBottom: 16 + insets.bottom,
-        paddingTop: 16,
-        backgroundColor: "#fff",
-      }}
+      style={[
+        {
+          paddingBottom: 16 + insets.bottom,
+        },
+        styles.container,
+      ]}
     >
-      <Typography style={styles.dateTitle}>Wybierz datę</Typography>
+      <Typography style={styles.dateTitle} variant="l" color="darkGrey">
+        Wybierz datę
+      </Typography>
       <DateTimePicker
         value={dateValue}
         mode={"date"}
         display="spinner"
-        themeVariant="light"
+        themeVariant="dark"
         onChange={(e, d) => {
           if (e.type === "dismissed") {
             return;
@@ -44,7 +47,7 @@ export const DatePickerBottomSheetContent = ({
         value={dateValue}
         mode={"time"}
         display="spinner"
-        themeVariant="light"
+        themeVariant="dark"
         is24Hour={true}
         onChange={(e, d) => {
           if (e.type === "dismissed") {
@@ -68,11 +71,15 @@ export const DatePickerBottomSheetContent = ({
 
 const useStyles = createStyles((theme) =>
   StyleSheet.create({
+    container: {
+      paddingTop: 16,
+      backgroundColor: theme.colors.darkBlue,
+    },
     dateTitle: {
       alignSelf: "center",
     },
     input: {
-      backgroundColor: theme.colors.white,
+      backgroundColor: theme.colors.darkBlue,
       alignSelf: "center",
     },
     button: {

native/components/BottomSheet/contents/Input.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+// import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { Keyboard, StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -30,47 +30,51 @@ export const InputBottomSheetContent = ({
       end: { height: keyboardHeight },
     },
   } = useKeyboard();
-  const { control, handleSubmit, setFocus, formState } =
-    useForm<InputBottomSheetForm>({
-      defaultValues: {
-        quantity: quantity.toString(),
-      },
-      mode: "onChange",
-    });
+  const {
+    control,
+    handleSubmit,
+    setFocus: _setFocus,
+    formState,
+  } = useForm<InputBottomSheetForm>({
+    defaultValues: {
+      quantity: quantity.toString(),
+    },
+    mode: "onChange",
+  });
 
   const isErrored = !!formState.errors.quantity?.message;
 
-  useEffect(() => {
-    // hack needed to make android focus the input
-    if (isAndroid) {
-      setTimeout(() => {
-        setFocus("quantity");
-      }, 1);
-      return;
-    }
-    setFocus("quantity");
-  }, []);
+  // useEffect(() => {
+  //   // hack needed to make android focus the input
+  //   if (isAndroid) {
+  //     setTimeout(() => {
+  //       setFocus("quantity");
+  //     }, 1);
+  //     return;
+  //   }
+  //   setFocus("quantity");
+  // }, []);
 
-  useEffect(() => {
-    const keyboardWillHide = Keyboard.addListener("keyboardWillHide", () =>
-      setFocus("quantity")
-    );
-    const keyboardDidHide = Keyboard.addListener("keyboardDidHide", () =>
-      setFocus("quantity")
-    );
-    const keyboardDidShow = Keyboard.addListener("keyboardDidShow", () => {
-      setFocus("quantity");
-    });
-    return () => {
-      keyboardWillHide.remove();
-      keyboardDidHide.remove();
-      keyboardDidShow.remove();
-    };
-  }, [isErrored, setFocus, handleSubmit]);
+  // useEffect(() => {
+  //   const keyboardWillHide = Keyboard.addListener("keyboardWillHide", () =>
+  //     setFocus("quantity")
+  //   );
+  //   const keyboardDidHide = Keyboard.addListener("keyboardDidHide", () =>
+  //     setFocus("quantity")
+  //   );
+  //   const keyboardDidShow = Keyboard.addListener("keyboardDidShow", () => {
+  //     setFocus("quantity");
+  //   });
+  //   return () => {
+  //     keyboardWillHide.remove();
+  //     keyboardDidHide.remove();
+  //     keyboardDidShow.remove();
+  //   };
+  // }, [isErrored, setFocus, handleSubmit]);
 
   const onSubmit = (data: InputBottomSheetForm) => {
     !isErrored && Keyboard.dismiss();
-    setQuantity(+data.quantity);
+    setQuantity(parseFloat(data.quantity.replace(/,/g, ".")));
     !isErrored && closeBottomSheet();
   };
 
@@ -85,14 +89,16 @@ export const InputBottomSheetContent = ({
       ]}
     >
       <View style={styles.topRow}>
-        <Typography style={styles.inputLabel}>Wpisz ilość</Typography>
+        <Typography style={styles.inputLabel} color="darkGrey">
+          Wpisz ilość
+        </Typography>
         <Button
           type="primary"
           size="xs"
           containerStyle={styles.button}
           onPress={handleSubmit(onSubmit)}
         >
-          <Typography variant="m">Zapisz</Typography>
+          Zapisz
         </Button>
       </View>
       <TextInputController
@@ -114,12 +120,14 @@ export const InputBottomSheetContent = ({
           pattern: {
             message:
               "Niepoprawna wartość, tylko liczby, maksymalnie 2 miejsca po przecinku",
-            value: /^[0-9]+(\.[0-9]{1,2})?$/,
+            value: /^[0-9]+([.,][0-9]{1,2})?$/,
           },
         }}
         textInputProps={{
           onSubmitEditing: handleSubmit(onSubmit),
           keyboardType: "numeric",
+          keyboardAppearance: "dark",
+          autoFocus: true,
         }}
       />
     </View>
@@ -129,7 +137,7 @@ export const InputBottomSheetContent = ({
 const useStyles = createStyles((theme) =>
   StyleSheet.create({
     container: {
-      backgroundColor: "white",
+      backgroundColor: theme.colors.darkBlue,
       paddingTop: theme.spacing,
       paddingHorizontal: theme.spacing * 2,
     },

native/components/BottomSheet/internal/BottomSheetContent.tsx

@@ -1,10 +1,11 @@
 import React, { forwardRef, RefObject, useEffect } from "react";
-import { BackHandler, Keyboard, View } from "react-native";
+import { BackHandler, Keyboard, StyleSheet, View } from "react-native";
 import {
   NativeViewGestureHandler,
   PanGestureHandler,
 } from "react-native-gesture-handler";
 import Animated, { useAnimatedScrollHandler } from "react-native-reanimated";
+import { createStyles } from "../../../theme/useStyles";
 
 interface Props {
   panRef: RefObject<PanGestureHandler>;
@@ -15,6 +16,8 @@ interface Props {
 
 const BottomSheetContent = forwardRef(
   ({ scrollOffset, Component, onClose }: Props, ref) => {
+    const styles = useStyles();
+
     const scrollHandler = useAnimatedScrollHandler((e) => {
       scrollOffset.value = e.contentOffset.y;
     });
@@ -45,24 +48,8 @@ const BottomSheetContent = forwardRef(
             keyboardShouldPersistTaps="handled"
           >
             {/* TODO THEMING!! */}
-            <View
-              style={{
-                backgroundColor: "white",
-                borderTopRightRadius: 25,
-                borderTopLeftRadius: 25,
-              }}
-            >
-              <View
-                style={{
-                  height: 6,
-                  width: 72,
-                  borderColor: "gray",
-                  borderWidth: 3,
-                  borderRadius: 99,
-                  alignSelf: "center",
-                  marginVertical: 8,
-                }}
-              />
+            <View style={styles.top}>
+              <View style={styles.thingy} />
             </View>
             <Component />
           </Animated.ScrollView>
@@ -74,3 +61,22 @@ const BottomSheetContent = forwardRef(
   }
 );
 export default BottomSheetContent;
+
+const useStyles = createStyles((theme) =>
+  StyleSheet.create({
+    top: {
+      backgroundColor: theme.colors.darkBlue,
+      borderTopRightRadius: 25,
+      borderTopLeftRadius: 25,
+    },
+    thingy: {
+      height: 6,
+      width: 72,
+      borderColor: "gray",
+      borderWidth: 3,
+      borderRadius: 99,
+      alignSelf: "center",
+      marginVertical: 8,
+    },
+  })
+);