Small fixes

app/components/certificate-refresh.tsx

@@ -24,7 +24,9 @@ export function CertificateRefresh({ certificate }: CertificateRefreshProps) {
 						disabled={fetcher.state !== "idle"}
 					>
 						<RefreshCw
-							className={`h-4 w-4 ${fetcher.state !== "idle" ? "animate-spin" : ""}`}
+							className={
+								fetcher.state !== "idle" ? "animate-spin" : ""
+							}
 						/>
 					</Button>
 				</TooltipTrigger>

app/components/certificate-send-notification.tsx

@@ -20,9 +20,9 @@ export function CertificateSendNotification({
 				variant={wasSent ? "outline" : "default"}
 			>
 				{fetcher.state !== "idle" ? (
-					<LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+					<LoaderCircle className="mr-2 animate-spin" />
 				) : (
-					<SendIcon className="mr-2 h-4 w-4" />
+					<SendIcon className="mr-2" />
 				)}
 				{wasSent ? "Resend" : "Send"}
 			</Button>

app/components/layout-editor.tsx

@@ -466,7 +466,7 @@ function TextBlock({ blockId, settings, fonts, onChangeBlock, onDelete }: any) {
           onChangeBlock(updateBlock);
         }}
       >
-        <PlusIcon className="mr-2 h-4 w-4" /> Add Segment
+        <PlusIcon className="mr-2" /> Add Segment
       </Button>
     </div>
   );
@@ -510,7 +510,7 @@ export function LayoutEditor({ layout, fonts, onChange }: any) {
           onChange(updateLayout);
         }}
       >
-        <PlusIcon className="mr-2 h-4 w-4" /> Add Block
+        <PlusIcon className="mr-2" /> Add Block
       </Button>
     </div>
   );

app/components/task-runner.tsx

@@ -112,18 +112,18 @@ export function TaskRunner({
 			>
 				{isRunning ? (
 					<>
-						<Pause className="mr-2 h-4 w-4" />
+						<Pause className="mr-2" />
 						{pauseLabel ?? "Pause"}
 					</>
 				) : (
 					<>
-						<Play className="mr-2 h-4 w-4" />
+						<Play className="mr-2" />
 						{startLabel ?? "Start"}
 					</>
 				)}
 			</Button>
 			<Button onClick={handleReset} variant="outline">
-				<ListRestart className="mr-2 h-4 w-4" /> Reset
+				<ListRestart className="mr-2" /> Reset
 			</Button>
 			<div className="grow"></div>
 			<div className="text-sm">

app/components/ui/multi-select.tsx

@@ -235,11 +235,11 @@ export const MultiSelect = React.forwardRef<
 													}}
 												>
 													{IconComponent && (
-														<IconComponent className="h-4 w-4 mr-2" />
+														<IconComponent className="mr-2" />
 													)}
 													{option?.label}
 													<XCircle
-														className="ml-2 h-4 w-4 cursor-pointer"
+														className="ml-2 cursor-pointer"
 														onClick={(event) => {
 															event.stopPropagation();
 															toggleOption(value);
@@ -263,9 +263,11 @@ export const MultiSelect = React.forwardRef<
 												animationDuration: `${animation}s`,
 											}}
 										>
-											{`+ ${selectedValues.length - maxCount} more`}
+											{`+ ${
+												selectedValues.length - maxCount
+											} more`}
 											<XCircle
