Merge branch '32-fix-welcome-component-colors' into 'main'

Resolve "fix welcome component colors"

Closes #32

See merge request thschleicher/interaktive-systeme!11

app/(tabs)/home/index.tsx

@@ -9,6 +9,7 @@ import { useRouter } from "expo-router"
 import { useAuth } from '../../contexts/AuthContext';
 
 export default function Page() {
+    const backgroundColor = useThemeColor("backgroundColor")
     const router = useRouter()
     const {onLogout} = useAuth();
     const [plusShow, setPlusShow] = useState(true);
@@ -53,7 +54,7 @@ export default function Page() {
 
 
     return (
-        <SafeAreaView style={{flex: 1}}>
+        <SafeAreaView style={{flex: 1, backgroundColor: backgroundColor}}>
            {plusShow && <Plus onPress={()=>{
                 router.push("/(tabs)/home/addItem")
            }}/>}

app/login.tsx

@@ -4,11 +4,17 @@ import { useAuth } from './contexts/AuthContext'
 import { Redirect } from 'expo-router';
 import { FontAwesome } from "@expo/vector-icons";
 import { Input } from '../components';
+import { useThemeColor } from '../hooks/hooks';
 
 export default function login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("")
-  const {authState, onLogin} = useAuth();
+  const {authState, onLogin} = useAuth()
+  const backgroundColor = useThemeColor("backgroundColor")
+  const textColor = useThemeColor("primaryText");
+  const elementDefaultColor = useThemeColor("elementDefaultColor")
+
+
   // const {authState, onLogin} = useAuth();
   // useEffect(() => {
   //   login()
@@ -22,24 +28,27 @@ export default function login() {
 
   return (
       
-      <SafeAreaView style={{flex: 1, justifyContent: "center"}}>
+      <SafeAreaView style={{flex: 1, justifyContent: "center", backgroundColor: backgroundColor}}>
         {authState?.authenticated && 
         <Redirect href={"/"}></Redirect>}
           <Input
-              placeholder={'Email'}
+              placeholder={'Enter Email'}
               label='Email or Username'
-              leftIcon={<FontAwesome name="user" size={20} />}
+            labelColor={textColor}
+              leftIcon={<FontAwesome name="user" size={20} color={textColor} />}
               onChangeHandler={setEmail}
+              bgColor ={elementDefaultColor}
           />
           <Input
               placeholder={'Enter Password'}
               label='Password'
-              leftIcon={<FontAwesome name="key" size={20} />}
-              rightIcon={<FontAwesome name="key" size={20} />}
+            labelColor={textColor}
+            leftIcon={<FontAwesome name="key" size={20} color={textColor}/>}
               onChangeHandler={setPassword}
+              bgColor ={elementDefaultColor}
               secure = {true}
           />
-          <Button title='login' onPress={login}></Button>
+          <Button title='Login' onPress={login}></Button>
       </SafeAreaView>
       
   );

components/common/searchBar/SearchBar.tsx

@@ -6,12 +6,12 @@ import { SIZES } from '../../../constants/theme';
 
 type SearchBarProps = {placeholder: string} & ViewProps
 
-
-
 export default function SearchBar(props: SearchBarProps) {
   const [isActive, setIsactive] = React.useState(false);
 
-  const backgroundColor = useThemeColor("backgroundColor");
+  const textColor = useThemeColor("interactiveText")
+  const backgroundColor = useThemeColor("elementDefaultColor");
+
   const handleChange = (text:string) : void  =>  {
     if(text !== ""){
       if(!isActive){
@@ -24,9 +24,16 @@ export default function SearchBar(props: SearchBarProps) {
     }
   }
 
-//TODO: Handle textCancel
+  // cant apply the background color otherwise
+  const containerStyle = {
+    ...styles.container,
+    backgroundColor: backgroundColor // apply dynamic background color
+  };
+
+  //TODO: Handle textCancel
+  // changed styles.container to containerStyle
   return (
-    <View style={styles.container}>
+    <View style={containerStyle}>
         <TextInput onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%"}, styles.TextInput]} autoCorrect={false} keyboardType='web-search' placeholder={props.placeholder}></TextInput>
       
         {isActive &&
@@ -46,7 +53,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     height: 40,
-    backgroundColor: "red", //tochange
     borderRadius: 10,
     paddingHorizontal: 10
   },

components/home/Welcome/Welcome.tsx

@@ -34,11 +34,13 @@ export default function Welcome(props: WelcomeProps) {
   const onpress = props.onPress
 
   const textcolor = useThemeColor("primaryText")
+  //const backgroundColor: string = useThemeColor("backgroundColor")
 
   return (
     <View style={{
       marginVertical: 20,
       marginHorizontal: MARGINS.normal,
+      //backgroundColor: backgroundColor,
     }}>
       <View style={{
         flexDirection: "row",

components/login/input.tsx

@@ -5,6 +5,7 @@ import { TextInputEndEditingEventData } from 'react-native/Libraries/Components/
 
 interface InputProps {
   label? : string,
+    labelColor?: string,
   outlined? : boolean,
   placeholder?: string, 
   leftIcon?: any, 
@@ -20,6 +21,7 @@ interface InputProps {
 
 function Input({
   label,
+    labelColor,
   outlined,
   placeholder,
   leftIcon,
@@ -32,13 +34,17 @@ function Input({
   errorColor,
   bgColor
 } : InputProps) {
+    const labelStyle = {
+        ...styles.label,
+        color: labelColor ? labelColor : 'black',
+    };
     const containerBorder = outlined ? styles.outlined : styles.standard
     if(numLines == undefined){
       numLines = 1
     }
     return (
         <View style={{padding:10}}>
-            <Text style={styles.label}>{label}</Text>
+            <Text style={labelStyle}>{label}</Text>
             <View 
                 style={[styles.container, containerBorder, {backgroundColor: bgColor ? bgColor : "white"}]}>
                     <View style={{paddingRight:10}}>{leftIcon}</View>
@@ -48,7 +54,7 @@ function Input({
                 }
                 onChangeText={onChangeHandler}
                 onEndEditing={validate}
-                multiline={numLines > 1 ? true : false}
+                multiline={numLines > 1}
                 numberOfLines={numLines}
                 style={{flex: 4}}
                 />

constants/colors.ts

@@ -1,32 +1,30 @@
 export default {
     light: {
         primaryText: "#000000",
-        secondaryText: "#404040",
-        interactiveText: "#0645AD",
+        secondaryText: "#9E9E9E",
+        interactiveText: "#388BFF",
 
+        tabIconDefault: "#FFFFFF",
+        tabIconSelected: "#EF6C00",
 
-
-        tabIconDefault: "gray",
-        tabIconSelected: "#ED7D31",
-        color: "#000000",
-        accentColor: "#ED7D31",
-        backgroundColor: "#ffffff",
-        tabBarColor: "gray",
+        backgroundColor: "#FFFFFF",
+        containerColor: "#F5F5F5",
+        elementDefaultColor: "#E0E0E0",
+        elementSelectedColor: "#9E9E9E",
+        accentColor: "#EF6C00",
     },
     dark: {
-        // Text
         primaryText: "#FFFFFF",
         secondaryText: "#B3B3B3",
-        interactiveText: "#0645AD",
+        interactiveText: "#388BFF",
 
-        // Tabs
         tabIconDefault: "#FFFFFF",
-        tabIconSelected: "#ED7D31",
+        tabIconSelected: "#EF6C00",
 
-        // 
-        color: "#FFFFFF",
-        accentColor: "#ED7D31",
-        backgroundColor: "#181818",
-        tabBarColor: "#121212",
+        backgroundColor: "#121212",
+        containerColor: "#181818",
+        elementDefaultColor: "#535353",
+        elementSelectedColor: "#B3B3B3",
+        accentColor: "#EF6C00",
     }
 }