Refactor settings to use stack to allow dark theme. Move theme to app reducer to allow persistence.

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

@@ -107,7 +107,7 @@ function JobListItemComponent({ openImagePicker, item }) {
 
 const styles = StyleSheet.create({
   pressable: {
-    marginHorizontal: 12,
+    // marginHorizontal: 12,
     marginVertical: 6,
   },
   outerShadow: {

components/jobs-list/jobs-list.jsx

@@ -1,8 +1,8 @@
 import { useQuery } from "@apollo/client";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { FlatList, RefreshControl, Text, View } from "react-native";
-import { ActivityIndicator, Button } from "react-native-paper";
+import { FlatList, RefreshControl, View } from "react-native";
+import { ActivityIndicator, Button, Text } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -48,7 +48,13 @@ export function JobListComponent({ bodyshop }) {
   const jobs = data ? [...(data?.jobs || []), { id: "footer-spacer" }] : [];
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, marginHorizontal: 12 }}>
+      <Text
+        variant="headlineMedium"
+        style={{ marginBottom: 12, fontWeight: "600" }}
+      >
+        Jobs
+      </Text>
       <UploadProgress />
       <FlatList
         refreshControl={

components/theme-selector/theme-selector.tsx

@@ -1,5 +1,5 @@
-import { setTheme } from "@/redux/user/user.actions";
-import { selectTheme } from "@/redux/user/user.selectors";
+import { setTheme } from "@/redux/app/app.actions";
+import { selectTheme } from "@/redux/app/app.selectors";
 import React from "react";
 import { SegmentedButtons } from "react-native-paper";
 import { useDispatch, useSelector } from "react-redux";