From f62b49b5cf7d3b80b3901eefb54f44be39248214 Mon Sep 17 00:00:00 2001 From: Walcher Date: Fri, 8 Dec 2023 16:52:24 +0100 Subject: [PATCH 1/4] fixed and broke the theme again --- app/(tabs)/home/index.tsx | 3 +- app/login.tsx | 1 - components/common/searchBar/SearchBar.tsx | 7 ++--- components/home/Welcome/Welcome.tsx | 2 ++ constants/colors.ts | 34 +++++++++++------------ 5 files changed, 23 insertions(+), 24 deletions(-) diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx index cc0074e..a9484a8 100644 --- a/app/(tabs)/home/index.tsx +++ b/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 ( - + {plusShow && { router.push("/(tabs)/home/addItem") }}/>} diff --git a/app/login.tsx b/app/login.tsx index 501e82f..761e2c8 100644 --- a/app/login.tsx +++ b/app/login.tsx @@ -35,7 +35,6 @@ export default function login() { placeholder={'Enter Password'} label='Password' leftIcon={} - rightIcon={} onChangeHandler={setPassword} secure = {true} /> diff --git a/components/common/searchBar/SearchBar.tsx b/components/common/searchBar/SearchBar.tsx index fa2ca15..c39daad 100644 --- a/components/common/searchBar/SearchBar.tsx +++ b/components/common/searchBar/SearchBar.tsx @@ -6,12 +6,11 @@ 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("containerColor"); const handleChange = (text:string) : void => { if(text !== ""){ if(!isActive){ @@ -46,7 +45,7 @@ const styles = StyleSheet.create({ justifyContent: "center", alignItems: "center", height: 40, - backgroundColor: "red", //tochange + backgroundColor: backgroundColor, borderRadius: 10, paddingHorizontal: 10 }, diff --git a/components/home/Welcome/Welcome.tsx b/components/home/Welcome/Welcome.tsx index 757be58..5618e8d 100644 --- a/components/home/Welcome/Welcome.tsx +++ b/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 ( Date: Fri, 8 Dec 2023 17:19:30 +0100 Subject: [PATCH 2/4] fixed darkmode issues on login and home --- app/login.tsx | 20 +++++++++++++++----- components/common/searchBar/SearchBar.tsx | 15 +++++++++++---- components/login/input.tsx | 8 +++++++- 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/app/login.tsx b/app/login.tsx index 761e2c8..9bb5aff 100644 --- a/app/login.tsx +++ b/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,20 +28,24 @@ export default function login() { return ( - + {authState?.authenticated && } } + labelColor={textColor} + leftIcon={} onChangeHandler={setEmail} + bgColor ={elementDefaultColor} /> } + labelColor={textColor} + leftIcon={} onChangeHandler={setPassword} + bgColor ={elementDefaultColor} secure = {true} /> diff --git a/components/common/searchBar/SearchBar.tsx b/components/common/searchBar/SearchBar.tsx index c39daad..c9a0968 100644 --- a/components/common/searchBar/SearchBar.tsx +++ b/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 ( - + {isActive && @@ -45,7 +53,6 @@ const styles = StyleSheet.create({ justifyContent: "center", alignItems: "center", height: 40, - backgroundColor: backgroundColor, borderRadius: 10, paddingHorizontal: 10 }, diff --git a/components/login/input.tsx b/components/login/input.tsx index 6e6ec48..f131969 100644 --- a/components/login/input.tsx +++ b/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 ( - {label} + {label} {leftIcon} From b341ce5d695d862dfc18c57a2eff592f02c05ee2 Mon Sep 17 00:00:00 2001 From: Walcher Date: Fri, 8 Dec 2023 17:29:39 +0100 Subject: [PATCH 3/4] "optimization" --- components/login/input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/login/input.tsx b/components/login/input.tsx index f131969..75f2ea4 100644 --- a/components/login/input.tsx +++ b/components/login/input.tsx @@ -54,7 +54,7 @@ function Input({ } onChangeText={onChangeHandler} onEndEditing={validate} - multiline={numLines > 1 ? true : false} + multiline={numLines > 1} numberOfLines={numLines} style={{flex: 4}} /> From c8784bf8a1b90bb51875edd20e22ca7c01f4be9f Mon Sep 17 00:00:00 2001 From: Walcher Date: Fri, 8 Dec 2023 17:31:28 +0100 Subject: [PATCH 4/4] typo --- app/login.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/login.tsx b/app/login.tsx index 9bb5aff..1c04bd6 100644 --- a/app/login.tsx +++ b/app/login.tsx @@ -48,7 +48,7 @@ export default function login() { bgColor ={elementDefaultColor} secure = {true} /> - + );