working payment

src/components/RequestCard.tsx

@@ -1,10 +1,10 @@
 // src/components/RequestCard.tsx
 
 import React, { FC } from 'react';
-import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
-import { Ionicons } from "@react-native-vector-icons/ionicons";
-import colors from './colors'; // Assuming your colors are defined here
-import { JoinRequest } from '../types';
+import { View, Text, Image, TouchableOpacity, StyleSheet, Platform } from 'react-native';
+import { Ionicons } from "@react-native-vector-icons/ionicons"; // Assuming Expo for icons
+import colors from './colors'; // Your color palette
+import { JoinRequest } from '../types'; // Your type definition
 
 interface RequestCardProps {
   item: JoinRequest;
@@ -15,94 +15,124 @@ interface RequestCardProps {
 export const RequestCard: FC<RequestCardProps> = ({ item, onApprove, onDecline }) => {
   return (
     <View style={styles.card}>
-      {/* Top section with user avatar and info */}
+      {/* User Information Section */}
       <View style={styles.userInfoSection}>
-        <Image 
-          source={{ uri: item.userAvatar || `https://i.pravatar.cc/150?u=${item.userId}` }} 
-          style={styles.avatar} 
+        <Image
+          source={require('../assets/images/placeholder.png')}
+          style={styles.avatar}
         />
         <View style={styles.userInfo}>
           <Text style={styles.userName} numberOfLines={1}>{item.userName}</Text>
-          <Text style={styles.userMeta}><Ionicons name="call-outline" size={14} color={colors.textLight} /> {item.mobile}</Text>
+          <View style={styles.userMetaContainer}>
+            <Ionicons name="call-outline" size={14} color={colors.textLight} />
+            <Text style={styles.userMeta}>{item.mobile}</Text>
+          </View>
         </View>
       </View>
 
-      {/* Middle section for the group name */}
+      {/* Group Information Section */}
       <View style={styles.groupInfoSection}>
-        <Text style={styles.requestText}>
-          Wants to join the group: <Text style={styles.groupName}>{item.groupName}</Text>
-        </Text>
+        <Text style={styles.requestText}>Wants to join group</Text>
+        <Text style={styles.groupName} numberOfLines={2}>{item.groupName}</Text>
       </View>
 
-      {/* Bottom section with action buttons */}
+      {/* Action Buttons Section */}
       <View style={styles.actionsSection}>
-        <TouchableOpacity style={[styles.actionButton, styles.declineButton]} onPress={() => onDecline(item)}>
-          <Ionicons name="close-outline" size={20} color={colors.black} />
-          <Text style={[styles.actionButtonText,]}>Decline</Text>
+        <TouchableOpacity 
+          style={[styles.actionButton, styles.declineButton]} 
+          onPress={() => onDecline(item)}
+          activeOpacity={0.7}
+        >
+          <Ionicons name="close" size={20} color={colors.textDark} />
+          <Text style={styles.actionButtonText}>Decline</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={[styles.actionButton, styles.approveButton]} onPress={() => onApprove(item)}>
-          {/* Corrected icon color and updated text color for better contrast */}
-          <Ionicons name="checkmark-outline" size={20} color={colors.textDark} />
-          <Text style={[styles.actionButtonText, { color: colors.textDark }]}>Approve</Text>
+        <TouchableOpacity 
+          style={[styles.actionButton, styles.approveButton]} 
+          onPress={() => onApprove(item)}
+          activeOpacity={0.8}
+        >
+          <Ionicons name="checkmark" size={20} color={colors.black} />
+          <Text style={[styles.actionButtonText, { color: colors.black }]}>Approve</Text>
         </TouchableOpacity>
       </View>
     </View>
   );
 };
 
-
-
 const styles = StyleSheet.create({
   card: {
-    marginHorizontal: 12,
+    marginHorizontal: 16,
+    marginVertical: 12,
     backgroundColor: colors.white,
-    borderRadius: 16,
-    marginVertical: 8,
-    elevation: 5,
-    shadowColor: '#000',
-    shadowOpacity: 0.1,
-    shadowRadius: 10,
-    shadowOffset: { width: 0, height: 4 },
-    padding: 8,
+    borderRadius: 24,
+    padding: 20,
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.08,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 8,
+        shadowColor: '#00000020', // Softer shadow color for Android
+      },
+    }),
+    borderWidth: 1,
+    borderColor: '#f0f0f0',
   },
   userInfoSection: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingBottom: 6,
   },
   avatar: {
-    width: 50,
-    height: 50,
-    borderRadius: 25,
-    marginRight: 12,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    marginRight: 16,
+    borderWidth: 2,
+    borderColor: colors.pastelOrange,
   },
   userInfo: {
     flex: 1,
   },
   userName: {
-    fontSize: 17,
+    fontSize: 19,
     fontWeight: 'bold',
     color: colors.textDark,
   },
+  userMetaContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 5,
+  },
   userMeta: {
     fontSize: 14,
     color: colors.textLight,
-    marginTop: 4,
+    marginLeft: 8,
   },
   groupInfoSection: {
+    marginTop: 18,
     paddingVertical: 16,
+    paddingHorizontal: 16,
+    backgroundColor: '#F7F8FA',
+    borderRadius: 16,
+    alignItems: 'center',
   },
   requestText: {
-    fontSize: 15,
-    color: colors.textDark,
+    fontSize: 14,
+    color: colors.textLight,
   },
   groupName: {
-    fontWeight: 'bold',
+    fontSize: 17,
+    fontWeight: '600',
     color: colors.textDark,
+    marginTop: 6,
+    textAlign: 'center',
   },
   actionsSection: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    marginTop: 20,
     gap: 12,
   },
   actionButton: {
@@ -110,21 +140,31 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: 12,
-    borderRadius: 12,
+    paddingVertical: 16,
+    borderRadius: 16,
   },
   declineButton: {
-  elevation:5,
-  backgroundColor:colors.white
+    backgroundColor: '#F1F3F6',
   },
   approveButton: {
-    // Set background color as requested
     backgroundColor: colors.pastelOrange,
-    elevation:5,
+    ...Platform.select({
+      ios: {
+        shadowColor: colors.pastelOrange,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+      },
+      android: {
+        elevation: 6,
+        shadowColor: colors.pastelOrange,
+      },
+    }),
   },
   actionButtonText: {
     fontSize: 16,
-    fontWeight: '600',
+    fontWeight: 'bold',
     marginLeft: 8,
+    color: colors.textDark,
   },
 });