remove gluestackk-ui

2025-11-19 14:23:17 +07:00
parent f3cf10e5e6
commit 742d8f6bcc
20 changed files with 1463 additions and 2624 deletions
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,7 +1,7 @@
 import {
  DarkTheme,
  DefaultTheme,
-  ThemeProvider as NavigationThemeProvider,
+  ThemeProvider,
 } from "@react-navigation/native";
 import { Stack, useRouter } from "expo-router";
 import { StatusBar } from "expo-status-bar";
@@ -9,65 +9,64 @@ import { useEffect } from "react";
 import "react-native-reanimated";
 // import Toast from "react-native-toast-message";

-import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider/gluestack-ui-provider";
+// import { toastConfig } from "@/config";
 import { toastConfig } from "@/config";
 import { setRouterInstance } from "@/config/auth";
 import "@/global.css";
-import { ThemeProvider, useThemeContext } from "@/hooks/use-theme-context";
 import { I18nProvider } from "@/hooks/use-i18n";
+import { ThemeProvider as AppThemeProvider } from "@/hooks/use-theme-context";
+import { useColorScheme } from "react-native";
 import Toast from "react-native-toast-message";
 import "../global.css";
 function AppContent() {
-  const { colorScheme } = useThemeContext();
+  // const { colorScheme } = useThemeContext();
  const router = useRouter();
+  const colorScheme = useColorScheme();
+  console.log("Color Scheme: ", colorScheme);

  useEffect(() => {
    setRouterInstance(router);
  }, [router]);

  return (
-    <GluestackUIProvider mode={colorScheme}>
-      <NavigationThemeProvider
-        value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
+    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+      <Stack
+        screenOptions={{ headerShown: false }}
+        initialRouteName="auth/login"
      >
-        <Stack
-          screenOptions={{ headerShown: false }}
-          initialRouteName="auth/login"
-        >
-          <Stack.Screen
-            name="auth/login"
-            options={{
-              title: "Login",
-              headerShown: false,
-            }}
-          />
+        <Stack.Screen
+          name="auth/login"
+          options={{
+            title: "Login",
+            headerShown: false,
+          }}
+        />

-          <Stack.Screen
-            name="(tabs)"
-            options={{
-              title: "Home",
-              headerShown: false,
-            }}
-          />
+        {/* <Stack.Screen
+          name="(tabs)"
+          options={{
+            title: "Home",
+            headerShown: false,
+          }}
+        />

-          <Stack.Screen
-            name="modal"
-            options={{ presentation: "formSheet", title: "Modal" }}
-          />
-        </Stack>
-        <StatusBar style="auto" />
-        <Toast config={toastConfig} visibilityTime={2000} topOffset={60} />
-      </NavigationThemeProvider>
-    </GluestackUIProvider>
+        <Stack.Screen
+          name="modal"
+          options={{ presentation: "formSheet", title: "Modal" }}
+        /> */}
+      </Stack>
+      <StatusBar style="auto" />
+      <Toast config={toastConfig} visibilityTime={2000} topOffset={60} />
+    </ThemeProvider>
  );
 }

 export default function RootLayout() {
  return (
    <I18nProvider>
-      <ThemeProvider>
+      <AppThemeProvider>
        <AppContent />
-      </ThemeProvider>
+      </AppThemeProvider>
    </I18nProvider>
  );
 }
