notification

src/components/JoinedGroupCard.tsx

@@ -66,7 +66,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress })
   const navigation = useNavigation<any>()
 
   return (
-    <TouchableOpacity style={styles.card} onPress={()=> navigation.navigate("GroupDetails", {item, color:colors.Settings})}>
+    <TouchableOpacity style={styles.card} onPress={()=> navigation.navigate("GroupDetails", {item, color:colors.black})}>
       {/* Header */}
       <View style={styles.header}>
         <Text style={styles.groupName}>{item.groupName}</Text>

src/components/MyGroupCard.tsx

@@ -94,6 +94,7 @@ const styles = StyleSheet.create({
     shadowColor: "#000",
     shadowOpacity: 0.05,
     shadowRadius: 4,
+    marginHorizontal:12
   },
   cardHeader: {
     flexDirection: "row",

src/components/RequestCard.tsx

@@ -37,8 +37,8 @@ export const RequestCard: FC<RequestCardProps> = ({ item, onApprove, onDecline }
       {/* Bottom section with action buttons */}
       <View style={styles.actionsSection}>
         <TouchableOpacity style={[styles.actionButton, styles.declineButton]} onPress={() => onDecline(item)}>
-          <Ionicons name="close-outline" size={20} color={colors.pastelOrange} />
-          <Text style={[styles.actionButtonText, { color: colors.pastelOrange }]}>Decline</Text>
+          <Ionicons name="close-outline" size={20} color={colors.black} />
+          <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 */}
@@ -54,10 +54,11 @@ export const RequestCard: FC<RequestCardProps> = ({ item, onApprove, onDecline }
 
 const styles = StyleSheet.create({
   card: {
+    marginHorizontal: 12,
     backgroundColor: colors.white,
     borderRadius: 16,
     marginVertical: 8,
-    elevation: 4,
+    elevation: 5,
     shadowColor: '#000',
     shadowOpacity: 0.1,
     shadowRadius: 10,
@@ -67,9 +68,7 @@ const styles = StyleSheet.create({
   userInfoSection: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: colors.textLight,
-    paddingBottom: 12,
+    paddingBottom: 6,
   },
   avatar: {
     width: 50,
@@ -96,7 +95,6 @@ const styles = StyleSheet.create({
   requestText: {
     fontSize: 15,
     color: colors.textDark,
-    lineHeight: 22,
   },
   groupName: {
     fontWeight: 'bold',
@@ -116,11 +114,13 @@ const styles = StyleSheet.create({
     borderRadius: 12,
   },
   declineButton: {
-    backgroundColor: colors.pastelPink,
+  elevation:5,
+  backgroundColor:colors.white
   },
   approveButton: {
     // Set background color as requested
     backgroundColor: colors.pastelOrange,
+    elevation:5,
   },
   actionButtonText: {
     fontSize: 16,

src/components/common/CustomModal.tsx

@@ -21,6 +21,8 @@ type CustomModalProps = {
     cancelText?: string;
     onConfirm?: () => void;
     confirmButton?:string
+    confirmTextColor?:string
+    elevation?:number
 };
 
 const CustomModal: React.FC<CustomModalProps> = ({
@@ -31,6 +33,8 @@ const CustomModal: React.FC<CustomModalProps> = ({
     confirmText = "Confirm",
     cancelText = "Cancel",
     onConfirm,
+    confirmTextColor,
+    elevation,
     confirmButton = colors.primary
 }) => {
     const slideAnim = useRef(new Animated.Value(height)).current; // starts off screen
@@ -89,17 +93,17 @@ const CustomModal: React.FC<CustomModalProps> = ({
                     {/* Footer Actions */}
                     <View style={styles.actions}>
                         <TouchableOpacity
-                            style={[styles.button, styles.cancelButton]}
+                            style={[styles.button, styles.cancelButton,{elevation:elevation}]}
                             onPress={onClose}
                         >
                             <Text style={styles.cancelText}>{cancelText}</Text>
                         </TouchableOpacity>
 
                         <TouchableOpacity
-                            style={[styles.button, {backgroundColor:confirmButton}]}
+                            style={[styles.button, {backgroundColor:confirmButton ,elevation:elevation}]}
                             onPress={onConfirm}
                         >
-                            <Text style={styles.confirmText}>{confirmText}</Text>
+                            <Text style={[styles.confirmText,{color:confirmTextColor}]}>{confirmText}</Text>
                         </TouchableOpacity>
                     </View>
                 </Animated.View>