Added custom stylesheet

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={{
-                  display: 'flex',
-                  gap: 4,
-                }}>
+                <View key={module} style={customStyles.testDetails}>
                   <Text style={[...defaultSkillsTitleStyle, styles.textBold]}>
                     {module}
                   </Text>
@@ -138,15 +147,12 @@ const PDFReport = ({
           <View style={styles.alignRightRow}>
             <Image
               src={qrcode}
-              style={{
-                width: "80px",
-                height: "80px",
-              }}
+              style={customStyles.qrcode}
             />
           </View>
         </View>
         <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
-       {false && (
+        {false && (
           <View>
             <ProgressBar
               width={200}