Final improvements for Groups PDF's

src/exams/pdf/details/level.exam.tsx

@@ -5,6 +5,7 @@ import { styles } from "../styles";
 import { RadialResult } from "./radial.result";
 interface Props {
   detail: ModuleScore;
+  title: string;
 }
 
 const thresholds = [
@@ -63,7 +64,7 @@ const customStyles = StyleSheet.create({
   },
 });
 
-export const LevelExamDetails = ({ detail }: Props) => {
+export const LevelExamDetails = ({ detail, title }: Props) => {
   const updatedThresholds = thresholds.map((t) => ({
     ...t,
     match: detail.score >= t.minValue && detail.score <= t.maxValue,
@@ -86,7 +87,7 @@ export const LevelExamDetails = ({ detail }: Props) => {
           <Text
             style={[styles.textBold, styles.textColor, { fontSize: "10px" }]}
           >
-            Level as per CEFR Levels
+            {title}
           </Text>
         </View>
         <View style={customStyles.tableBody}>

src/exams/pdf/details/radial.result.tsx

@@ -1,39 +1,22 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React from "react";
 
-import { View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import { View, Text, Image } from "@react-pdf/renderer";
 import { styles } from "../styles";
 import { ModuleScore } from "@/interfaces/module.scores";
 
-const customStyles = StyleSheet.create({
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: 4,
-    position: "relative",
-  },
-  resultContainer: {
-    display: "flex",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: 10,
-    gap: 8,
-  },
-});
-
-export const RadialResult = ({ module, score, total, png }: ModuleScore) => (
-  <View key="module" style={[styles.textFont, customStyles.container]}>
-    <Text style={[styles.textColor, styles.textBold, { fontSize: 10 }]}>
-      {module}
-    </Text>
+export const RadialResult = ({
+  module,
+  score,
+  total,
+  png,
+}: ModuleScore) => (
+  <View style={[styles.textFont, styles.radialContainer]}>
+      <Text style={[styles.textColor, styles.textBold, { fontSize: 10 }]}>
+        {module}
+      </Text>
     <Image src={png} style={styles.image64}></Image>
-    <View style={[styles.textColor, customStyles.resultContainer]}>
+    <View style={[styles.textColor, styles.radialResultContainer]}>
       <Text style={styles.textBold}>{score}</Text>
       <Text style={{ fontSize: 8 }}>out of {total}</Text>
     </View>