--- a/app/auth/login.tsx
+++ b/app/auth/login.tsx
@@ -6,8 +6,13 @@ import { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
 import SliceSwitch from "@/components/ui/slice-switch";
 import { DOMAIN, TOKEN } from "@/constants";
+import { Colors } from "@/constants/theme";
 import { login } from "@/controller/AuthController";
 import { useI18n } from "@/hooks/use-i18n";
+import {
+  ColorScheme as ThemeColorScheme,
+  useTheme,
+} from "@/hooks/use-theme-context";
 import { showErrorToast, showWarningToast } from "@/services/toast_service";
 import {
  getStorageItem,
@@ -17,7 +22,7 @@ import {
 import { parseJwtToken } from "@/utils/token";
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { useRouter } from "expo-router";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
  ActivityIndicator,
  Image,
@@ -38,6 +43,13 @@ export default function LoginScreen() {
  const [showPassword, setShowPassword] = useState(false);
  const [isShowingQRScanner, setIsShowingQRScanner] = useState(false);
  const { t, setLocale, locale } = useI18n();
+  const { colors, colorScheme } = useTheme();
+  const styles = useMemo(
+    () => createStyles(colors, colorScheme),
+    [colors, colorScheme]
+  );
+  const placeholderColor = colors.textSecondary;
+  const buttonTextColor = colorScheme === "dark" ? colors.text : colors.surface;
  const [isVNLang, setIsVNLang] = useState(false);

  const checkLogin = useCallback(async () => {
@@ -154,7 +166,10 @@ export default function LoginScreen() {
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={{ flex: 1 }}
    >
-      <ScrollView contentContainerStyle={styles.scrollContainer}>
+      <ScrollView
+        style={{ flex: 1, backgroundColor: colors.background }}
+        contentContainerStyle={styles.scrollContainer}
+      >
        <ThemedView style={styles.container}>
          {/* Header */}
          <View style={styles.headerContainer}>
@@ -177,7 +192,7 @@ export default function LoginScreen() {
              <TextInput
                style={styles.input}
                placeholder={t("auth.username_placeholder")}
-                placeholderTextColor="#999"
+                placeholderTextColor={placeholderColor}
                value={username}
                onChangeText={setUsername}
                editable={!loading}
@@ -192,7 +207,7 @@ export default function LoginScreen() {
                <TextInput
                  style={styles.input}
                  placeholder={t("auth.password_placeholder")}
-                  placeholderTextColor="#999"
+                  placeholderTextColor={placeholderColor}
                  value={password}
                  onChangeText={setPassword}
                  secureTextEntry={!showPassword}
@@ -217,7 +232,7 @@ export default function LoginScreen() {
                  <Ionicons
                    name={showPassword ? "eye-off" : "eye"}
                    size={22}
-                    color="#666"
+                    color={colors.icon}
                  />
                </TouchableOpacity>
              </View>
@@ -241,9 +256,13 @@ export default function LoginScreen() {
                disabled={loading}
              >
                {loading ? (
-                  <ActivityIndicator color="#fff" size="small" />
+                  <ActivityIndicator color={buttonTextColor} size="small" />
                ) : (
-                  <Text style={styles.loginButtonText}>{t("auth.login")}</Text>
+                  <Text
+                    style={[styles.loginButtonText, { color: buttonTextColor }]}
+                  >
+                    {t("auth.login")}
+                  </Text>
                )}
              </TouchableOpacity>

@@ -252,10 +271,10 @@ export default function LoginScreen() {
                  flex: 1,
                  paddingVertical: 10,
                  marginTop: 0,
-                  borderColor: "#ddd",
+                  borderColor: colors.border,
                  borderWidth: 1,
                  borderRadius: 8,
-                  backgroundColor: "transparent",
+                  backgroundColor: colors.surface,
                  justifyContent: "center",
                  alignItems: "center",
                }}
@@ -265,7 +284,7 @@ export default function LoginScreen() {
                <MaterialIcons
                  name="qr-code-scanner"
                  size={28}
-                  color="#007AFF"
+                  color={colors.primary}
                />
              </TouchableOpacity>
            </View>
@@ -282,13 +301,17 @@ export default function LoginScreen() {
              <SliceSwitch
                size="sm"
                leftIcon="moon"
-                leftIconColor="white"
+                leftIconColor={
+                  colorScheme === "dark" ? colors.background : colors.surface
+                }
                rightIcon="sunny"
-                rightIconColor="orange"
-                activeBackgroundColor="black"
-                inactiveBackgroundColor="white"
-                inactiveOverlayColor="black"
-                activeOverlayColor="white"
+                rightIconColor={
+                  colorScheme === "dark" ? colors.warning : "orange"
+                }
+                activeBackgroundColor={colors.text}
+                inactiveBackgroundColor={colors.surface}
+                inactiveOverlayColor={colors.textSecondary}
+                activeOverlayColor={colors.background}
              />
            </View>

@@ -310,129 +333,130 @@ export default function LoginScreen() {
  );
 }

-const styles = StyleSheet.create({
-  scrollContainer: {
-    flexGrow: 1,
-    justifyContent: "center",
-  },
-  container: {
-    flex: 1,
-    paddingHorizontal: 20,
-    justifyContent: "center",
-  },
-  headerContainer: {
-    marginBottom: 40,
-    alignItems: "center",
-  },
-  logo: {
-    width: 120,
-    height: 120,
-    marginBottom: 20,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: "bold",
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 16,
-    opacity: 0.7,
-  },
-  formContainer: {
-    gap: 16,
-  },
-  inputGroup: {
-    gap: 8,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: "600",
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-    fontSize: 16,
-    backgroundColor: "#f5f5f5",
-    color: "#000",
-  },
-  loginButton: {
-    backgroundColor: "#007AFF",
-    paddingVertical: 14,
-    borderRadius: 8,
-    alignItems: "center",
-    marginTop: 16,
-  },
-  loginButtonDisabled: {
-    opacity: 0.6,
-  },
-  loginButtonText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  footerContainer: {
-    marginTop: 16,
-    alignItems: "center",
-  },
-  footerText: {
-    fontSize: 14,
-  },
-  linkText: {
-    color: "#007AFF",
-    fontWeight: "600",
-  },
-  copyrightContainer: {
-    marginTop: 20,
-    alignItems: "center",
-  },
-  copyrightText: {
-    fontSize: 12,
-    opacity: 0.6,
-    textAlign: "center",
-  },
-  languageSwitcherContainer: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-
-    alignItems: "center",
-    marginTop: 24,
-    gap: 20,
-  },
-  languageSwitcherLabel: {
-    fontSize: 12,
-    fontWeight: "600",
-    textAlign: "center",
-    opacity: 0.8,
-  },
-  languageButtonsContainer: {
-    flexDirection: "row",
-    gap: 10,
-  },
-  languageButton: {
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    alignItems: "center",
-    backgroundColor: "transparent",
-  },
-  languageButtonActive: {
-    backgroundColor: "#007AFF",
-    borderColor: "#007AFF",
-  },
-  languageButtonText: {
-    fontSize: 14,
-    fontWeight: "500",
-    color: "#666",
-  },
-  languageButtonTextActive: {
-    color: "#fff",
-    fontWeight: "600",
-  },
-});
+const createStyles = (colors: typeof Colors.light, scheme: ThemeColorScheme) =>
+  StyleSheet.create({
+    scrollContainer: {
+      flexGrow: 1,
+      justifyContent: "center",
+      backgroundColor: colors.background,
+    },
+    container: {
+      flex: 1,
+      paddingHorizontal: 20,
+      justifyContent: "center",
+    },
+    headerContainer: {
+      marginBottom: 40,
+      alignItems: "center",
+    },
+    logo: {
+      width: 120,
+      height: 120,
+      marginBottom: 20,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: "bold",
+      marginBottom: 8,
+    },
+    subtitle: {
+      fontSize: 16,
+      opacity: 0.7,
+    },
+    formContainer: {
+      gap: 16,
+    },
+    inputGroup: {
+      gap: 8,
+    },
+    label: {
+      fontSize: 14,
+      fontWeight: "600",
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+      fontSize: 16,
+      backgroundColor: colors.surface,
+      color: colors.text,
+    },
+    loginButton: {
+      backgroundColor: colors.primary,
+      paddingVertical: 14,
+      borderRadius: 8,
+      alignItems: "center",
+      marginTop: 16,
+    },
+    loginButtonDisabled: {
+      opacity: 0.6,
+    },
+    loginButtonText: {
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    footerContainer: {
+      marginTop: 16,
+      alignItems: "center",
+    },
+    footerText: {
+      fontSize: 14,
+    },
+    linkText: {
+      color: colors.primary,
+      fontWeight: "600",
+    },
+    copyrightContainer: {
+      marginTop: 20,
+      alignItems: "center",
+    },
+    copyrightText: {
+      fontSize: 12,
+      opacity: 0.6,
+      textAlign: "center",
+      color: colors.textSecondary,
+    },
+    languageSwitcherContainer: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+      marginTop: 24,
+      gap: 20,
+    },
+    languageSwitcherLabel: {
+      fontSize: 12,
+      fontWeight: "600",
+      textAlign: "center",
+      opacity: 0.8,
+    },
+    languageButtonsContainer: {
+      flexDirection: "row",
+      gap: 10,
+    },
+    languageButton: {
+      flex: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 12,
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 8,
+      alignItems: "center",
+      backgroundColor: colors.surface,
+    },
+    languageButtonActive: {
+      backgroundColor: colors.primary,
+      borderColor: colors.primary,
+    },
+    languageButtonText: {
+      fontSize: 14,
+      fontWeight: "500",
+      color: colors.textSecondary,
+    },
+    languageButtonTextActive: {
+      color: scheme === "dark" ? colors.text : colors.surface,
+      fontWeight: "600",
+    },
+  });