fix navigation issue (onlight mode)

src/screens/home/UserProfileStatus.tsx

@@ -16,6 +16,11 @@ import LinearGradient from "react-native-linear-gradient";
 import { Ionicons } from "@react-native-vector-icons/ionicons";
 import { apiCall } from "../../utils/ApiHelper";
 import { PAY_ALL_URL } from "../../utils/ApiUrls";
+import {
+  responsiveHeight,
+  responsiveWidth,
+  responsiveFontSize
+} from "react-native-responsive-dimensions";
 
 type StatusData = {
   role?: string;
@@ -292,7 +297,7 @@ const UserProfileStatus: React.FC<UserProfileStatusProps> = ({
                 )}
               </View>
               <View style={styles.infoCardOne}>
-              <Text style={{ color: "#fff", fontWeight: "400"}}>Total Paid Amount {userDashboard?.totalPaidAmountMonth}</Text>
+              <Text style={{ color: "#fff", fontSize: responsiveWidth(2.3)}}>Total Paid Amount <Text style={{ fontWeight: "900"}}>{userDashboard?.totalPaidAmountMonth}</Text></Text>
               {/* <Text style={{ color: "#fff", fontWeight: "400"}}>Total Paid Amount {userDashboard?.totalPaidAmountMonth}</Text> */}
           
            </View>
@@ -372,7 +377,7 @@ const styles = StyleSheet.create({
     marginRight: 8
   },
   header: {
-    fontSize: 20,
+    fontSize: responsiveWidth(3.5),
     fontWeight: "700",
     color: "#fff"
   },
@@ -386,7 +391,7 @@ const styles = StyleSheet.create({
   },
   statusBadgeText: {
     color: "#fff",
-    fontSize: 13,
+    fontSize: responsiveWidth(2),
     fontWeight: '600',
     marginLeft: 4
   },
@@ -441,13 +446,13 @@ const styles = StyleSheet.create({
   },
   infoLabel: {
     color: "rgba(255,255,255,0.9)",
-    fontSize: 12,
+    fontSize: responsiveWidth(2),
     fontWeight: '500',
     flexShrink: 1,
   },
   infoValue: {
     fontWeight: "700",
-    fontSize: 16,
+    fontSize: responsiveWidth(2.5),
     textAlign: 'left',
     color: "#fff"
   },
@@ -498,7 +503,7 @@ const styles = StyleSheet.create({
   },
   dueBarText: {
     color: "#fff",
-    fontSize: 16,
+    fontSize: responsiveWidth(2.5),
     fontWeight: "600"
   },
   payAllButton: {
@@ -513,7 +518,7 @@ const styles = StyleSheet.create({
   payAllButtonText: {
     color: "#000000ff",
     fontWeight: "bold",
-    fontSize: 16
+    fontSize: responsiveWidth(2.5)
   },
   payModalOverlay: {
     flex: 1,
@@ -543,7 +548,7 @@ const styles = StyleSheet.create({
   },
   payDialogTitle: {
     color: "#000000ff",
-    fontSize: 18,
+    fontSize: responsiveWidth(1.8),
     fontWeight: "700"
   },
   payGroupOption: {
@@ -565,16 +570,16 @@ const styles = StyleSheet.create({
   payGroupName: {
     color: "#000000ff",
     fontWeight: "700",
-    fontSize: 16
+    fontSize: responsiveWidth(2.5)
   },
   payDueText: {
     color: "rgba(0, 0, 0, 0.8)",
-    fontSize: 13,
+    fontSize: responsiveWidth(1.3),
     marginTop: 2
   },
   payAmount: {
     fontWeight: "bold",
-    fontSize: 16,
+    fontSize: responsiveWidth(2.5),
     color: "#4CAF50"
   },
   payDialogFooter: {
@@ -588,7 +593,7 @@ const styles = StyleSheet.create({
   payDialogTotal: {
     color: "#000000ff",
     fontWeight: "600",
-    fontSize: 17
+    fontSize: responsiveWidth(1.7)
   },
   payConfirmButton: {
     flexDirection: "row",
@@ -605,7 +610,7 @@ const styles = StyleSheet.create({
   payButtonText: {
     color: "#ffffffff",
     fontWeight: "bold",
-    fontSize: 16
+    fontSize: responsiveWidth(2.5)
   },
   modalOverlay: {
     flex: 1,
@@ -622,7 +627,7 @@ const styles = StyleSheet.create({
     elevation: 12,
   },
   modalTitle: {
-    fontSize: 22,
+    fontSize: responsiveWidth(2.2),
     fontWeight: "700",
     color: colors.primary,
     marginBottom: 8,
@@ -631,7 +636,7 @@ const styles = StyleSheet.create({
   modalText: {
     textAlign: "center",
     color: "#666",
-    fontSize: 14,
+    fontSize: responsiveWidth(1.4),
     lineHeight: 20,
     marginBottom: 20,
   },
@@ -658,7 +663,7 @@ const styles = StyleSheet.create({
   buttonText: {
     color: "#fff",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize:responsiveWidth(2.5),
   },
   secondaryText: {
     color: "#666",