theme update latest project

src/screens/ContributionScreen.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from 'react';
 import {
   View,
   Text,
   StyleSheet,
   Animated,
   Easing,
-} from "react-native";
-import { Ionicons } from "@react-native-vector-icons/ionicons";
-import colors from "../components/colors";
-import CustomModal from "../components/common/CustomModal";
-import { responsiveFontSize } from "react-native-responsive-dimensions";
+} from 'react-native';
+import LucideIcon from '../components/common/LucideIcon';
+import CustomModal from '../components/common/CustomModal';
+import { responsiveFontSize } from 'react-native-responsive-dimensions';
+import { useTheme } from '../hooks/ui/useTheme';
+import FontsFamily from '../constents/FontsFamily';
 
 interface ContributionProps {
   data: any;
@@ -24,137 +25,127 @@ const ContributionDetails: React.FC<ContributionProps> = ({
   onClose,
   onConfirm,
 }) => {
+  const theme = useTheme();
+
   // Animations
   const fadeAnim = useRef(new Animated.Value(0)).current;
-  const slideAnim = useRef(new Animated.Value(50)).current;
-  const scaleAnim = useRef(new Animated.Value(0.9)).current;
+  const slideAnim = useRef(new Animated.Value(20)).current;
 
   useEffect(() => {
     if (visible) {
       Animated.parallel([
         Animated.timing(fadeAnim, {
           toValue: 1,
-          duration: 600,
+          duration: 400,
           useNativeDriver: true,
         }),
         Animated.timing(slideAnim, {
           toValue: 0,
-          duration: 600,
-          easing: Easing.out(Easing.exp),
-          useNativeDriver: true,
-        }),
-        Animated.spring(scaleAnim, {
-          toValue: 1,
-          friction: 6,
+          duration: 400,
+          easing: Easing.out(Easing.quad),
           useNativeDriver: true,
         }),
       ]).start();
     } else {
       fadeAnim.setValue(0);
-      slideAnim.setValue(50);
-      scaleAnim.setValue(0.9);
+      slideAnim.setValue(20);
     }
   }, [visible]);
 
   return (
-    <CustomModal visible={visible} onClose={onClose} onConfirm={onConfirm} confirmButton={colors.pastelOrange} confirmTextColor={colors.black} elevation={5}>
-      {/* Header */}
-      <Animated.View
-        style={[
-          styles.header,
-          { opacity: fadeAnim, transform: [{ translateY: slideAnim }] },
-        ]}
-      >
-        <Ionicons name="wallet-outline" size={32} color={colors.black} />
-        <Text style={styles.headerTitle}>Contribution Summary</Text>
-      </Animated.View>
+    <CustomModal
+      visible={visible}
+      onClose={onClose}
+      onConfirm={onConfirm}
+      confirmText="Contribute Now"
+      title="Contribution Summary"
+    >
+      <Animated.View style={{ opacity: fadeAnim, transform: [{ translateY: slideAnim }] }}>
+        {/* Info Card */}
+        <View style={[styles.card, { backgroundColor: theme.colors.background, borderColor: theme.colors.border }]}>
+          <View style={styles.headerRow}>
+            <LucideIcon name="wallet-outline" size={24} color={theme.colors.primary} />
+            <Text style={[styles.amount, { color: theme.colors.textPrimary }]}>₹{data?.totalPayable || data?.baseAmount}</Text>
+          </View>
 
-      {/* Contribution Info Card */}
-      <Animated.View
-        style={[
-          styles.card,
-          { transform: [{ scale: scaleAnim }], opacity: fadeAnim },
-        ]}
-      >
-        <Text style={styles.label}>Base Amount</Text>
-        <Text style={styles.value}>₹{data?.baseAmount}</Text>
-        {
-          data?.alreadyPaid ? <Text style={styles?.valueHighlight}>Already Paid Amount</Text> :
-            <View>
-              <Text style={styles.label}>Total Payable</Text>
-              <Text style={styles.valueHighlight}>₹{data?.totalPayable}</Text>
-            </View>}
+          <View style={styles.infoGrid}>
+            <InfoItem label="Base Amount" value={`₹${data?.baseAmount}`} />
+            <InfoItem label="Due Date" value={data?.dueDate} />
+            <InfoItem label="Cycle End" value={data?.cycleEnd} />
+            <InfoItem label="Late Fee" value={`₹${data?.effectiveLateFee || 0}`} />
+          </View>
+        </View>
 
-
-        <Text style={styles.label}>Due Date</Text>
-        <Text style={styles.value}>{data?.dueDate}</Text>
-
-        <Text style={styles.label}>Cycle End</Text>
-        <Text style={styles.value}>{data?.cycleEnd}</Text>
-      </Animated.View>
-
-      {/* Extra Details */}
-      <Animated.View
-        style={[
-          styles.card,
-          { transform: [{ translateY: slideAnim }], opacity: fadeAnim },
-        ]}
-      >
-        <Text style={styles.label}>Cycle Number</Text>
-        <Text style={styles.value}>{data?.cycleNumber}</Text>
-
-        <Text style={styles.label}>Late Fee Mode</Text>
-        <Text style={styles.value}>{data?.lateFeeMode}</Text>
-
-        <Text style={styles.label}>Late Fee Value</Text>
-        <Text style={styles.value}>₹{data?.lateFeeValue}</Text>
-
-        <Text style={styles.label}>Effective Late Fee</Text>
-        <Text style={styles.value}>₹{data?.effectiveLateFee}</Text>
+        {/* Status Card */}
+        <View style={[styles.miniCard, { backgroundColor: theme.colors.background, borderColor: theme.colors.border }]}>
+          <Text style={[styles.label, { color: theme.colors.textMuted }]}>Cycle {data?.cycleNumber}</Text>
+          {data?.alreadyPaid && (
+            <Text style={[styles.statusText, { color: theme.colors.primary }]}>Payment Already Completed</Text>
+          )}
+        </View>
       </Animated.View>
     </CustomModal>
   );
 };
 
+const InfoItem = ({ label, value }: { label: string; value: string | number }) => {
+  const theme = useTheme();
+  return (
+    <View style={styles.infoItem}>
+      <Text style={[styles.label, { color: theme.colors.textMuted }]}>{label}</Text>
+      <Text style={[styles.value, { color: theme.colors.textSecondary }]}>{value}</Text>
+    </View>
+  );
+};
+
 export default ContributionDetails;
 
 const styles = StyleSheet.create({
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 24,
-  },
-  headerTitle: {
-    fontSize: responsiveFontSize(2.2),
-    fontWeight: "700",
-    marginLeft: 10,
-  },
   card: {
-    backgroundColor: "#fff",
-    padding: 16,
+    padding: 20,
     borderRadius: 16,
-    marginBottom: 16,
-    shadowColor: "#000",
-    shadowOpacity: 0.08,
-    shadowOffset: { width: 0, height: 3 },
-    shadowRadius: 6,
-    elevation: 3,
+    borderWidth: 1,
+    marginBottom: 12,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 20,
+  },
+  amount: {
+    fontSize: responsiveFontSize(2.8),
+    fontFamily: FontsFamily.nunitoBold,
+  },
+  infoGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 16,
+  },
+  infoItem: {
+    width: '45%',
+  },
+  miniCard: {
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
   },
   label: {
-    fontSize: responsiveFontSize(1.3),
-    color: "#6b7280",
-    marginTop: 6,
+    fontSize: responsiveFontSize(1.2),
+    fontFamily: FontsFamily.nunitoMedium,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
   },
   value: {
-    fontSize: responsiveFontSize(1.5),
-    fontWeight: "500",
-    color: "#374151",
-    marginBottom: 6,
+    fontSize: responsiveFontSize(1.6),
+    fontFamily: FontsFamily.nunitoBold,
+    marginTop: 2,
   },
-  valueHighlight: {
-    fontSize: responsiveFontSize(1.8),
-    fontWeight: "700",
-    color: colors.black,
-    marginBottom: 10,
+  statusText: {
+    fontSize: responsiveFontSize(1.4),
+    fontFamily: FontsFamily.nunitoBold,
   },
 });