homePage update

src/components/JoinedGroupCard.tsx

@@ -3,6 +3,7 @@
 import React, { FC } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import colors from './colors';
+import { useNavigation } from '@react-navigation/native';
 
 // Update the type to match the full data structure
 interface JoinedGroup {
@@ -63,9 +64,10 @@ const getStatusStyle = (status: JoinedGroup['status']) => {
 export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress }) => {
   const progress = (item.currentParticipants / item.maxParticipants) * 100;
   const statusStyle = getStatusStyle(item.status);
+  const navigation = useNavigation<any>()
 
   return (
-    <View style={styles.card}>
+    <TouchableOpacity style={styles.card} onPress={()=> navigation.navigate("GroupDetails", {item, color:colors.Settings})}>
       {/* Header */}
       <View style={styles.header}>
         <Text style={styles.groupName}>{item.groupName}</Text>
@@ -107,7 +109,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress })
             <Text style={styles.viewButtonText}>View</Text>
         </TouchableOpacity>
       </View>
-    </View>
+    </TouchableOpacity>
   );
 };
 

src/components/colors.ts

@@ -10,12 +10,13 @@ const colors = {
   Profile: "#2D9CDB",  // Deep sky blue
   Group: "#27AE60",    // Green for freshness
   Settings: "#F39C12", // Amber for warmth
+  
   // common text + UI colors
   textDark: "#212121",
   textLight: "#555555",
   white: "#FFFFFF",
   black: "#000000",
-  primary: "#a57ae9ff",
+  primary: "#711ff7ff",
 };
 
 export default colors;

src/components/common/CustomModal.tsx

@@ -0,0 +1,158 @@
+import React, { useRef, useEffect } from "react";
+import {
+    View,
+    Text,
+    StyleSheet,
+    Modal,
+    TouchableOpacity,
+    Animated,
+    Dimensions,
+} from "react-native";
+import colors from "../colors";
+
+const { height } = Dimensions.get("window");
+
+type CustomModalProps = {
+    visible: boolean;
+    onClose: () => void;
+    title?: string;
+    children?: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm?: () => void;
+    confirmButton?:string
+};
+
+const CustomModal: React.FC<CustomModalProps> = ({
+    visible,
+    onClose,
+    title,
+    children,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    onConfirm,
+    confirmButton = colors.primary
+}) => {
+    const slideAnim = useRef(new Animated.Value(height)).current; // starts off screen
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        if (visible) {
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: 0,
+                    duration: 300,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(fadeAnim, {
+                    toValue: 1,
+                    duration: 300,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        } else {
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: height,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(fadeAnim, {
+                    toValue: 0,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+    }, [visible]);
+
+    return (
+        <Modal transparent visible={visible} animationType="none">
+            {/* Overlay */}
+            <Animated.View style={[styles.overlay, { opacity: fadeAnim }]}>
+                {/* Modal Box */}
+                <Animated.View
+                    style={[
+                        styles.modalBox,
+                        { transform: [{ translateY: slideAnim }] },
+                    ]}
+                >
+                    {/* Header */}
+                    {
+                        title &&
+
+                        <Text style={styles.title}>{title}</Text>
+                    }
+                    {/* Body */}
+                    <View style={styles.content}>{children}</View>
+
+                    {/* Footer Actions */}
+                    <View style={styles.actions}>
+                        <TouchableOpacity
+                            style={[styles.button, styles.cancelButton]}
+                            onPress={onClose}
+                        >
+                            <Text style={styles.cancelText}>{cancelText}</Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            style={[styles.button, {backgroundColor:confirmButton}]}
+                            onPress={onConfirm}
+                        >
+                            <Text style={styles.confirmText}>{confirmText}</Text>
+                        </TouchableOpacity>
+                    </View>
+                </Animated.View>
+            </Animated.View>
+        </Modal>
+    );
+};
+
+export default CustomModal;
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.4)",
+        justifyContent: "flex-end",
+    },
+    modalBox: {
+        backgroundColor: "#fff",
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        padding: 20,
+        elevation: 10,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: "700",
+        color: "#1f2937",
+        marginBottom: 12,
+    },
+    content: {
+        marginBottom: 20,
+    },
+    actions: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        marginTop: 10,
+    },
+    button: {
+        paddingVertical: 10,
+        paddingHorizontal: 18,
+        borderRadius: 10,
+        marginLeft: 10,
+    },
+    cancelButton: {
+        backgroundColor: "#e5e7eb",
+    },
+    
+    cancelText: {
+        color: "#374151",
+        fontWeight: "500",
+    },
+    confirmText: {
+        color: "#fff",
+        fontWeight: "600",
+    },
+});

src/components/common/Header.tsx

@@ -57,5 +57,6 @@ const styles = StyleSheet.create({
   headerTitle: {
     fontSize: 18,
     fontWeight: "600",
+    textTransform:'uppercase'
   },
 });