fix: added some styling to the mic and camera permissions page in the…

… object detection app (#78) * docs: updated installation instructions and began organizing the headers for the doc site * fix: resolved broken link issue and fixed the nav bar * fix: changed formatting in the operating systems section on the dicsite * docs: create a trouble shooting section for the docsite and added long paths as the first page * docs: created a trouble shooting section for the docsite and added long paths as the first page * fix: added some styling to the mic and camera permissions page in the object detection app
cdiddy77 · May 9, 2024 · c83d175 · c83d175
1 parent f8d3491
commit c83d175
Showing 1 changed file with 35 additions and 10 deletions.
diff --git a/examples/objectdetection/src/CameraStream.tsx b/examples/objectdetection/src/CameraStream.tsx
@@ -133,11 +133,16 @@ const NeedPermissions: React.FC<{ askForPermissions: () => void }> = ({
 }) => {
   return (
     <View style={styles.container}>
-      <Text style={styles.noPermsText}>
-        Camera and Mic permissions required
-      </Text>
+      <View style={styles.permissionsBox}>
+        <Text style={styles.noPermsText}>
+          Allow App to use your Camera and Microphone
+        </Text>
+        <Text style={styles.permsInfoText}>
+          App needs access to your camera in order for Object Detection to work.
+        </Text>
+      </View>
       <Pressable style={styles.permsButton} onPress={askForPermissions}>
-        <Text>Request</Text>
+      <Text style={styles.permsButtonText}>Allow</Text>
       </Pressable>
     </View>
   );
@@ -190,7 +195,7 @@ const ObjectFrame: React.FC<{ frame: Detection; index: number }> = ({
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "red",
+    backgroundColor: "#FFF0F0",
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
@@ -204,20 +209,40 @@ const styles = StyleSheet.create({
     height: "100%",
   },
   permsButton: {
-    padding: 10,
-    backgroundColor: "lightblue",
+    padding: 15.5,
+    paddingRight: 25,
+    paddingLeft: 25,
+    backgroundColor: "#F95F48",
     borderRadius: 5,
-    margin: 10,
+    margin: 15,
+  },
+  permsButtonText: {
+    fontSize: 17,
+    color: "black",
+    fontWeight: "bold",
+  },
+  permissionsBox: { 
+    backgroundColor: "#F3F3F3",
+    padding: 20,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#CCCACA",
+    marginBottom: 20,
   },
   noPermsText: {
     fontSize: 20,
     fontWeight: "bold",
-    color: "red",
+    color: "black",
+  },
+  permsInfoText: {
+    fontSize: 15,
+    color: "black",
+    marginTop: 12,
   },
   cameraSwitchButton: {
     position: "absolute",
     padding: 10,
-    backgroundColor: "blue",
+    backgroundColor: "#F95F48",
     borderRadius: 20,
     top: 20,
     right: 20,