theme

src/screens/OtpVarificationScreen.tsx

@@ -21,6 +21,8 @@ import { LOGIN_URL, VARIFY_OTP_URL } from "../utils/ApiUrls";
 import colors from "../components/colors";
 import CustomAlert from "../components/CostomAlart";
 import { getFcmToken } from "../utils/firebase/firebaseServices";
+import { useTheme } from "../theme/ThemeProvider";
+import FontsFamily from "../constents/FontsFamily";
 
 const CELL_COUNT = 6;
 const { width } = Dimensions.get('window');
@@ -50,6 +52,7 @@ export default function OtpVerificationScreen() {
     buttons: [],
     alertType: "info",
   });
+  const { theme } = useTheme();
 
   const inputs = useRef<Array<TextInput | null>>([]);
   const route = useRoute<OtpVerifyRouteProp>();
@@ -133,17 +136,17 @@ export default function OtpVerificationScreen() {
         await getFcmToken(res.data?.data?.userId);
 
         let hasActionRun = false;
-       const successAction = () => {
-    if (hasActionRun) return;
-    hasActionRun = true;
-    hideAlert();
-    navigation.dispatch(
-      CommonActions.reset({
-        index: 0,
-        routes: [{ name: 'Home' }],
-      })
-    );
-};
+        const successAction = () => {
+          if (hasActionRun) return;
+          hasActionRun = true;
+          hideAlert();
+          navigation.dispatch(
+            CommonActions.reset({
+              index: 0,
+              routes: [{ name: 'Home' }],
+            })
+          );
+        };
 
         triggerAlert(
           'Success!',
@@ -238,56 +241,64 @@ export default function OtpVerificationScreen() {
     }
   };
   
-    const colorsBlocks = [
-    colors.pastelPink,
-    colors.pastelBlue,
-    colors.pastelGreen,
-    colors.pastelOrange,
-    colors.pastelBlue,
-    colors.pastelPink,
-    colors.pastelGreen,
-    colors.pastelOrange,
-    colors.pastelPink,
+  const colorsBlocks = [
+    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} />
+    <View style={[styles.container, {backgroundColor: theme.colors.background }]}>
+      <StatusBar barStyle={theme.mode === "dark" ? "light-content" : "dark-content"} backgroundColor={colors.pastelOrange} />
 
       <View style={styles.gridContainer}>
         {colorsBlocks.map((bgColor, index) => (
-          <View
-            key={index}
-            style={[
-              styles.gridBlock,
-              { backgroundColor: bgColor },
-              index % 2 === 0 ? styles.elevatedBlock : {},
-            ]}
-          />
-        ))}
+           <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" : undefined}>
-
         <CustomAlert {...alertConfig} />
 
-        <View style={styles.contentPanel}>
+        <View style={[styles.contentPanel, { backgroundColor: theme.colors.reverseBackground }]}>
           <View style={styles.topSection}>
-            <Text style={styles.title}>Verify Your Code</Text>
-            <Text style={styles.subtitle}>We’ve sent a 6-digit verification code to +91 {mobile}.</Text>
+            <Text style={[styles.title, { color: theme.colors.reverseText }]}>Verify Your Code</Text>
+            <Text style={[styles.subtitle, { color: theme.colors.reverseText }]}>We’ve sent a 6-digit verification code to +91 {mobile}.</Text>
 
-            <Animated.View style={[styles.otpRow, { opacity: fade, transform: [{ translateY: slide }] }]}>
+            <Animated.View style={[styles.otpRow, { transform: [{ translateY: slide }] }]}>
               {Array.from({ length: CELL_COUNT }).map((_, i) => (
                 <TextInput
                   key={`otp-${i}`}
                   ref={(r) => { inputs.current[i] = r; }}
-                  style={[styles.cell, code[i] ? styles.cellFilled : null]}
+                  // UPDATED CELL STYLE
+                  style={[
+                    styles.cell, 
+                    code[i] ? styles.cellFilled : null,
+                    {
+                      backgroundColor: theme.colors.optCard, 
+                      color: theme.colors.reverseText,
+                    }
+                  ]}
+                
                   keyboardType="number-pad"
                   maxLength={i === 0 ? CELL_COUNT : 1}
                   value={code[i]}
                   onChangeText={(t) => (i === 0 ? handleFirstCellChange(t) : updateIndex(i, t))}
                   onKeyPress={(e) => handleKeyPress(i, e)}
-                  placeholder="•"
+                  placeholder="*"
                   placeholderTextColor="#BDBDBD"
                   textContentType="oneTimeCode"
                 />
@@ -300,16 +311,16 @@ export default function OtpVerificationScreen() {
               onPressIn={() => Animated.spring(ctaScale, { toValue: 0.97, useNativeDriver: true }).start()}
               onPressOut={() => Animated.spring(ctaScale, { toValue: 1, useNativeDriver: true }).start()}
               onPress={() => onSubmit(code.join(""), mobile)}
-              style={styles.button}
+              style={[styles.button, { backgroundColor: theme.colors.background }]}
             >
-              <Text style={styles.buttonText}>Verify & Continue</Text>
+              <Text style={[styles.buttonText, { color: theme.colors.textPrimary }]}>Verify & Continue</Text>
             </Pressable>
 
             {timer > 0 ? (
-              <Text style={styles.footerText}>Resend code in 00:{timer.toString().padStart(2, "0")}</Text>
+              <Text style={[styles.footerText, { color: theme.colors.reverseText }]}>Resend code in 00:{timer.toString().padStart(2, "0")}</Text>
             ) : (
               <Pressable onPress={resendOtp} disabled={isResending}>
-                <Text style={[styles.footerText, { color: colors.pastelPink, fontWeight: '600' }]}>
+                <Text style={[styles.footerText, { color: theme.colors.reverseText, fontWeight: '600' }]}>
                   {isResending ? "Resending..." : "Resend Code"}
                 </Text>
               </Pressable>
@@ -335,16 +346,15 @@ 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, justifyContent: 'center' },
   contentPanel: {
     marginHorizontal: 24,
-    backgroundColor: 'rgba(255, 255, 255, 0.95)',
     borderRadius: 32,
     padding: 28,
     shadowColor: '#000',
@@ -354,13 +364,33 @@ const styles = StyleSheet.create({
     elevation: 12,
   },
   topSection: { alignItems: 'center', marginBottom: 24 },
-  title: { fontSize: 28, fontWeight: "bold", color: colors.textDark, textAlign: 'center', marginBottom: 12 },
-  subtitle: { fontSize: 16, color: colors.textLight, textAlign: 'center', marginBottom: 32, lineHeight: 24, maxWidth: 300 },
-  otpRow: { flexDirection: "row", justifyContent: "space-between", width: '100%', paddingHorizontal: 10 },
-  cell: { width: 48, height: 56, borderRadius: 12, borderWidth: 1.5, borderColor: colors.inputBorder, backgroundColor: colors.white, textAlign: "center", fontSize: 22, fontWeight: '700', color: colors.textDark, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.08, shadowRadius: 8, elevation: 3 },
-  cellFilled: { borderColor: colors.primary, backgroundColor: '#F7F2FF' },
+  title: { fontSize: 28, color: colors.textDark, textAlign: 'center', marginBottom: 12 ,fontFamily: FontsFamily.nunitoExtraBold},
+  subtitle: { fontSize: 16, color: colors.textLight, textAlign: 'center', marginBottom: 32, lineHeight: 24, maxWidth: 300 ,fontFamily: FontsFamily.nunitoMedium},
+  
+  otpRow: { 
+    flexDirection: "row", 
+    justifyContent: "space-between", 
+    width: '100%', 
+    paddingHorizontal: 0, // Removed padding to use full width
+  },
+  
+  // FIX: Updated Cell Styling for clean smooth radius
+  cell: {
+    width: 45, 
+    height: 52, 
+    borderRadius: 14, // Smoother radius
+    textAlign: "center", 
+    fontSize: 20, 
+    fontWeight: "600",
+    elevation: 0, // Removed elevation for flat look (or keep if you want shadow)
+    overflow: 'hidden',
+  },
+  cellFilled: {
+    // Optional: Add specific style when filled if needed, handled inline above
+  },
+
   bottomSection: { paddingBottom: Platform.OS === "ios" ? 20 : 10, paddingTop: 10 },
-  button: { backgroundColor: colors.pastelPink, paddingVertical: 18, borderRadius: 30, alignItems: "center", justifyContent: "center", shadowColor: colors.primary, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.3, shadowRadius: 15, elevation: 8 ,borderWidth:2, borderColor:colors.pastelPink},
-  buttonText: { color: colors.white, fontWeight: "700", fontSize: 16 },
-  footerText: { textAlign: "center", color: colors.textLight, fontSize: 14, marginTop: 20 },
+  button: { backgroundColor: colors.pastelPink, paddingVertical: 18, borderRadius: 30, alignItems: "center", justifyContent: "center",},
+  buttonText: { color: colors.white, fontSize: 16, fontFamily: FontsFamily.nunitoBold },
+  footerText: { textAlign: "center", fontFamily: FontsFamily.nunitoBold, fontSize: 14, marginTop: 20 },
 });