fixed darkmode issues on login and home

components/common/searchBar/SearchBar.tsx

@@ -10,7 +10,8 @@ export default function SearchBar(props: SearchBarProps) {
   const [isActive, setIsactive] = React.useState(false);
 
   const textColor = useThemeColor("interactiveText")
-  const backgroundColor = useThemeColor("containerColor");
+  const backgroundColor = useThemeColor("elementDefaultColor");
+
   const handleChange = (text:string) : void  =>  {
     if(text !== ""){
       if(!isActive){
@@ -23,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 &&
@@ -45,7 +53,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     height: 40,
-    backgroundColor: backgroundColor,
     borderRadius: 10,
     paddingHorizontal: 10
   },

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>