Show Focus square on cameras that do not focus; plus style changes (#1117)

* Show the focus square at the tapped coordinates even if we do not actually set the focus

* Add new tailwind color

* Add new border radius value

* Restyle focus square according to current designs

src/components/Camera/CameraView.js

@@ -61,13 +61,14 @@ const CameraView = ( {
   const { deviceOrientation } = useDeviceOrientation();
 
   const singleTapToFocus = async ( { x, y } ) => {
-    // If the device doesn't support focus, we don't want to do anything and show no animation
+    // Show the focus square at the tapped coordinates even if we do not actually set the focus
+    singleTapToFocusAnimation.setValue( 1 );
+    setTappedCoordinates( { x, y } );
+    // If the device doesn't support focus, we don't want the camera to focus
     if ( !device.supportsFocus && focusAvailable ) {
       return;
     }
     try {
-      singleTapToFocusAnimation.setValue( 1 );
-      setTappedCoordinates( { x, y } );
       await cameraRef.current.focus( { x, y } );
     } catch ( e ) {
       // Android often catches the following error from the Camera X library

src/components/Camera/FocusSquare.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React, { useEffect } from "react";
 import { Animated } from "react-native";
@@ -30,14 +31,19 @@ const FocusSquare = ( { tappedCoordinates, singleTapToFocusAnimation }: Props ):
   return (
     // $FlowIgnore
     <Animated.View
-      className="w-16 h-16 absolute border border-white rounded-lg"
+      className="w-[66px] h-[66px] absolute border-2 border-yellow rounded-xs"
       style={[{
         left: tappedCoordinates.x - HALF_SIZE_FOCUS_BOX,
         top: tappedCoordinates.y - HALF_SIZE_FOCUS_BOX,
         opacity: singleTapToFocusAnimation
       }
       ]}
-    />
+    >
+      <View className="absolute left-0 top-[30px] w-[5px] h-[2px] bg-yellow" />
+      <View className="absolute left-[30px] top-0 w-[2px] h-[5px] bg-yellow" />
+      <View className="absolute right-0 top-[30px] w-[5px] h-[2px] bg-yellow" />
+      <View className="absolute left-[30px] bottom-0 w-[2px] h-[5px] bg-yellow" />
+    </Animated.View>
   );
 };
 

tailwind.config.js

@@ -86,6 +86,7 @@ module.exports = {
       borderRadius: {
         // tried using rem value here, but it wouldn't load on iOS or Android
         DEFAULT: "7px",
+        xs: "1px",
         sm: "4px",
         md: "9px",
         lg: "8px",
@@ -106,12 +107,12 @@ module.exports = {
       warningRedDisabled: "#b06365",
       warningYellow: "#E6A939",
       white: "#ffffff",
+      yellow: "#FFD600",
 
       // Mostly for debugging
       red: "#FF0000",
       green: "#00FF00",
-      blue: "#0000FF",
-      yellow: "#FFFF00"
+      blue: "#0000FF"
     },
     screens: {
       sm: "240px",