ui fix

src/screens/LoginScreen.tsx

@@ -1,3 +1,5 @@
+// src/screens/LoginScreen.tsx
+
 import React, { useState, useRef, useEffect } from "react";
 import {
   View,
@@ -5,7 +7,6 @@ import {
   TextInput,
   StyleSheet,
   TouchableOpacity,
-  Alert,
   KeyboardAvoidingView,
   Platform,
   Animated,
@@ -17,175 +18,268 @@ import axios from "axios";
 import { useNavigation } from "@react-navigation/native";
 import type { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../navigation/AppNavigator";
-import { CustomButton, CustomInput } from "../components/common/Custom";
-import colors from "../components/colors";
-
-const theme = {
-  primary: "#111111",
-  accent: colors.primary,
-  background: "#F9F9F9",
-  surface: "#FFFFFF",
-  text: "#1A1A1A",
-  subText: "#6B6B6B",
-  outline: "#E5E5E5",
-  error: "#E53935",
-  success: "#2E7D32",
-};
+import LinearGradient from "react-native-linear-gradient";
+import Ionicons from '@react-native-vector-icons/ionicons';
+import CustomAlert from "../components/CostomAlart";
+import colors from "../components/colors"; // Centralized colors from your file
 
 export default function LoginScreen() {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const [mobile, setMobile] = useState("");
   const [loading, setLoading] = useState(false);
 
-  // animations
+  const [alertInfo, setAlertInfo] = useState({
+    visible: false,
+    title: "",
+    message: "",
+    buttons: [] as { text: string; onPress: () => void; style?: "cancel" | "destructive" | "default" }[],
+    alertType: 'info' as 'info' | 'success' | 'error',
+  });
+
   const fade = useRef(new Animated.Value(0)).current;
-  const slide = useRef(new Animated.Value(24)).current;
+  const slide = useRef(new Animated.Value(30)).current;
   const ctaScale = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
     Animated.parallel([
-      Animated.timing(fade, { toValue: 1, duration: 600, useNativeDriver: true }),
-      Animated.timing(slide, { toValue: 0, duration: 600, useNativeDriver: true }),
+      Animated.timing(fade, { toValue: 1, duration: 800, useNativeDriver: true }),
+      Animated.spring(slide, { toValue: 0, friction: 5, tension: 40, useNativeDriver: true }),
     ]).start();
   }, []);
 
- const handleContinue = async () => {
-  if (mobile.length === 10) {
-    setLoading(true);
-    try {
-      const res = await axios.get(LOGIN_URL, {
-        params: { mobile },
-      });
+  const showAlert = (
+    title: string,
+    message: string,
+    buttons: { text: string; onPress: () => void; style?: "cancel" | "destructive" | "default" }[],
+    alertType: 'info' | 'success' | 'error' = 'info'
+  ) => {
+    setAlertInfo({ visible: true, title, message, buttons, alertType });
+  };
+  
+  const hideAlert = () => {
+    setAlertInfo({ ...alertInfo, visible: false });
+  };
 
-      console.log("OTP sent response:", res.data);
-
-      if (res.data.statusCode === 200) {
-        navigation.navigate("OtpVarify", { mobile });
-      } else {
-        Alert.alert("Error", res.data.message || "Failed to send OTP");
+  const handleContinue = async () => {
+    if (mobile.length === 10) {
+      setLoading(true);
+      try {
+        // FIX: Used the imported LOGIN_URL constant instead of a string literal
+        const res = await axios.get(LOGIN_URL, { params: { mobile } });
+        console.log("Login response:", res.data);
+        if (res.data.statusCode === 200) {
+          navigation.navigate("OtpVarify", { mobile });
+        } else {
+          showAlert(
+            "Login Failed",
+            res.data.message || "Could not send OTP.",
+            [{ text: "Try Again", onPress: hideAlert }],
+            'error'
+          );
+        }
+      } catch (error: any) {
+        console.error("Login error:", error);
+        showAlert(
+          "An Error Occurred",
+          "Failed to send OTP. Please check your connection and try again.",
+          [{ text: "OK", onPress: hideAlert }],
+          'error'
+        );
+      } finally {
+        setLoading(false);
       }
-    } catch (error: any) {
-      console.error("Login error:", error);
-
-      if (axios.isAxiosError(error)) {
-        console.log("Error message:", error.message);
-        console.log("Error response:", error.response?.data);
-        console.log("Error status:", error.response?.status);
-        console.log("Error headers:", error.response?.headers);
-      } else {
-        console.log("Unexpected error:", error);
-      }
-
-      Alert.alert("Error", "Failed to send OTP. Please try again.");
-    } finally {
-      setLoading(false);
+    } else {
+      showAlert(
+        "Invalid Number",
+        "Please enter a valid 10-digit mobile number.",
+        [{ text: "Got it", onPress: hideAlert }],
+        'info'
+      );
     }
-  } else {
-    Alert.alert("Please enter a valid 10-digit mobile number");
-  }
-};
+  };
 
-return (
-  <KeyboardAvoidingView
-    style={styles.container}
-    behavior={Platform.OS === "ios" ? "padding" : undefined}
-  >
-    <StatusBar barStyle="dark-content" backgroundColor={theme.background} />
-
-    {/* Top content */}
-    <View style={styles.topSection}>
-      <Text style={styles.brand}>CircleCollect</Text>
-      <Text style={styles.title}>Welcome Back 👋</Text>
-      <Text style={styles.subtitle}>
-        Enter your mobile number to sign in and continue.
-      </Text>
-
-      <Animated.View
-        style={[
-          styles.inputWrapper,
-          { opacity: fade, transform: [{ translateY: slide }] },
-        ]}
+  return (
+    <LinearGradient colors={[colors.pastelBlue, colors.pastelGreen, colors.pastelOrange]} style={styles.gradientContainer}>
+      <KeyboardAvoidingView
+        style={styles.container}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
       >
-        <CustomInput
-          label="Mobile Number"
-          placeholder="Enter Mobile Number"
-          value={mobile}
-          onChangeText={setMobile}
-          keyboardType="phone-pad"
-          maxLength={10}
-          icon="call-outline"
-        />
-      </Animated.View>
-    </View>
+        <StatusBar barStyle="dark-content" />
+        
+        <View style={[styles.shape, styles.shape1]} />
+        <View style={[styles.shape, styles.shape2]} />
+        <View style={[styles.shape, styles.shape3]} />
 
-    {/* Bottom Button */}
-    <Animated.View
-      style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
-    >
-      <CustomButton title={loading ? "Loading..." : "Continue"} onPress={handleContinue} icon="arrow-forward" />
+        <View style={styles.topSection}>
+          <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
+            <Text style={styles.brand}>CircleCollect</Text>
+            <Text style={styles.title}>Welcome!</Text>
+            <Text style={styles.subtitle}>
+              Glad to see you again. Let's get you signed in to your community.
+            </Text>
+          </Animated.View>
+        </View>
 
-      <Text style={styles.footerText}>
-        By continuing, you agree to our{" "}
-        <Text style={{ color: theme.accent, fontWeight: "600" }}>
-          Terms & Privacy
-        </Text>
-      </Text>
-    </Animated.View>
-  </KeyboardAvoidingView>
-);
+        <View style={styles.formSection}>
+          <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
+            <View style={styles.inputContainer}>
+              <Ionicons name="call-outline" size={22} color={colors.textLight} style={styles.inputIcon} />
+              <TextInput
+                style={styles.input}
+                placeholder="Enter your mobile number"
+                placeholderTextColor={colors.textLight}
+                value={mobile}
+                onChangeText={setMobile}
+                keyboardType="phone-pad"
+                maxLength={10}
+              />
+            </View>
+          </Animated.View>
+        </View>
+
+        <Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
+          <TouchableOpacity onPress={handleContinue} disabled={loading} activeOpacity={0.8} style={styles.button}>
+            {loading ? (
+              <ActivityIndicator color={colors.white} />
+            ) : (
+              <Text style={styles.buttonText}>Continue with Mobile</Text>
+            )}
+          </TouchableOpacity>
+          <Text style={styles.footerText}>
+            Your privacy is our priority. Your information is always secure.
+          </Text>
+        </Animated.View>
+
+      </KeyboardAvoidingView>
+
+      <CustomAlert
+        visible={alertInfo.visible}
+        title={alertInfo.title}
+        message={alertInfo.message}
+        buttons={alertInfo.buttons}
+        alertType={alertInfo.alertType}
+      />
+    </LinearGradient>
+  );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: theme.background, padding: 20 },
-  topSection: { flex: 1, justifyContent: "center" },
+  gradientContainer: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    padding: 24,
+    justifyContent: "space-between",
+  },
+  shape: {
+    position: 'absolute',
+    borderRadius: 1000,
+    opacity: 0.6,
+  },
+  shape1: {
+    width: 400,
+    height: 400,
+    backgroundColor: colors.pastelPink,
+    top: -150,
+    left: -100,
+  },
+  shape2: {
+    width: 300,
+    height: 300,
+    backgroundColor: colors.pastelBlue,
+    bottom: -100,
+    right: -120,
+  },
+  shape3: {
+    width: 200,
+    height: 200,
+    backgroundColor: colors.pastelGreen,
+    bottom: '40%',
+    left: -80,
+    opacity: 0.5
+  },
+  topSection: {
+    flex: 0.8,
+    justifyContent: "center",
+    alignItems: 'center'
+  },
+  formSection: {
+    flex: 1,
+    justifyContent: 'flex-start'
+  },
   brand: {
-    fontSize: 30,
-    fontWeight: "700",
-    color: theme.accent,
-    marginBottom: 24,
+    fontSize: 24,
+    fontWeight: "600",
+    color: colors.primary,
+    textAlign: "center",
+    letterSpacing: 1.5,
+    marginBottom: 16,
   },
   title: {
-    fontSize: 26,
-    fontWeight: "800",
-    color: theme.text,
-    marginBottom: 6,
+    fontSize: 38,
+    fontWeight: "bold",
+    color: colors.textDark,
+    textAlign: "center",
+    marginBottom: 12,
   },
   subtitle: {
-    fontSize: 15,
-    color: theme.subText,
-    marginBottom: 30,
-    lineHeight: 22,
+    fontSize: 16,
+    color: colors.textLight,
+    textAlign: "center",
+    lineHeight: 24,
+    maxWidth: 320,
   },
-  inputWrapper: { gap: 8 },
-  inputLabel: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: theme.text,
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: colors.white,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: colors.inputBorder,
+    paddingHorizontal: 16,
+    marginTop: 32,
+    shadowColor: colors.black,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 3,
+  },
+  inputIcon: {
+    marginRight: 12,
   },
   input: {
-    backgroundColor: theme.surface,
-    borderRadius: 14,
-    padding: 14,
+    flex: 1,
+    height: 58,
     fontSize: 16,
-    color: theme.text,
-    borderWidth: 1,
-    borderColor: theme.outline,
+    color: colors.textDark,
   },
   bottomSection: {
-    marginBottom: 30,
+    paddingBottom: Platform.OS === "ios" ? 20 : 10,
+    paddingHorizontal: 10
   },
   button: {
-    backgroundColor: theme.primary,
+    backgroundColor: colors.primary,
     paddingVertical: 18,
-    borderRadius: 14,
+    borderRadius: 30,
     alignItems: "center",
     justifyContent: "center",
+    flexDirection: "row",
+    shadowColor: colors.primary,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.3,
+    shadowRadius: 15,
+    elevation: 8,
+  },
+  buttonText: {
+    color: colors.white,
+    fontWeight: "700",
+    fontSize: 16,
   },
-  buttonText: { color: "#fff", fontWeight: "700", fontSize: 16 },
   footerText: {
     textAlign: "center",
-    color: theme.subText,
+    color: colors.textLight,
     fontSize: 12,
-    marginTop: 14,
+    marginTop: 20,
   },
 });