Removed some horizontal margins on PDFs

src/exams/pdf/group.test.report.tsx

@@ -103,13 +103,13 @@ const GroupTestReport = ({
             {title}
           </Text>
         </View>
-        <View style={styles.textPadding}>
+        <View style={styles.textMargin}>
           <Text style={defaultTextStyle}>Date of Test: {date}</Text>
         </View>
         <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
           Candidate Information:
         </Text>
-        <View style={styles.textPadding}>
+        <View style={styles.textMargin}>
           <Text style={defaultTextStyle}>Name: {name}</Text>
           <Text style={defaultTextStyle}>ID: {id}</Text>
           <Text style={defaultTextStyle}>Email: {email}</Text>
@@ -193,10 +193,8 @@ const GroupTestReport = ({
                   ]}
                   key={label}
                 >
-                  <Text style={customStyles.tableCell}>
-                    {label}
-                  </Text>
-                  <View style={[customStyles.tableCell, { flex: 2}]}>
+                  <Text style={customStyles.tableCell}>{label}</Text>
+                  <View style={[customStyles.tableCell, { flex: 2 }]}>
                     <ProgressBar
                       width={200}
                       height={18}

src/exams/pdf/styles.ts

@@ -14,8 +14,8 @@ export const styles = StyleSheet.create({
   title: {
     textTransform: "uppercase",
   },
-  textPadding: {
-    margin: "8px",
+  textMargin: {
+    marginVertical: "8px",
   },
   separator: {
     width: "100%",

src/exams/pdf/test.report.footer.tsx

@@ -3,15 +3,20 @@ import { styles } from "./styles";
 import { View, Text } from "@react-pdf/renderer";
 
 const TestReportFooter = () => (
-  <View style={[{ paddingTop: 30, fontSize: 5, position: 'absolute', bottom: 30, left: 35, right: 35 }, styles.textFont,]}>
   <View
     style={[
-        styles.spacedRow,
       {
-          paddingHorizontal: 10,
+        paddingTop: 30,
+        fontSize: 5,
+        position: "absolute",
+        bottom: 30,
+        left: 35,
+        right: 35,
       },
+      styles.textFont,
     ]}
   >
+    <View style={[styles.spacedRow, styles.textMargin]}>
       <View>
         <Text>Validity</Text>
         <Text>

src/exams/pdf/test.report.tsx

@@ -68,19 +68,19 @@ const TestReport = ({
             {title}
           </Text>
         </View>
-        <View style={styles.textPadding}>
+        <View style={styles.textMargin}>
           <Text style={defaultTextStyle}>Date of Test: {date}</Text>
         </View>
         <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
           Candidate Information:
         </Text>
-        <View style={styles.textPadding}>
+        <View style={styles.textMargin}>
           <Text style={defaultTextStyle}>Name: {name}</Text>
           <Text style={defaultTextStyle}>ID: {id}</Text>
           <Text style={defaultTextStyle}>Email: {email}</Text>
           <Text style={defaultTextStyle}>Gender: {gender}</Text>
         </View>
-        <View style={{ height: '120px' }}>
+        <View style={{ height: "120px" }}>
           <Text
             style={[
               styles.textFont,
@@ -131,7 +131,9 @@ const TestReport = ({
             }}
           >
             {testDetails
-              .filter(({ suggestions, evaluation }) => suggestions || evaluation)
+              .filter(
+                ({ suggestions, evaluation }) => suggestions || evaluation
+              )
               .map(({ module, suggestions, evaluation }) => (
                 <View key={module} style={customStyles.testDetails}>
                   <Text style={[...defaultSkillsTitleStyle, styles.textBold]}>
@@ -139,15 +141,11 @@ const TestReport = ({
                   </Text>
                   <Text style={defaultSkillsTextStyle}>{evaluation}</Text>
                   <Text style={defaultSkillsTextStyle}>{suggestions}</Text>
-
                 </View>
               ))}
           </View>
           <View style={styles.alignRightRow}>
-            <Image
-              src={qrcode}
-              style={styles.qrcode}
-            />
+            <Image src={qrcode} style={styles.qrcode} />
           </View>
         </View>
         <View style={[{ paddingBottom: 30 }, styles.separator]}></View>