From 04e73d2edb00c6fd68c88af8ed76509e627a2074 Mon Sep 17 00:00:00 2001
From: Thomas Schleicher <thscleicher@edu.aau.at>
Date: Thu, 30 Nov 2023 13:59:43 +0100
Subject: [PATCH] test commit

---
 app/_layout.tsx                  | 28 ++++++++++++++++---
 app/index.tsx                    | 20 ++++++++------
 components/themed-components.tsx | 47 ++++++++++++++++++++++++++++++++
 constants/colors.ts              | 18 ++++++++++++
 4 files changed, 100 insertions(+), 13 deletions(-)
 create mode 100644 components/themed-components.tsx
 create mode 100644 constants/colors.ts

diff --git a/app/_layout.tsx b/app/_layout.tsx
index 499dc8f..7db6355 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,12 +1,32 @@
 import { Tabs } from 'expo-router/tabs';
 import {HeaderTitle} from "@react-navigation/elements";
 
+import { FontAwesome } from "@expo/vector-icons";
+
 export default function Layout() {
     return (
-        <Tabs>
-            <Tabs.Screen name="budget" options={{tabBarShowLabel: false}}/>
-            <Tabs.Screen name="index" />
-            <Tabs.Screen name="stats" />
+        <Tabs initialRouteName={"index"}>
+            <Tabs.Screen name="budget" options={
+                {
+                    tabBarLabel: "Budget",
+                    tabBarIcon: ({ color, size }) => (
+                        <FontAwesome name="money" size={size} color={color}/>),
+                }
+            }/>
+            <Tabs.Screen name="index" options={
+                {
+                    tabBarLabel: "Home",
+                    tabBarIcon: ({ color, size }) => (
+                        <FontAwesome name="home" size={size} color={color}/>),
+                }
+            }/>
+            <Tabs.Screen name="stats" options={
+                {
+                    tabBarLabel: "Stats",
+                    tabBarIcon: ({ color, size }) => (
+                        <FontAwesome name="bar-chart" size={size} color={color}/>),
+                }
+            }/>
         </Tabs>
         );
 }
diff --git a/app/index.tsx b/app/index.tsx
index 9c91d65..bcf5158 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,19 +1,21 @@
-import { Text, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { View, Text } from "../components/themed-components";
 
 export default function Page() {
     return (
-        <Text style={styles.lightThemeText}>Home Page</Text>
-    
-        
-    
+        <View>
+            <Text>Home</Text>
+        </View>
         );
 }
 
 const styles = StyleSheet.create({
-    lightThemeText: {
-        color: "#242c40"
+    container: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
     },
-    darkThemeText: {
-        color: "#d0d0c0"
+    text: {
+        color: "#ffffff",
     }
 });
\ No newline at end of file
diff --git a/components/themed-components.tsx b/components/themed-components.tsx
new file mode 100644
index 0000000..fd6b6aa
--- /dev/null
+++ b/components/themed-components.tsx
@@ -0,0 +1,47 @@
+import { Text as DefaultText, View as DefaultView, useColorScheme} from "react-native";
+import colors from "../constants/colors";
+
+type ThemeProperties = {
+    lightColor?: string;
+    darkColor?: string;
+};
+
+/**
+ * It is a TypeScript intersection type encompassing both ThemeProperties and DefaultReactComponent properties.
+ */
+export type TextProperties = ThemeProperties & DefaultText["props"];
+export type ViewProperties = ThemeProperties & DefaultView["props"];
+
+
+/**
+ * This function 'useThemeColor' allows you to apply different colors for light and dark theme mode in a React Native application.
+ * The function takes a 'properties' object (with possible 'light' and 'dark' properties representing color strings) and 'colorName' - a key from predefined colors for both 'light' and 'dark' mode.
+ * The function first checks the current color scheme using the 'useColorScheme' hook from React Native, defaulting to 'light' mode if none is defined. 
+ * If no color is specified in 'properties' for current theme, the function falls back to returning a color corresponding to the provided 'colorName' from the predefined 'colors' object for the current theme.
+*/
+export function useThemeColor(
+    properties: {light?: string, dark?: string},
+    colorName: keyof typeof colors.light & keyof typeof colors.dark
+) {
+    const theme = useColorScheme() ?? "light";
+    const colorFromProps = properties[theme];
+    
+    if(colorFromProps) {
+        return colorFromProps;
+    }
+    return colors[theme][colorName];
+}
+
+export function Text(properties: TextProperties) {
+    const { style, lightColor, darkColor, ...otherProps } = properties;
+    const color = useThemeColor({ light: lightColor, dark: darkColor }, "color");
+    
+    return <DefaultText style={[{ color }, style]} {...otherProps} />
+}
+
+export function View(properties: TextProperties) {
+    const { style, lightColor, darkColor, ...otherProps } = properties;
+    const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, "backgroundColor");
+    
+    return <DefaultView style={[{backgroundColor}, style]} {...otherProps}/>
+}
\ No newline at end of file
diff --git a/constants/colors.ts b/constants/colors.ts
new file mode 100644
index 0000000..7a372c1
--- /dev/null
+++ b/constants/colors.ts
@@ -0,0 +1,18 @@
+export default {
+    light: {
+        tabIconDefault: "",
+        tabIconSelected: "",
+        color: "#15616d",
+        contrastColor: "",
+        accentColor: "",
+        backgroundColor: "#ffecd1",
+    },
+    dark: {
+        tabIconDefault: "",
+        tabIconSelected: "",
+        color: "#1B9AAA",
+        contrastColor: "",
+        accentColor: "",
+        backgroundColor: "#050505",
+    }
+}
\ No newline at end of file