Theme and UI updates

app/_layout.tsx

@@ -13,6 +13,7 @@ import { createStructuredSelector } from "reselect";
 import { client } from "../graphql/client";
 import { persistor, store } from "../redux/store";
 import "../translations/i18n";
+import theme from "../util/theme";
 
 function AuthenticatedLayout() {
   const { t } = useTranslation();
@@ -74,53 +75,6 @@ const ConnectedAppContent = connect(
   mapDispatchToProps
 )(AppContent);
 
-//Custom values were used as the overrides did not work.
-const theme = {
-  colors: {
-    primary: "#005fae",
-    onPrimary: "#ffffff",
-    primaryContainer: "#d4e3ff",
-    onPrimaryContainer: "#001c3a",
-    secondary: "#545f71",
-    onSecondary: "#ffffff",
-    secondaryContainer: "#d8e3f8",
-    onSecondaryContainer: "#111c2b",
-    tertiary: "#00658d",
-    onTertiary: "#ffffff",
-    tertiaryContainer: "#c6e7ff",
-    onTertiaryContainer: "#001e2d",
-    error: "#ba1a1a",
-    onError: "#ffffff",
-    errorContainer: "#ffdad6",
-    onErrorContainer: "#410002",
-    background: "#fdfcff",
-    onBackground: "#1a1c1e",
-    surface: "#fdfcff",
-    onSurface: "#1a1c1e",
-    surfaceVariant: "#e0e2ec",
-    onSurfaceVariant: "#43474e",
-    outline: "#74777f",
-    outlineVariant: "#c3c6cf",
-    shadow: "#000000",
-    scrim: "#000000",
-    inverseSurface: "#2f3033",
-    inverseOnSurface: "#f1f0f4",
-    inversePrimary: "#a5c8ff",
-    elevation: {
-      level0: "transparent",
-      level1: "#f0f4fb",
-      level2: "#e9eff9",
-      level3: "#e1ebf6",
-      level4: "#dfe9f5",
-      level5: "#dae6f4",
-    },
-    surfaceDisabled: "rgba(26, 28, 30, 0.12)",
-    onSurfaceDisabled: "rgba(26, 28, 30, 0.38)",
-    backdrop: "rgba(45, 49, 56, 0.4)",
-  },
-};
-// ...existing code...
-
 export default function AppLayout() {
   return (
     <Provider store={store}>

app/jobs/[jobId]/_layout.tsx

@@ -1,14 +1,16 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { Tabs } from "expo-router";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "react-native-paper";
 
 function JobTabLayout(props) {
   const { t } = useTranslation();
 
+  const theme = useTheme();
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: "blue",
+        tabBarActiveTintColor: theme.colors.primary,
         tabBarPosition: "top",
         headerShown: false,
         tabBarStyle: {