Added custom stylesheet

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text } from "@react-pdf/renderer";
+import { View, Text, StyleSheet } from "@react-pdf/renderer";
 import { ModuleScore } from "@/interfaces/module.scores";
 import { styles } from "../styles";
 import { RadialResult } from "./radial.result";
@@ -40,6 +40,29 @@ const thresholds = [
   },
 ];
 
+const customStyles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 30,
+    justifyContent: "space-between",
+  },
+  tableContainer: {
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+  },
+  tableLabel: {
+    display: "flex",
+    alignItems: "center",
+  },
+  tableBody: { display: "flex", flex: 1, flexDirection: "row" },
+  tableRow: {
+    display: "flex",
+    flexDirection: "column",
+  },
+});
+
 export const LevelExamDetails = ({ detail }: Props) => {
   const updatedThresholds = thresholds.map((t) => ({
     ...t,
@@ -56,47 +79,27 @@ export const LevelExamDetails = ({ detail }: Props) => {
     return base ? "white" : "#553b25";
   };
   return (
-    <View
+    <View style={[styles.textFont, customStyles.container]}>
-      style={[
-        styles.textFont,
-        {
-          display: "flex",
-          flexDirection: "row",
-          gap: 30,
-          justifyContent: "space-between",
-        },
-      ]}
-    >
       <RadialResult {...detail} />
-      <View
+      <View style={customStyles.tableContainer}>
-        style={{
+        <View style={customStyles.tableLabel}>
-          display: "flex",
-          flex: 1,
-          flexDirection: "column",
-        }}
-      >
-        <View
-          style={{
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
           <Text
             style={[styles.textBold, styles.textColor, { fontSize: "10px" }]}
           >
             Level as per CEFR Levels
           </Text>
         </View>
-        <View style={{ display: "flex", flex: 1, flexDirection: "row" }}>
+        <View style={customStyles.tableBody}>
           {updatedThresholds.map(
             ({ level, label, minValue, maxValue, match }, index, arr) => (
               <View
                 key={label}
-                style={{
+                style={[
-                  width: `calc(100% / ${arr.length})`,
+                  customStyles.tableRow,
-                  display: "flex",
+                  {
-                  flexDirection: "column",
+                    width: `calc(100% / ${arr.length})`,
-                }}
+                  },
+                ]}
               >
                 <View
                   style={{

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

@@ -1,48 +1,39 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React from "react";
-import {
+
-  View,
+import { View, Text, Image, StyleSheet } from "@react-pdf/renderer";
-  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
+  <View key="module" style={[styles.textFont, customStyles.container]}>
-    key="module"
-    style={[
-      styles.textFont,
-      {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 4,
-        position: "relative",
-      },
-    ]}
-  >
     <Text style={[styles.textColor, styles.textBold, { fontSize: 10 }]}>
       {module}
     </Text>
-    <Image src={png} style={{ height: "64px", width: "64px" }}></Image>
+    <Image src={png} style={styles.image64}></Image>
-    <View
+    <View style={[styles.textColor, customStyles.resultContainer]}>
-      style={[
-        styles.textColor,
-        {
-          display: "flex",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          fontSize: 10,
-          gap: 8,
-        },
-      ]}
-    >
       <Text style={styles.textBold}>{score}</Text>
       <Text style={{ fontSize: 8 }}>out of {total}</Text>
     </View>

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

@@ -1,12 +1,5 @@
 import React from "react";
-import {
+import { View, StyleSheet } from "@react-pdf/renderer";
-  Document,
-  Page,
-  View,
-  Text,
-  StyleSheet,
-  Image,
-} from "@react-pdf/renderer";
 import { ModuleScore } from "@/interfaces/module.scores";
 import { styles } from "../styles";
 import { RadialResult } from "./radial.result";
@@ -14,11 +7,14 @@ interface Props {
   testDetails: ModuleScore[];
 }
 
+const customStyles = StyleSheet.create({
+  container: { display: "flex", flexDirection: "row", gap: 30 },
+});
+
 export const SkillExamDetails = ({ testDetails }: Props) => (
-  <View style={{ display: "flex", flexDirection: "row", gap: 30 }}>
+  <View style={customStyles.container}>
     {testDetails.map((detail) => {
       const { module } = detail;
-
       return <RadialResult key={module} {...detail} />;
     })}
   </View>

src/exams/pdf/index.tsx

@@ -4,11 +4,23 @@ import { Document, Page, View, Text, Image } from "@react-pdf/renderer";
 import ProgressBar from "./progress.bar";
 // import RadialProgress from "./radial.progress";
 // import RadialProgressSvg from "./radial.progress.svg";
-import { Module } from "@/interfaces";
 import { ModuleScore } from "@/interfaces/module.scores";
 // import logo from './logo_title.png';
 import { styles } from "./styles";
 
+import { StyleSheet } from "@react-pdf/renderer";
+
+const customStyles = StyleSheet.create({
+  testDetails: {
+    display: "flex",
+    gap: 4,
+  },
+  qrcode: {
+    width: "80px",
+    height: "80px",
+  },
+});
+
 interface Props {
   date: string;
   name: string;
@@ -46,7 +58,7 @@ const PDFReport = ({
     <Document>
       <Page style={styles.body}>
         <View style={styles.alignRightRow}>
-          <Image src={logo} fixed style={{ height: "64px", width: "64px" }} />
+          <Image src={logo} fixed style={styles.image64} />
         </View>
         <View style={styles.titleView}>
           <Text
@@ -74,7 +86,7 @@ const PDFReport = ({
           <Text style={defaultTextStyle}>Email: {email}</Text>
           <Text style={defaultTextStyle}>Gender: {gender}</Text>
         </View>
-        <View style={{ flex: 1}}>
+        <View style={{ flex: 1 }}>
           <Text
             style={[
               styles.textFont,
@@ -124,10 +136,7 @@ const PDFReport = ({
             {testDetails
               .filter(({ feedback }) => feedback)
               .map(({ module, feedback }) => (
-                <View key={module} style={{
+                <View key={module} style={customStyles.testDetails}>
-                  display: 'flex',
-                  gap: 4,
-                }}>
                   <Text style={[...defaultSkillsTitleStyle, styles.textBold]}>
                     {module}
                   </Text>
@@ -138,15 +147,12 @@ const PDFReport = ({
           <View style={styles.alignRightRow}>
             <Image
               src={qrcode}
-              style={{
+              style={customStyles.qrcode}
-                width: "80px",
-                height: "80px",
-              }}
             />
           </View>
         </View>
         <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
-       {false && (
+        {false && (
           <View>
             <ProgressBar
               width={200}

src/exams/pdf/styles.ts

@@ -43,4 +43,8 @@ export const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "row-reverse",
   },
+  image64: {
+    height: "64px",
+    width: "64px",
+  },
 });