Merge pull request #30 from wildlifeai/adding-color-scheme

Adding color scheme and app version and fixed the drawer problems

src/App.tsx

@@ -12,16 +12,16 @@ import { MainNavigation } from "./navigation"
 import { NavigationContainer } from "@react-navigation/native"
 import { ListenToBleEngineProvider } from "./providers/ListenToBleEngineProvider"
 import { PaperProvider } from "react-native-paper"
-import { CombinedDarkTheme } from "./theme"
+import { CombinedDefaultTheme } from "./theme"
 import { AuthProvider } from "./providers/AuthProvider"
 
 export const App = () => {
 	return (
 		<SafeAreaProvider>
 			<Suspense fallback={"Loading..."}>
 				<ReduxProvider store={store}>
-					<PaperProvider theme={CombinedDarkTheme}>
-						<NavigationContainer theme={CombinedDarkTheme}>
+					<PaperProvider theme={CombinedDefaultTheme}>
+						<NavigationContainer theme={CombinedDefaultTheme}>
 							<AndroidPermissionsProvider>
 								<AppSetupProvider>
 									<BleEngineProvider>

src/components/AppDrawer.tsx

@@ -5,11 +5,14 @@ import {
 	useContext,
 	useState,
 } from "react"
-import { StyleSheet } from "react-native"
+import { StyleSheet, View } from "react-native"
 import { Drawer } from "react-native-drawer-layout"
-import { Button, Surface } from "react-native-paper"
+import { Avatar, Button, Surface } from "react-native-paper"
 import { WWText } from "./ui/WWText"
 import { useExtendedTheme } from "../theme"
+import { useAuth } from "../providers/AuthProvider"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { getReadableVersion } from "react-native-device-info"
 
 type DrawerContextProps = {
 	isOpen: boolean
@@ -21,21 +24,38 @@ export const useAppDrawer = () => useContext(DrawerContext)
 
 export const AppDrawer = ({ children }: PropsWithChildren<unknown>) => {
 	const [isOpen, setIsOpen] = useState(false)
-	const { padding } = useExtendedTheme()
+	const { padding, spacing } = useExtendedTheme()
+	const { setIsLoggedIn, isLoggedIn } = useAuth()
+	const { top } = useSafeAreaInsets()
+
+	const onLogout = () => {
+		setIsLoggedIn(false)
+		setIsOpen(false)
+	}
 
 	return (
 		<Drawer
-			style={styles.view}
+			swipeEnabled={isLoggedIn}
 			open={isOpen}
 			onOpen={() => setIsOpen(true)}
 			onClose={() => setIsOpen(false)}
+			drawerStyle={styles.view}
 			renderDrawerContent={() => {
 				return (
-					<Surface style={[{ padding }, styles.view]}>
+					<Surface
+						style={[{ padding, paddingTop: padding + top }, styles.view]}
+					>
+						<Avatar.Image source={require("../assets/avatar.png")} />
 						<WWText variant="bodyLarge">I'm empty at the moment.</WWText>
-						<Button onPress={() => setIsOpen((prevOpen) => !prevOpen)}>{`${
-							isOpen ? "Close" : "Open"
-						} drawer`}</Button>
+						<Button icon="logout" onPress={onLogout}>
+							Logout
+						</Button>
+						<View style={styles.version}>
+							<WWText>Current version:</WWText>
+							<WWText style={[styles.versionText, { marginStart: spacing }]}>
+								v{getReadableVersion()}
+							</WWText>
+						</View>
 					</Surface>
 				)
 			}}
@@ -50,5 +70,17 @@ export const AppDrawer = ({ children }: PropsWithChildren<unknown>) => {
 const styles = StyleSheet.create({
 	view: {
 		flex: 1,
+		height: "auto",
+	},
+	test: {
+		height: 500,
+	},
+	version: {
+		flex: 1,
+		flexDirection: "row",
+		alignItems: "flex-end",
+	},
+	versionText: {
+		fontWeight: "bold",
 	},
 })

src/components/NavigationBar.tsx

@@ -1,8 +1,9 @@
 import { NativeStackHeaderProps } from "@react-navigation/native-stack"
-import { Appbar } from "react-native-paper"
+import { Appbar, Avatar } from "react-native-paper"
 import { getHeaderTitle } from "@react-navigation/elements"
-import { useAuth } from "../providers/AuthProvider"
 import { useAppDrawer } from "./AppDrawer"
+import { useExtendedTheme } from "../theme"
+import { StyleSheet } from "react-native"
 
 export const NavigationBar = ({
 	navigation,
@@ -11,23 +12,39 @@ export const NavigationBar = ({
 	back,
 }: NativeStackHeaderProps) => {
 	const title = getHeaderTitle(options, route.name)
-	const { setIsLoggedIn } = useAuth()
 	const { isOpen, setIsOpen } = useAppDrawer()
+	const {
+		colors: { onBackground },
+	} = useExtendedTheme()
 
 	return (
 		<Appbar.Header mode="center-aligned">
 			{back ? (
-				<Appbar.BackAction onPress={navigation.goBack} />
+				<Appbar.BackAction
+					iconColor={onBackground}
+					onPress={navigation.goBack}
+				/>
 			) : (
 				<Appbar.Action
+					iconColor={onBackground}
 					icon={isOpen ? "backburger" : "forwardburger"}
-					onPress={() => setIsOpen((prevState) => !prevState)}
+					onPress={() => setIsOpen(isOpen ? false : true)}
 				/>
 			)}
 			{title && <Appbar.Content title={title} />}
-			{setIsLoggedIn && (
-				<Appbar.Action icon="logout" onPress={() => setIsLoggedIn(false)} />
+			{!isOpen && (
+				<Avatar.Image
+					style={styles.avatar}
+					size={40}
+					source={require("../assets/avatar.png")}
+				/>
 			)}
 		</Appbar.Header>
 	)
 }
+
+const styles = StyleSheet.create({
+	avatar: {
+		marginEnd: 6,
+	},
+})

src/theme.ts

@@ -19,17 +19,77 @@ const { LightTheme, DarkTheme } = adaptNavigationTheme({
 const extendThemes = (theme: MD3Theme) => {
 	return {
 		...theme,
+		colors: {
+			...theme.colors,
+			primary: "#4caf50",
+			secondary: "#fed54e",
+			tertiary: "#ffffff",
+		},
 		padding: 20,
 		roundness: 10,
 		spacing: 10,
 	}
 }
 
 export const CombinedDefaultTheme = merge(
-	extendThemes(MD3LightTheme),
 	LightTheme,
+	extendThemes({
+		...MD3LightTheme,
+		colors: {
+			...MD3LightTheme.colors,
+			primary: "rgb(76, 175, 80)",
+			onPrimary: "rgb(255, 255, 255)",
+			primaryContainer: "rgb(240, 219, 255)",
+			onPrimaryContainer: "rgb(44, 0, 81)",
+			secondary: "rgb(254, 213, 78)",
+			onSecondary: "rgb(255, 255, 255)",
+			secondaryContainer: "rgb(237, 221, 246)",
+			onSecondaryContainer: "rgb(33, 24, 42)",
+			tertiary: "rgb(255, 255, 255)",
+			onTertiary: "rgb(255, 255, 255)",
+			tertiaryContainer: "rgb(255, 217, 221)",
+			onTertiaryContainer: "rgb(50, 16, 23)",
+			error: "rgb(186, 26, 26)",
+			onError: "rgb(255, 255, 255)",
+			errorContainer: "rgb(255, 218, 214)",
+			onErrorContainer: "rgb(65, 0, 2)",
+			background: "rgb(38, 38, 43)",
+			onBackground: "rgb(255, 255, 255)",
+			surface: "rgb(38, 38, 43)",
+			onSurface: "rgb(255, 255, 255)",
+			surfaceVariant: "rgb(233, 223, 235)",
+			onSurfaceVariant: "rgb(74, 69, 78)",
+			outline: "rgb(124, 117, 126)",
+			outlineVariant: "rgb(204, 196, 206)",
+			shadow: "rgb(0, 0, 0)",
+			scrim: "rgb(0, 0, 0)",
+			inverseSurface: "rgb(50, 47, 51)",
+			inverseOnSurface: "rgb(245, 239, 244)",
+			inversePrimary: "rgb(220, 184, 255)",
+			elevation: {
+				level0: "rgb(38, 38, 43)",
+				level1: "rgb(38, 38, 43)",
+				level2: "rgb(38, 38, 43)",
+				level3: "rgb(38, 38, 43)",
+				level4: "rgb(38, 38, 43)",
+				level5: "rgb(38, 38, 43)",
+			},
+			surfaceDisabled: "rgba(29, 27, 30, 0.12)",
+			onSurfaceDisabled: "rgba(29, 27, 30, 0.38)",
+			backdrop: "rgba(51, 47, 55, 0.4)",
+		},
+	}),
+)
+
+export const CombinedDarkTheme = merge(
+	extendThemes({
+		...MD3DarkTheme,
+		colors: {
+			...MD3DarkTheme.colors,
+		},
+	}),
+	DarkTheme,
 )
-export const CombinedDarkTheme = merge(extendThemes(MD3DarkTheme), DarkTheme)
 
 export const useExtendedTheme = () =>
 	useTheme<typeof CombinedDarkTheme | typeof CombinedDefaultTheme>()