-												className="ml-2 h-4 w-4 cursor-pointer"
+												className="ml-2 cursor-pointer"
 												onClick={(event) => {
 													event.stopPropagation();
 													clearExtraOptions();
@@ -276,7 +278,7 @@ export const MultiSelect = React.forwardRef<
 								</div>
 								<div className="flex items-center justify-between">
 									<XIcon
-										className="h-4 mx-2 cursor-pointer text-muted-foreground"
+										className="mx-2 cursor-pointer text-muted-foreground"
 										onClick={(event) => {
 											event.stopPropagation();
 											handleClear();
@@ -286,15 +288,15 @@ export const MultiSelect = React.forwardRef<
 										orientation="vertical"
 										className="flex min-h-6 h-full"
 									/>
-									<ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
+									<ChevronDown className="mx-2 cursor-pointer text-muted-foreground" />
 								</div>
 							</div>
 						) : (
 							<div className="flex items-center justify-between w-full mx-auto">
 								<span className="text-sm text-muted-foreground mx-3">
 									{placeholder}
 								</span>
-								<ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
+								<ChevronDown className="cursor-pointer text-muted-foreground mx-2" />
 							</div>
 						)}
 					</Button>
@@ -320,10 +322,10 @@ export const MultiSelect = React.forwardRef<
 								>
 									<div
 										className={cn(
-											"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+											"mr-2 flex items-center justify-center rounded-sm border border-primary",
 											selectedValues.length ===
 												options.length
-												? "bg-primary text-primary-foreground"
+												? "bg-input text-input-foreground"
 												: "opacity-50 [&_svg]:invisible",
 										)}
 									>
@@ -345,16 +347,16 @@ export const MultiSelect = React.forwardRef<
 										>
 											<div
 												className={cn(
-													"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+													"mr-2 flex items-center justify-center rounded-sm border border-primary",
 													isSelected
-														? "bg-primary text-primary-foreground"
+														? "bg-input text-input-foreground"
 														: "opacity-50 [&_svg]:invisible",
 												)}
 											>
-												<CheckIcon className="h-4 w-4" />
+												<CheckIcon />
 											</div>
 											{option.icon && (
-												<option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+												<option.icon className="mr-2 text-muted-foreground" />
 											)}
 											<span>{option.label}</span>
 										</CommandItem>

app/lib/organisation.server.ts

@@ -177,5 +177,12 @@ export async function deleteOrganisationLogo(logo: OrganisationLogo) {
 			extension = "unkown";
 	}
 
-	return await unlink(`${logoDir}/_org.${logo.id}.logo.${extension}`);
+	return await unlink(`${logoDir}/_org.${logo.id}.logo.${extension}`).catch(
+		(error) => {
+			console.error(
+				`Encountered the following error when trying to delete the organisation logo file in storage for ID ${logo.id}:`,
+			);
+			console.error(error);
+		},
+	);
 }

app/lib/pdf.server.ts

@@ -441,11 +441,21 @@ export async function duplicateTemplate(
 }
 
 export async function deleteCertificatePreview(certificateId: number) {
-  return await unlink(`${previewDir}/${certificateId}.png`);
+  return await unlink(`${previewDir}/${certificateId}.png`).catch((error) => {
+    console.error(
+      `Encountered the following error when trying to delete the certificate preview file in storage for ID ${certificateId}:`,
+    );
+    console.error(error);
+  });
 }
 
 export async function deleteCertificatePDF(certificateId: number) {
-  return await unlink(`${certDir}/${certificateId}.pdf`);
+  return await unlink(`${certDir}/${certificateId}.pdf`).catch((error) => {
+    console.error(
+      `Encountered the following error when trying to delete the certificate PDF file in storage for ID ${certificateId}:`,
+    );
+    console.error(error);
+  });
 }
 
 export async function deleteCertificate(certificateId: number) {

app/lib/program.server.ts

@@ -130,5 +130,12 @@ export async function deleteProgramLogo(logo: ProgramLogo) {
       extension = "unkown";
   }
 
-  return await unlink(`${logoDir}/${logo.id}.logo.${extension}`);
+  return await unlink(`${logoDir}/${logo.id}.logo.${extension}`).catch(
+    (error) => {
+      console.error(
+        `Encountered the following error when trying to delete the program logo file in storage for ID ${logo.id}:`,
+      );
+      console.error(error);
+    },
+  );
 }

app/lib/social.server.ts

@@ -183,12 +183,31 @@ export async function deleteSocialBackground(social: SocialPreview) {
       extension = "unkown";
   }
 
-  return await unlink(`${socialDir}/${social.id}.background.${extension}`);
+  return await unlink(
+    `${socialDir}/${social.id}.background.${extension}`,
+  ).catch((error) => {
+    console.error(
+      `Encountered the following error when trying to delete the social preview background image file in storage for ID ${social.id}:`,
+    );
+    console.error(error);
+  });
 }
 
 export async function deleteSocialComposites(socialId: number) {
-  await unlink(`${socialDir}/${socialId}.noPhoto.png`);
-  return await unlink(`${socialDir}/${socialId}.withPhoto.png`);
+  await unlink(`${socialDir}/${socialId}.noPhoto.png`).catch((error) => {
+    console.error(
+      `Encountered the following error when trying to delete the social preview without a photo file in storage for ID ${socialId}:`,
+    );
+    console.error(error);
+  });
+  return await unlink(`${socialDir}/${socialId}.withPhoto.png`).catch(
+    (error) => {
+      console.log(
+        `Encountered the following error when trying to delete the social preview with a photo file in storage for ID ${socialId}:`,
+      );
+      console.error(error);
+    },
+  );
 }
 
 export const defaultLayout = {

app/lib/template.server.ts

@@ -9,12 +9,29 @@ const previewDir = resolve(__dirname, "../../storage/previews");
 const templateDir = resolve(__dirname, "../../storage/templates");
 
 export async function deleteTemplatePreview(templateId: number) {
-	return await unlink(`${previewDir}/tpl-${templateId}.png`);
+	return await unlink(`${previewDir}/tpl-${templateId}.png`).catch(
+		(error) => {
+			console.error(
+				`Encountered the following error when trying to delete the template preview image file in storage for ID ${templateId}:`,
+			);
+			console.error(error);
+		},
+	);
 }
 
 export async function deleteTemplatePDF(templateId: number) {
-	await unlink(`${templateDir}/${templateId}.sample.pdf`);
-	return await unlink(`${templateDir}/${templateId}.pdf`);
+	await unlink(`${templateDir}/${templateId}.sample.pdf`).catch((error) => {
+		console.error(
+			`Encountered the following error when trying to delete the template preview sample PDF file in storage for ID ${templateId}:`,
+		);
+		console.error(error);
+	});
+	return await unlink(`${templateDir}/${templateId}.pdf`).catch((error) => {
+		console.error(
+			`Encountered the following error when trying to delete the template PDF file in storage for ID ${templateId}:`,
+		);
+		console.error(error);
+	});
 }
 
 export async function deleteTemplate(templateId: number, programId: number) {

app/lib/typeface.server.ts

@@ -30,7 +30,12 @@ export async function saveTypefaceUpload(
 }
 
 export async function deleteTypefaceTTF(typefaceId: number) {
-  return await unlink(`${typefaceDir}/${typefaceId}.ttf`);
+  return await unlink(`${typefaceDir}/${typefaceId}.ttf`).catch((error) => {
+    console.error(
+      `Encountered the following error when trying to delete the typeface file in storage for ID ${typefaceId}:`,
+    );
+    console.error(error);
+  });
 }
 
 export async function deleteTypeface(typefaceId: number) {

app/lib/user.server.ts

@@ -230,7 +230,14 @@ export async function readPhoto(userPhoto: UserPhoto) {
 }
 
 export async function deleteUserPhoto(userPhoto: UserPhoto) {
-  await unlink(`${userPhotoDir}/${userPhoto.id}.transparent.png`);
+  await unlink(`${userPhotoDir}/${userPhoto.id}.transparent.png`).catch(
+    (error) => {
+      console.error(
+        `Encountered the following error when trying to delete the transparent photo file in storage for UserPhoto ID ${userPhoto.id}:`,
+      );
+      console.error(error);
+    },
+  );
   return await prisma.userPhoto
     .delete({
       where: {

app/routes/org.program.$programId.batch.$batchId.certificates.$certId.edit.tsx

@@ -211,7 +211,7 @@ export default function EditCertificateDialog({
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button type="submit" variant="destructive" size="icon">
-                  <Trash2Icon className="h-4 w-4" />
+                  <Trash2Icon />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="top">

app/routes/org.program.$programId.batch.$batchId.certificates.$certId.preview.tsx

@@ -45,7 +45,7 @@ export default function CertificatePage({ loaderData }: Route.ComponentProps) {
       <div className="flex justify-end">
         <Button variant="outline" size="icon" asChild>
           <Link to="../">
-            <XIcon className="h-4 w-4" />
+            <XIcon />
           </Link>
         </Button>
       </div>

app/routes/org.program.$programId.batch.$batchId.certificates.tsx

@@ -194,7 +194,7 @@ export default function BatchCertificatesPage({
                     </div>
                     <Button variant="outline" asChild>
                       <Link to={`${cert.id}/preview`}>
-                        <Eye className="h-4 w-4" /> Preview
+                        <Eye /> Preview
                       </Link>
                     </Button>
                   </div>

app/routes/org.program.$programId.batch.$batchId.edit.tsx

@@ -129,7 +129,7 @@ export default function EditBatchDialog({ loaderData }: Route.ComponentProps) {
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button type="submit" variant="destructive" size="icon">
-                  <Trash2Icon className="h-4 w-4" />
+                  <Trash2Icon />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="top">Delete this batch</TooltipContent>

app/routes/org.program.$programId.batch.tsx

@@ -131,7 +131,7 @@ export default function BatchPage({
                   to={`${currentBatch.id}/edit`}
                   aria-label="Edit batch settings"
                 >
-                  <Settings className="h-4 w-4" />
+                  <Settings />
                 </Link>
               </Button>
             </TooltipTrigger>

app/routes/org.program.$programId.edit.tsx

@@ -135,7 +135,7 @@ export default function EditBatchDialog({ loaderData }: Route.ComponentProps) {
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button type="submit" variant="destructive" size="icon">
-                  <Trash2Icon className="h-4 w-4" />
+                  <Trash2Icon />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="top">Delete this program</TooltipContent>

app/routes/org.program.$programId.settings.tsx

@@ -173,7 +173,7 @@ export default function ProgramSettings() {
                   className="flex grow"
                 >
                   <Button type="submit" variant="outline">
-                    <Trash2Icon className="h-4 w-4" /> Remove logo
+                    <Trash2Icon /> Remove logo
                   </Button>
                 </Form>
               )}
@@ -191,7 +191,7 @@ export default function ProgramSettings() {
 
         <Form action={`../delete`} method="POST" className="flex grow">
           <Button type="submit" variant="destructive">
-            <Trash2Icon className="h-4 w-4" /> Delete this program
+            <Trash2Icon /> Delete this program
           </Button>
         </Form>
       </section>

app/routes/org.program.$programId.social.tsx

@@ -147,6 +147,7 @@ export default function ProgramSocialPage({
               <input
                 type="file"
                 name="backgroundImage"
+                accept="image/png, image/jpeg"
                 ref={fileRef}
                 hidden
                 onChange={handleFileChanged}

app/routes/org.program.$programId.templates.$templateId.duplicate.tsx

@@ -206,7 +206,7 @@ export default function DuplicateTemplateDialog({
           </Select>
 
           <Label htmlFor="pdf">Replace PDF template</Label>
-          <Input id="pdf" name="pdf" type="file" />
+          <Input id="pdf" name="pdf" type="file" accept="application/pdf" />
         </Form>
         <DialogFooter>
           <Button variant="outline" onClick={() => navigate(-1)}>