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

Base dark theme implementation

Browse Source
This commit is contained in:
Patrick Fic
2025-10-23 13:44:33 -07:00
parent b6271b8ef2
commit f170192008
22 changed files with 308 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
app/_layout.tsx
View File

@@ -2,6 +2,11 @@ import { checkUserSession } from "@/redux/user/user.actions";
import { selectBodyshop, selectCurrentUser } from "@/redux/user/user.selectors";
import { ApolloProvider } from "@apollo/client";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import {
DarkTheme,
DefaultTheme,
ThemeProvider,
} from "@react-navigation/native";
import { Stack } from "expo-router";
import {
Icon,
@@ -9,7 +14,7 @@ import {
NativeTabs,
VectorIcon,
} from "expo-router/unstable-native-tabs";
import { useEffect } from "react";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, Platform, View } from "react-native";
import { Provider as PaperProvider } from "react-native-paper";
@@ -17,45 +22,55 @@ import { connect, Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { createStructuredSelector } from "reselect";
import { client } from "../graphql/client";
import { useTheme as usePaperTheme } from "../hooks/useTheme";
import { persistor, store } from "../redux/store";
import "../translations/i18n";
import theme from "../util/theme";
function AuthenticatedLayout() {
const { t } = useTranslation();
const paperTheme = usePaperTheme();
return (
<NativeTabs minimizeBehavior="onScrollDown" disableTransparentOnScrollEdge>
<NativeTabs.Trigger name="jobs">
<Label>{t("joblist.labels.activejobs")}</Label>
<ThemeProvider
value={paperTheme.theme === "dark" ? DarkTheme : DefaultTheme}
>
<NativeTabs
minimizeBehavior="onScrollDown"
disableTransparentOnScrollEdge
>
<NativeTabs.Trigger name="jobs">
<Label>{t("joblist.labels.activejobs")}</Label>
{Platform.select({
ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
android: (
<Icon
src={<VectorIcon family={MaterialIcons} name="checklist" />}
/>
),
})}
</NativeTabs.Trigger>
<NativeTabs.Trigger name="settings">
{Platform.select({
ios: <Icon sf="gear" drawable="custom_android_drawable" />,
android: (
<Icon src={<VectorIcon family={MaterialIcons} name="settings" />} />
),
})}
<Label>{t("settings.titles.settings")}</Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="search" role="search">
{Platform.select({
//ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
android: (
<Icon src={<VectorIcon family={MaterialIcons} name="search" />} />
),
})}
<Label>Search</Label>
</NativeTabs.Trigger>
</NativeTabs>
{Platform.select({
ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
android: (
<Icon
src={<VectorIcon family={MaterialIcons} name="checklist" />}
/>
),
})}
</NativeTabs.Trigger>
<NativeTabs.Trigger name="settings">
{Platform.select({
ios: <Icon sf="gear" drawable="custom_android_drawable" />,
android: (
<Icon
src={<VectorIcon family={MaterialIcons} name="settings" />}
/>
),
})}
<Label>{t("settings.titles.settings")}</Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="search" role="search">
{Platform.select({
//ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
android: (
<Icon src={<VectorIcon family={MaterialIcons} name="search" />} />
),
})}
<Label>Search</Label>
</NativeTabs.Trigger>
</NativeTabs>
</ThemeProvider>
);
}
@@ -79,21 +94,38 @@ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
currentUser: selectCurrentUser,
});
const mapDispatchToProps = (dispatch) => ({
const mapDispatchToProps = (dispatch: any) => ({
checkUserSession: () => dispatch(checkUserSession()),
});
function AppContent({ currentUser, checkUserSession, bodyshop }) {
function AppContent({ currentUser, checkUserSession, bodyshop }: any) {
useEffect(() => {
checkUserSession();
}, []);
}, [checkUserSession]);
if (currentUser.authorized === null) {
return <LoadingLayout />;
return (
<ThemedLayout>
<LoadingLayout />
</ThemedLayout>
);
}
if (currentUser.authorized) {
return <AuthenticatedLayout />;
return (
<ThemedLayout>
<AuthenticatedLayout />
</ThemedLayout>
);
}
return <UnauthenticatedLayout />;
return (
<ThemedLayout>
<UnauthenticatedLayout />
</ThemedLayout>
);
}
function ThemedLayout({ children }: { children: React.ReactNode }) {
const themeToApply = usePaperTheme();
return <PaperProvider theme={themeToApply}>{children}</PaperProvider>;
}
const ConnectedAppContent = connect(
mapStateToProps,
@@ -105,9 +137,7 @@ export default function AppLayout() {
<Provider store={store}>
<PersistGate persistor={persistor}>
<ApolloProvider client={client}>
<PaperProvider theme={theme}>
<ConnectedAppContent />
</PaperProvider>
<ConnectedAppContent />
</ApolloProvider>
</PersistGate>
</Provider>

12
app/jobs/_layout.tsx
View File

@@ -1,8 +1,7 @@
import { Stack, useRouter } from "expo-router";
import { Stack } from "expo-router";
import { useTranslation } from "react-i18next";
function JobsStack() {
const router = useRouter();
const { t } = useTranslation();
return (
<Stack
@@ -17,15 +16,6 @@ function JobsStack() {
options={{
headerShown: false,
title: t("joblist.titles.jobtab"),
// headerSearchBarOptions: {
// placement: "automatic",
// placeholder: "Search",
// onChangeText: (event) => {
// router.setParams({
// search: event?.nativeEvent?.text,
// });
// },
// },
}}
/>
<Stack.Screen