fix navigation issue (onlight mode)

src/components/JoinedGroupCard.tsx

@@ -4,6 +4,7 @@ import colors from './colors';
 import { useNavigation } from '@react-navigation/native';
 import { BASE_URL, CONTRIBUTE } from '../utils/ApiUrls';
 import { apiCall } from '../utils/ApiHelper';
+import { responsiveFontSize } from 'react-native-responsive-dimensions';
 
 interface JoinedGroup {
   id: string;
@@ -180,13 +181,13 @@ const styles = StyleSheet.create({
     marginBottom: 4,
   },
   groupName: {
-    fontSize: 20,
+    fontSize: responsiveFontSize(2),
     fontWeight: 'bold',
     color: '#1F2937',
     flexShrink: 1,
   },
   createdBy: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: '#6B7280',
     marginBottom: 16,
   },
@@ -196,7 +197,7 @@ const styles = StyleSheet.create({
     borderRadius: 12,
   },
   statusText: {
-    fontSize: 12,
+    fontSize: responsiveFontSize(1.2),
     fontWeight: '600',
     textTransform: 'uppercase',
   },
@@ -218,12 +219,12 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
   },
   infoLabel: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: '#6B7280',
     marginBottom: 4,
   },
   infoValue: {
-    fontSize: 16,
+    fontSize: responsiveFontSize(1.6),
     fontWeight: '600',
     color: '#111827',
     textTransform: 'capitalize',
@@ -237,11 +238,11 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   participantText: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: '#6B7280',
   },
   participantCount: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     fontWeight: '600',
     color: '#111827',
   },
@@ -262,7 +263,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   dateText: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: '#4B5563',
     fontWeight: '500',
   },
@@ -276,7 +277,7 @@ const styles = StyleSheet.create({
   },
   payButtonText: {
     color: colors.black,
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     fontWeight: '600',
   },
   // Paid button
@@ -288,7 +289,7 @@ const styles = StyleSheet.create({
   },
   paidButtonText: {
     color: '#065F46',
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     fontWeight: '600',
   },
   viewButton: {
@@ -299,7 +300,7 @@ const styles = StyleSheet.create({
   },
   viewButtonText: {
     color: '#000000ff',
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     fontWeight: '600',
   },
 });