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: {

components/job-tombstone/job-tombstone.jsx

@@ -10,7 +10,7 @@ import {
   Text,
   View,
 } from "react-native";
-import { ActivityIndicator, Card } from "react-native-paper";
+import { ActivityIndicator, Card, useTheme } from "react-native-paper";
 import DataLabelComponent from "../data-label/data-label";
 
 export default function JobTombstone() {
@@ -22,6 +22,9 @@ export default function JobTombstone() {
     skip: !jobId,
   });
 
+  const theme = useTheme();
+  console.log("*** ~ JobTombstone ~ theme:", theme.colors);
+
   const { t } = useTranslation();
   const onRefresh = async () => {
     return refetch();

components/jobs-list/job-list-item.jsx

@@ -68,16 +68,31 @@ function JobListItemComponent({ openImagePicker, item }) {
               },
             ]}
           >
-            <View style={styles.headerRow}>
+            <View style={styles.cardContents}>
-              <View style={styles.leftHeader}>
+              <View style={{ flex: 1, display: "flex" }}>
-                <Text
+                <View style={styles.headerRow}>
-                  numberOfLines={1}
+                  <View style={styles.leftHeader}>
-                  style={[styles.roNumber, { color: theme.colors.primary }]}
+                    <Text
-                >
+                      numberOfLines={1}
-                  {roNumber} • {ownerName}
+                      style={[styles.roNumber, { color: theme.colors.primary }]}
-                  {ownerName && company ? " • " : ""}
+                    >
-                  {company}
+                      {roNumber} • {ownerName}
-                </Text>
+                      {ownerName && company ? " • " : ""}
+                      {company}
+                    </Text>
+                  </View>
+                </View>
+                <View style={styles.body}>
+                  {!!vehicle && (
+                    <Text
+                      variant="bodyMedium"
+                      numberOfLines={1}
+                      style={{ marginTop: 4 }}
+                    >
+                      {vehicle}
+                    </Text>
+                  )}
+                </View>
               </View>
               <IconButton
                 onPress={handleUpload}
@@ -88,17 +103,6 @@ function JobListItemComponent({ openImagePicker, item }) {
                 style={styles.uploadButton}
               />
             </View>
-            <View style={styles.body}>
-              {!!vehicle && (
-                <Text
-                  variant="bodyMedium"
-                  numberOfLines={1}
-                  style={{ marginTop: 4 }}
-                >
-                  {vehicle}
-                </Text>
-              )}
-            </View>
           </View>
         </BlurView>
       </View>
@@ -129,6 +133,7 @@ const styles = StyleSheet.create({
     borderWidth: StyleSheet.hairlineWidth,
     backdropFilter: "blur(20px)", // web only
   },
+  cardContents: { flex: 1, flexDirection: "row", display: "flex" },
   headerRow: {
     flexDirection: "row",
     alignItems: "flex-start",

util/theme.js

@@ -0,0 +1,45 @@
+export default //Custom values were used as the overrides did not work.
+    {
+        colors: {
+            primary: "#1890ff",
+            onPrimary: "#ffffff",
+            primaryContainer: "#e1e1e1ff",
+            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: "#f1f1f1ff",
+                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)",
+        },
+    };