admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme and UI updates

Browse Source
This commit is contained in:
Patrick Fic
2025-10-16 09:34:24 -07:00
parent 4c7ae9de79
commit 93a539bd6d
5 changed files with 79 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/_layout.tsx
View File

@@ -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}>

4
app/jobs/[jobId]/_layout.tsx
View File

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

5
components/job-tombstone/job-tombstone.jsx
View File

@@ -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();

47
components/jobs-list/job-list-item.jsx
View File

@@ -68,16 +68,31 @@ function JobListItemComponent({ openImagePicker, item }) {
},
]}
>
<View style={styles.headerRow}>
<View style={styles.leftHeader}>
<Text
numberOfLines={1}
style={[styles.roNumber, { color: theme.colors.primary }]}
>
{roNumber} • {ownerName}
{ownerName && company ? " • " : ""}
{company}
</Text>
<View style={styles.cardContents}>
<View style={{ flex: 1, display: "flex" }}>
<View style={styles.headerRow}>
<View style={styles.leftHeader}>
<Text
numberOfLines={1}
style={[styles.roNumber, { color: theme.colors.primary }]}
>
{roNumber} • {ownerName}
{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",

45
util/theme.js Normal file
View File

@@ -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)",
},
};