theme

2025-12-10 10:15:38 +05:30
parent 3468de396c
commit bd7dbd864c
51 changed files with 1168 additions and 1132 deletions
@@ -19,17 +19,27 @@ import type { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '../navigation/AppNavigator';
 import LinearGradient from 'react-native-linear-gradient';
 import Ionicons from '@react-native-vector-icons/ionicons';
-import MaterialRipple from 'react-native-material-ripple'; 
+import MaterialRipple from 'react-native-material-ripple';
 import CustomAlert from '../components/CostomAlart';
 import colors from '../components/colors';
-import { responsiveFontSize } from 'react-native-responsive-dimensions';
+import {
+  responsiveHeight,
+  responsiveWidth,
+  responsiveFontSize
+} from "react-native-responsive-dimensions";
+import { useTheme } from '../theme/ThemeProvider';
+import FontsFamily from '../constents/FontsFamily';
+
+

 const { width } = Dimensions.get('window');
 const BLOCK_SIZE = width / 3;

+
 // Note: You will need to install react-native-material-ripple
 // npm install react-native-material-ripple

+
 export default function LoginScreen() {
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const [mobile, setMobile] = useState('');
@@ -42,9 +52,12 @@ export default function LoginScreen() {
    alertType: 'info' as 'info' | 'success' | 'error',
  });

+
  const fade = useRef(new Animated.Value(0)).current;
  const slide = useRef(new Animated.Value(30)).current;
  const ctaScale = useRef(new Animated.Value(1)).current;
+   const { theme } = useTheme();
+

  useEffect(() => {
    Animated.parallel([
@@ -53,6 +66,7 @@ export default function LoginScreen() {
    ]).start();
  }, []);

+
  const showAlert = (
    title: string,
    message: string,
@@ -62,10 +76,12 @@ export default function LoginScreen() {
    setAlertInfo({ visible: true, title, message, buttons, alertType });
  };

+
  const hideAlert = () => {
    setAlertInfo({ ...alertInfo, visible: false });
  };

+
  const handleContinue = async () => {
    if (mobile.length === 10) {
      setLoading(true);
@@ -87,58 +103,64 @@ export default function LoginScreen() {
    }
  };

+
  const colorsBlocks = [
-    colors.pastelPink,
-    colors.pastelBlue,
-    colors.pastelGreen,
-    colors.pastelOrange,
-    colors.pastelBlue,
-    colors.pastelPink,
-    colors.pastelGreen,
-    colors.pastelOrange,
-    colors.pastelPink,
+    theme.colors.logincard,
+    theme.colors.logincard1,
+    theme.colors.logincard1,
+    theme.colors.logincard,
+    theme.colors.logincard,
+    theme.colors.logincard1,
+    theme.colors.logincard1,
+     theme.colors.logincard,
+    theme.colors.logincard,
  ];

-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="dark-content" backgroundColor={colors.pastelOrange} />

-      {/* Funky grid blocks background (Unchanged) */}
-      <View style={styles.gridContainer}>
-        {colorsBlocks.map((bgColor, index) => (
-          <View
-            key={index}
-            style={[
-              styles.gridBlock,
-              { backgroundColor: bgColor },
-              index % 2 === 0 ? styles.elevatedBlock : {},
-            ]}
-          />
-        ))}
-      </View>
+  return (
+    <View style={[  styles.container, {backgroundColor: theme.colors.background }]}>
+      <StatusBar barStyle={theme.mode === "dark" ? "light-content" : "dark-content"} backgroundColor={colors.pastelOrange} />
+
+
+        {/* Funky grid blocks background (Unchanged) */}
+        <View style={styles.gridContainer}>
+          {colorsBlocks.map((bgColor, index) => (
+            <View
+              key={index}
+              style={[
+                styles.gridBlock,
+                { backgroundColor: bgColor ,borderRadius:16 },
+                index % 2 === 0 ? styles.elevatedBlock : {},
+              ]}
+            />
+         
+          ))}
+        </View>
+

      <KeyboardAvoidingView
        style={styles.keyboardAvoidingContainer}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <View style={styles.contentContainer}>
-          <View style={styles.topSection}>
+          <View style={[  styles.topSection, {marginTop:60}]}>
            <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
-              <Text style={styles.brand}>CircleCollect</Text>
-              <Text style={styles.title}>Welcome Back!</Text>
-              <Text style={styles.subtitle}>
+              <Text style={[styles.brand, { color: theme.colors.textPrimary }]}>CircleCollect</Text>
+              <Text style={[styles.title, { color: theme.colors.textPrimary }]}>Welcome Back!</Text>
+              <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
                Let's get you signed in to your community.
              </Text>
            </Animated.View>
          </View>

-          <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
-            <View style={styles.inputWrapper}>
-              <Ionicons name="call-outline" size={24} color={colors.textLight} style={styles.inputIcon} />
+
+          <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] ,marginTop: 150}}>
+            <View style={[styles.inputWrapper, { backgroundColor: theme.colors.reverseBackground }]}>
+              <Ionicons name="call-outline" size={24} color={theme.colors.reverseText} style={styles.inputIcon} />
              <TextInput
-                style={styles.input}
+                style={[  styles.input, { color: theme.colors.reverseText, fontFamily: FontsFamily.nunitoRegular }]}
                placeholder="Enter your mobile number"
-                placeholderTextColor={colors.textLight}
+                placeholderTextColor={theme.colors.reverseText}
                value={mobile}
                onChangeText={setMobile}
                keyboardType="phone-pad"
@@ -148,7 +170,8 @@ export default function LoginScreen() {
            </View>
          </Animated.View>

-          <Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}> 
+
+          <Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
            <MaterialRipple
              onPress={handleContinue}
              disabled={loading}
@@ -157,21 +180,16 @@ export default function LoginScreen() {
              rippleCentered
              rippleContainerBorderRadius={30}
            >
-              <LinearGradient
-                colors={[colors.pastelPink, colors.pastelOrange]}
-                style={styles.buttonGradient}
-                start={{x: 0, y: 0}}
-                end={{x: 1, y: 1}}
-              >
+              <View style={[styles.buttonGradient, { backgroundColor: theme.colors.reverseBackground }]} >
                {loading ? (
-                  <ActivityIndicator color={colors.white} />
+                  <ActivityIndicator color={theme.colors.reverseText} />
                ) : (
                  <View style={styles.buttonContent}>
-                    <Text style={styles.buttonText}>Continue</Text>
-                    <Ionicons name="arrow-forward-circle-outline" size={22} color={colors.white} style={{marginLeft: 8}} />
+                    <Text style={[styles.buttonText, { color: theme.colors.reverseText }]}>Continue</Text>
+                    <Ionicons name="arrow-forward-circle-outline" size={22} color={theme.colors.reverseText} style={{marginLeft: 8}} />
                  </View>
                )}
-              </LinearGradient>
+              </View>
            </MaterialRipple>
            <Text style={styles.footerText}>
              Your privacy is our priority. Your information is always secure.
@@ -180,6 +198,7 @@ export default function LoginScreen() {
        </View>
      </KeyboardAvoidingView>

+
      <CustomAlert
        visible={alertInfo.visible}
        title={alertInfo.title}
@@ -191,6 +210,7 @@ export default function LoginScreen() {
  );
 }

+
 const styles = StyleSheet.create({
  container: {
    flex: 1,
@@ -207,11 +227,11 @@ const styles = StyleSheet.create({
    borderRadius: 16,
  },
  elevatedBlock: {
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 5 },
-    shadowOpacity: 0.15,
-    shadowRadius: 10,
-    elevation: 7,
+    shadowColor: '#ffffffff',
+    shadowOffset: { width: 1, height: 5 },
+    shadowOpacity: 1,
+    shadowRadius: 15,
+    elevation: 10,
  },
  keyboardAvoidingContainer: {
    flex: 1,
@@ -227,8 +247,7 @@ const styles = StyleSheet.create({
    alignItems: 'center',
  },
  brand: {
-    fontSize: responsiveFontSize(2.8),
-    fontWeight: '700',
+    fontSize: responsiveFontSize(3),
    color: colors.primary,
    textAlign: 'center',
    letterSpacing: 2,
@@ -236,33 +255,29 @@ const styles = StyleSheet.create({
    textShadowColor: 'rgba(0, 0, 0, 0.1)',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 2,
+    fontFamily: FontsFamily.nunitoExtraBold,
  },
  title: {
-    fontSize: responsiveFontSize(4),
-    fontWeight: 'bold',
-    color: colors.textDark,
+    fontSize: responsiveFontSize(5),
+   fontFamily: FontsFamily.nunitoBold,
+      
    textAlign: 'center',
    marginBottom: 14,
  },
  subtitle: {
    fontSize: responsiveFontSize(1.6),
-    color: colors.textDark,
+   fontFamily: FontsFamily.nunitoRegular,
    textAlign: 'center',
+
    lineHeight: 26,
    maxWidth: 320,
  },
  inputWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
-    backgroundColor: 'rgba(255, 255, 255, 0.85)',
    borderRadius: 36,
    borderWidth: 2,
-    borderColor: colors.pastelPink,
-    paddingHorizontal: 20,
-    shadowColor: colors.primary,
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.2,
-    shadowRadius: 14,
+    paddingHorizontal: responsiveHeight(2),
    elevation: 8,
  },
  inputIcon: {
@@ -271,9 +286,9 @@ const styles = StyleSheet.create({
  input: {
    flex: 1,
    fontSize: responsiveFontSize(1.8),
-    fontWeight: '600',
+    fontFamily: FontsFamily.nunitoSemiBold,
    color: colors.textLight,
-    height: 58,
+    height: responsiveHeight(5),
  },
  bottomSection: {
    alignItems: 'center',
@@ -282,16 +297,13 @@ const styles = StyleSheet.create({
  button: {
    width: '100%',
    borderRadius: 30,
-    shadowColor: colors.primary,
-    shadowOffset: { width: 0, height: 10 },
-    shadowOpacity: 0.4,
-    shadowRadius: 20,
    elevation: 14,
    marginTop: 20,
  },
  buttonGradient: {
-    borderRadius: 30,
-    paddingVertical: 18,
+    
+ borderRadius:42,
+    paddingVertical: 14,    
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
@@ -302,8 +314,8 @@ const styles = StyleSheet.create({
  },
  buttonText: {
    color: colors.white,
-    fontWeight: '800',
    fontSize: responsiveFontSize(1.8),
+    fontFamily: FontsFamily.nunitoBold,
  },
  footerText: {
    fontSize: responsiveFontSize(1.4),
@@ -311,5 +323,6 @@ const styles = StyleSheet.create({
    marginTop: 28,
    textAlign: 'center',
    maxWidth: 300,
+    fontFamily: FontsFamily.nunitoRegular,
  },
 });