fix: added consistent color theme to the permissions page to match ou…

…r logo (#89) * 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 * fix: added consistent color theme to the permissions page to match our logo * fix: added consistent color theme to the permissio ns page to match our logo --------- Co-authored-by: Charles P <[email protected]>
cdiddy77 · May 24, 2024 · e7ed1a1 · e7ed1a1
1 parent 18285e0
commit e7ed1a1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/examples/objectdetection/src/App.tsx b/examples/objectdetection/src/App.tsx
@@ -9,6 +9,7 @@ import Ionicons from "react-native-vector-icons/Ionicons";
 import type { AppSettings } from "./app-settings";
 import { Delegate } from "react-native-mediapipe";
 import { SettingsContext } from "./app-settings";
+import { CustomColors } from "./colors";
 
 const Tab = createBottomTabNavigator<RootTabParamList>();
 
@@ -56,8 +57,8 @@ function App() {
             tabBarIcon: ({ focused, color, size }) => {
               return RenderTabBarIcon({ focused, color, size, route });
             },
-            tabBarActiveTintColor: "tomato",
-            tabBarInactiveTintColor: "gray",
+            tabBarActiveTintColor: CustomColors.elecBlue,
+            tabBarInactiveTintColor: CustomColors.teal,
           })}
         >
           <Tab.Screen

diff --git a/examples/objectdetection/src/CameraStream.tsx b/examples/objectdetection/src/CameraStream.tsx
@@ -16,6 +16,7 @@ import {
 import type { RootTabParamList } from "./navigation";
 import type { BottomTabScreenProps } from "@react-navigation/bottom-tabs";
 import { useSettings } from "./app-settings";
+import { CustomColors } from "./colors";
 import Ionicons from "react-native-vector-icons/Ionicons";
 
 import {
@@ -134,7 +135,7 @@ const NeedPermissions: React.FC<{ askForPermissions: () => void }> = ({
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "#FFF0F0",
+    backgroundColor: "#EAF5F9",
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
@@ -151,7 +152,7 @@ const styles = StyleSheet.create({
     padding: 15.5,
     paddingRight: 25,
     paddingLeft: 25,
-    backgroundColor: "#F95F48",
+    backgroundColor: CustomColors.elecBlue,
     borderRadius: 5,
     margin: 15,
   },
@@ -161,11 +162,11 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
   },
   permissionsBox: {
-    backgroundColor: "#F3F3F3",
+    backgroundColor: CustomColors.lightGray,
     padding: 20,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: "#CCCACA",
+    borderColor: CustomColors.teal,
     marginBottom: 20,
   },
   noPermsText: {

diff --git a/examples/objectdetection/src/colors.ts b/examples/objectdetection/src/colors.ts
@@ -0,0 +1,7 @@
+export const CustomColors = {
+    teal: "#2C8395",
+    elecBlue: "#5FCCF5",
+    backgroundGrayBlue: "#EAF5F9",
+    deepSkyBlue: "#00BFFF",
+    lightGray: "#F3F3F3",
+  };