PDF Styling improvements

src/exams/pdf/index.tsx

@@ -1,11 +1,19 @@
 import React from "react";
-import { Document, Page, View, Text, StyleSheet } from "@react-pdf/renderer";
+import {
+  Document,
+  Page,
+  View,
+  Text,
+  StyleSheet,
+} from "@react-pdf/renderer";
 import ProgressBar from "./progress.bar";
+// import RadialProgress from "./radial.progress";
+// import RadialProgressSvg from "./radial.progress.svg";
 
 const styles = StyleSheet.create({
   body: {
     paddingTop: 35,
-    paddingBottom: 65,
+    paddingBottom: 20,
     paddingHorizontal: 35,
   },
   titleView: {
@@ -17,29 +25,28 @@ const styles = StyleSheet.create({
     textTransform: "uppercase",
   },
   textPadding: {
-    margin: "16px",
+    margin: "8px",
-  },
-  userSection: {
-    fontWeight: "bold",
   },
   separator: {
     width: "100%",
-    borderBottom: "1px solid blue",
+    borderBottom: "1px solid #89b0c2",
+  },
+  textFont: {
+    fontFamily: "Helvetica",
+  },
+  textBold: {
+    fontWeight: "bold",
   },
   textColor: {
-    color: "blue",
+    color: "#4e4969",
   },
   textUnderline: {
     textDecoration: "underline",
   },
-  skillsTitle: {
+  spacedRow: {
-    fontSize: 14,
+    display: "flex",
-  },
+    flexDirection: "row",
-  skillsText: {
+    justifyContent: "space-between",
-    fontSize: 12,
-  },
-  footerText: {
-    fontSize: 9,
   },
 });
 interface Props {
@@ -51,36 +58,81 @@ interface Props {
 }
 
 const PDFReport = ({ date, name, email, id, gender }: Props) => {
+  const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
+  const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
+  const defaultSkillsTitleStyle = [
+    styles.textFont,
+    styles.textColor,
+    styles.textBold,
+    { fontSize: 7 },
+  ];
   return (
     <Document>
       <Page style={styles.body}>
         <View style={styles.titleView}>
-          <Text style={[styles.textColor, styles.textUnderline, styles.title]}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              styles.title,
+              { fontSize: 14 },
+            ]}
+          >
             English Skills Test Result Report
           </Text>
         </View>
         <View style={styles.textPadding}>
-          <Text>Date of Test: {date}</Text>
+          <Text style={defaultTextStyle}>Date of Test: {date}</Text>
         </View>
-        <Text style={styles.userSection}>Candidate Information:</Text>
+        <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
+          Candidate Information:
+        </Text>
         <View style={styles.textPadding}>
-          <Text>Name: {name}</Text>
+          <Text style={defaultTextStyle}>Name: {name}</Text>
-          <Text>ID: {id}</Text>
+          <Text style={defaultTextStyle}>ID: {id}</Text>
-          <Text>Email: {email}</Text>
+          <Text style={defaultTextStyle}>Email: {email}</Text>
-          <Text>Gender: {gender}</Text>
+          <Text style={defaultTextStyle}>Gender: {gender}</Text>
         </View>
         <View>
-          <Text>Test Details:</Text>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Test Details:
+          </Text>
         </View>
         <View>
-          <Text>Performance Summary</Text>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Performance Summary
+          </Text>
           <View>
             <Text></Text>
           </View>
         </View>
         <View style={[{ paddingTop: 30 }, styles.separator]}></View>
         <View>
-          <Text style={[styles.textColor, styles.textUnderline]}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              { fontSize: 12, paddingTop: 10 },
+            ]}
+          >
             Skills Feedback
           </Text>
           <View
@@ -88,49 +140,74 @@ const PDFReport = ({ date, name, email, id, gender }: Props) => {
               paddingTop: 10,
             }}
           >
-            <Text style={[styles.textColor, styles.skillsTitle]}>
+            <Text style={defaultSkillsTitleStyle}>Listening</Text>
-              Listening
+            <Text style={defaultSkillsTextStyle}>xxx</Text>
-            </Text>
+            <Text style={defaultSkillsTitleStyle}>Reading</Text>
-            <Text style={styles.skillsText}>xxx</Text>
+            <Text style={defaultSkillsTextStyle}>xxx</Text>
-            <Text style={[styles.textColor, styles.skillsTitle]}>Reading</Text>
+            <Text style={defaultSkillsTitleStyle}>Writing</Text>
-            <Text style={styles.skillsText}>xxx</Text>
+            <Text style={defaultSkillsTextStyle}>xxx</Text>
-            <Text style={[styles.textColor, styles.skillsTitle]}>Writing</Text>
+            <Text style={defaultSkillsTitleStyle}>Speaking</Text>
-            <Text style={styles.skillsText}>xxx</Text>
+            <Text style={defaultSkillsTextStyle}>xxx</Text>
-            <Text style={[styles.textColor, styles.skillsTitle]}>Speaking</Text>
-            <Text style={styles.skillsText}>xxx</Text>
           </View>
         </View>
-        <View style={[{ paddingTop: 30 }, styles.separator]}></View>
+        <View style={[{ paddingTop: 30 }, styles.separator]}>
-        <View style={[{ paddingTop: 30 }, styles.footerText]}>
+          <View>
+            <ProgressBar
+              width={200}
+              height={18}
+              backgroundColor="#cc5b55"
+              progressColor="#fab7b0"
+              percentage={60}
+            />
+          </View>
+        </View>
+        <View style={{ flexGrow: 1 }}></View>
+        <View style={[{ paddingTop: 30, fontSize: 5 }, styles.textFont]}>
+          <View
+            style={[
+              styles.spacedRow,
+              {
+                paddingHorizontal: 10,
+              },
+            ]}
+          >
+            <View>
               <Text>Validity</Text>
               <Text>
-            This report remains valid for a duration of three months from the
+                This report remains valid for a duration of three months from
-            test date. Confidential – circulated for concern people
+                the test date.
               </Text>
+            </View>
+            <View>
+              <Text>Confidential – circulated for concern people</Text>
+            </View>
+          </View>
+          <View style={{ paddingTop: 10 }}>
             <Text>Declaration</Text>
-          <Text>
+            <Text style={{ paddingTop: 5 }}>
-            We hereby declare that exam results on our platform, assessed by AI,
+              We hereby declare that exam results on our platform, assessed by
-            are not the sole determinants of candidates&apos; English
+              AI, are not the sole determinants of candidates&apos; English
               proficiency levels. While EnCoach provides feedback based on
               assessments, we recognize that language proficiency encompasses
               practical application, cultural understanding, and real-life
               communication. We urge users to consider exam results as a measure
-            of progress and improvement, and we continuously enhance our system
+              of progress and improvement, and we continuously enhance our
-            to ensure accuracy and reliability.
+              system to ensure accuracy and reliability.
             </Text>
-          <View>
+          </View>
-            <ProgressBar
+          <View style={[styles.textColor, { paddingTop: 5 }]}>
-              width={200}
+            <Text style={styles.textUnderline}>info@encoach.com</Text>
-              height={50}
+            <Text>https://encoach.com</Text>
-              backgroundColor="lightblue"
+            <View style={styles.spacedRow}>
-              progressColor="red"
+              <Text>Group ID: TRI64BNBOIU5043</Text>
-              percentage={60}
+              <Text
+                // style={styles.pageNumber}
+                render={({ pageNumber, totalPages }) =>
+                  `${pageNumber} / ${totalPages}`
+                }
+                fixed
               />
             </View>
-          <View style={styles.textColor}>
-            <Text>info@encoach.com</Text>
-            <Text>https://encoach.com</Text>
-            <Text>Group ID: TRI64BNBOIU5043</Text>
           </View>
         </View>
       </Page>