From 170dcc2a434ae113d4b21f2832921b16ead937ee Mon Sep 17 00:00:00 2001
From: MangoSwirl <collin.camerono@gmail.com>
Date: Sun, 23 Jun 2024 12:34:17 -0700
Subject: [PATCH] Fix icon in checkbox

---
 .../+page.svelte                              | 186 +++++++++---------
 .../quizzes/safety-quiz/+page.svelte          | 186 +++++++++---------
 src/routes/tools/people/AddPersonForm.svelte  | 113 +++++------
 .../tools/people/[id]/ProfileCard.svelte      |   6 +-
 4 files changed, 257 insertions(+), 234 deletions(-)

diff --git a/src/routes/tools/lab-certification/quizzes/lab-layout-emergency-preparedness/+page.svelte b/src/routes/tools/lab-certification/quizzes/lab-layout-emergency-preparedness/+page.svelte
index 1705ac1..89e0909 100644
--- a/src/routes/tools/lab-certification/quizzes/lab-layout-emergency-preparedness/+page.svelte
+++ b/src/routes/tools/lab-certification/quizzes/lab-layout-emergency-preparedness/+page.svelte
@@ -1,104 +1,108 @@
 <script lang="ts">
-	import { enhance } from "$app/forms";
-	import { Button, Select, TextField } from "magnolia-ui-svelte";
-    import { page } from "$app/stores";
+	import { enhance } from '$app/forms';
+	import { Button, Select, TextField } from 'magnolia-ui-svelte';
+	import { page } from '$app/stores';
 
-    import type { PageData } from "./$types";
-	import { QuestionType } from "$lib/util/lab-certification/quizzes";
+	import type { PageData } from './$types';
+	import { QuestionType } from '$lib/util/lab-certification/quizzes';
 
-    export let data: PageData;
+	export let data: PageData;
 
-    let loading = false;
+	let loading = false;
 </script>
 
 <svelte:head>
-    <title>Lab Layout/Emergency Preparedness Quiz</title>
+	<title>Lab Layout/Emergency Preparedness Quiz</title>
 </svelte:head>
 
 <div class="main">
-    <h1>Lab Layout/Emergency Preparedness Quiz</h1>
-    <form method="post" use:enhance on:submit={() => loading = true}>
-        {#if !$page.data.session?.user}
-            <div class="field">
-                <label class="label" for="email">Email address</label>
-                <TextField type="email" id="email" name="email" required />
-            </div>
-        {/if}
-
-        {#each data.questions as question}
-            <div class="field">
-                {#if question.type === QuestionType.SINGLE_SELECT}
-                    <label class="label" for={question.id}>{question.readableName}</label>
-                    <Select
-                        id={question.id}
-                        name={question.id}
-                        placeholder="Select an option"
-                        required
-                        items={Object.entries(question.answers).map(([value, label]) => ({ value, label }))}
-                    />
-                {:else if question.type === QuestionType.MULTI_SELECT}
-                    <div class="label">{question.readableName}</div>
-                    <div class="options">
-                        {#each Object.entries(question.answers) as [value, label]}
-                            <div class="option">
-                                <input type="checkbox" id={question.id + "__" + value} name={question.id + "__" + value} />
-                                <label for={question.id + "__" + value}>{label}</label>
-                            </div>
-                        {/each}
-                    </div>
-                {/if}
-            </div>
-        {/each}
-
-        <div class="submit-button">
-            <Button type="submit" disabled={loading}>Submit</Button>
-        </div>
-    </form>
+	<h1>Lab Layout/Emergency Preparedness Quiz</h1>
+	<form method="post" use:enhance on:submit={() => (loading = true)}>
+		{#if !$page.data.session?.user}
+			<div class="field">
+				<label class="label" for="email">Email address</label>
+				<TextField type="email" id="email" name="email" required />
+			</div>
+		{/if}
+
+		{#each data.questions as question}
+			<div class="field">
+				{#if question.type === QuestionType.SINGLE_SELECT}
+					<label class="label" for={question.id}>{question.readableName}</label>
+					<Select
+						id={question.id}
+						name={question.id}
+						placeholder="Select an option"
+						required
+						items={Object.entries(question.answers).map(([value, label]) => ({ value, label }))}
+					/>
+				{:else if question.type === QuestionType.MULTI_SELECT}
+					<div class="label">{question.readableName}</div>
+					<div class="options">
+						{#each Object.entries(question.answers) as [value, label]}
+							<div class="option">
+								<input
+									type="checkbox"
+									id={question.id + '__' + value}
+									name={question.id + '__' + value}
+								/>
+								<label for={question.id + '__' + value}>{label}</label>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/each}
+
+		<div class="submit-button">
+			<Button type="submit" disabled={loading}>Submit</Button>
+		</div>
+	</form>
 </div>
 
 <style>
-    .main {
-        max-width: 600px;
-        margin: 0 auto;
-        padding: 0 20px;
-    }
-
-    form {
-        padding-bottom: 200px;
-    }
-
-    .submit-button {
-        padding-top: 40px;
-        display: flex;
-        justify-content: flex-end;
-    }
-
-    .field {
-        margin-bottom: 20px;
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        gap: 7px;
-    }
-
-    .label {
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-
-        margin-top: 14px;
-    }
-
-    .option {
-        display: flex;
-        align-items: center;
-        gap: 7px;
-
-        margin-bottom: 7px;
-    }
-
-    input[type='checkbox'] {
+	.main {
+		max-width: 600px;
+		margin: 0 auto;
+		padding: 0 20px;
+	}
+
+	form {
+		padding-bottom: 200px;
+	}
+
+	.submit-button {
+		padding-top: 40px;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.field {
+		margin-bottom: 20px;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 7px;
+	}
+
+	.label {
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+
+		margin-top: 14px;
+	}
+
+	.option {
+		display: flex;
+		align-items: center;
+		gap: 7px;
+
+		margin-bottom: 7px;
+	}
+
+	input[type='checkbox'] {
 		appearance: none;
 		border: 2px solid var(--light-gray);
 		background-color: var(--secondary-container);
@@ -117,7 +121,7 @@
 	input[type='checkbox']:checked::after {
 		content: 'check';
 		color: var(--secondary-container);
-		font-family: 'Material Symbols Rounded';
+		font-family: 'Material Symbols Rounded Reduced';
 		font-variation-settings: 'opsz' 22, 'GRAD' 100;
 		font-size: 22px;
 
@@ -126,4 +130,8 @@
 		left: 50%;
 		transform: translate(-50%, -50%) scaleX(0.8);
 	}
+
+	:global(.fullIconsWillLoad) input[type='checkbox']:checked::after {
+		font-family: 'Material Symbols Rounded Full';
+	}
 </style>
diff --git a/src/routes/tools/lab-certification/quizzes/safety-quiz/+page.svelte b/src/routes/tools/lab-certification/quizzes/safety-quiz/+page.svelte
index aa2dcf6..2c9d9f1 100644
--- a/src/routes/tools/lab-certification/quizzes/safety-quiz/+page.svelte
+++ b/src/routes/tools/lab-certification/quizzes/safety-quiz/+page.svelte
@@ -1,104 +1,108 @@
 <script lang="ts">
-	import { enhance } from "$app/forms";
-	import { Button, Select, TextField } from "magnolia-ui-svelte";
-    import { page } from "$app/stores";
+	import { enhance } from '$app/forms';
+	import { Button, Select, TextField } from 'magnolia-ui-svelte';
+	import { page } from '$app/stores';
 
-    import type { PageData } from "./$types";
-	import { QuestionType } from "$lib/util/lab-certification/quizzes";
+	import type { PageData } from './$types';
+	import { QuestionType } from '$lib/util/lab-certification/quizzes';
 
-    export let data: PageData;
+	export let data: PageData;
 
-    let loading = false;
+	let loading = false;
 </script>
 
 <svelte:head>
-    <title>Safety Quiz</title>
+	<title>Safety Quiz</title>
 </svelte:head>
 
 <div class="main">
-    <h1>Safety Quiz</h1>
-    <form method="post" use:enhance on:submit={() => loading = true}>
-        {#if !$page.data.session?.user}
-            <div class="field">
-                <label class="label" for="email">Email address</label>
-                <TextField type="email" id="email" name="email" required />
-            </div>
-        {/if}
-
-        {#each data.questions as question}
-            <div class="field">
-                {#if question.type === QuestionType.SINGLE_SELECT}
-                    <label class="label" for={question.id}>{question.readableName}</label>
-                    <Select
-                        id={question.id}
-                        name={question.id}
-                        placeholder="Select an option"
-                        required
-                        items={Object.entries(question.answers).map(([value, label]) => ({ value, label }))}
-                    />
-                {:else if question.type === QuestionType.MULTI_SELECT}
-                    <div class="label">{question.readableName}</div>
-                    <div class="options">
-                        {#each Object.entries(question.answers) as [value, label]}
-                            <div class="option">
-                                <input type="checkbox" id={question.id + "__" + value} name={question.id + "__" + value} />
-                                <label for={question.id + "__" + value}>{label}</label>
-                            </div>
-                        {/each}
-                    </div>
-                {/if}
-            </div>
-        {/each}
-
-        <div class="submit-button">
-            <Button type="submit" disabled={loading}>Submit</Button>
-        </div>
-    </form>
+	<h1>Safety Quiz</h1>
+	<form method="post" use:enhance on:submit={() => (loading = true)}>
+		{#if !$page.data.session?.user}
+			<div class="field">
+				<label class="label" for="email">Email address</label>
+				<TextField type="email" id="email" name="email" required />
+			</div>
+		{/if}
+
+		{#each data.questions as question}
+			<div class="field">
+				{#if question.type === QuestionType.SINGLE_SELECT}
+					<label class="label" for={question.id}>{question.readableName}</label>
+					<Select
+						id={question.id}
+						name={question.id}
+						placeholder="Select an option"
+						required
+						items={Object.entries(question.answers).map(([value, label]) => ({ value, label }))}
+					/>
+				{:else if question.type === QuestionType.MULTI_SELECT}
+					<div class="label">{question.readableName}</div>
+					<div class="options">
+						{#each Object.entries(question.answers) as [value, label]}
+							<div class="option">
+								<input
+									type="checkbox"
+									id={question.id + '__' + value}
+									name={question.id + '__' + value}
+								/>
+								<label for={question.id + '__' + value}>{label}</label>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/each}
+
+		<div class="submit-button">
+			<Button type="submit" disabled={loading}>Submit</Button>
+		</div>
+	</form>
 </div>
 
 <style>
-    .main {
-        max-width: 600px;
-        margin: 0 auto;
-        padding: 0 20px;
-    }
-
-    form {
-        padding-bottom: 200px;
-    }
-
-    .submit-button {
-        padding-top: 40px;
-        display: flex;
-        justify-content: flex-end;
-    }
-
-    .field {
-        margin-bottom: 20px;
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        gap: 7px;
-    }
-
-    .label {
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-
-        margin-top: 14px;
-    }
-
-    .option {
-        display: flex;
-        align-items: center;
-        gap: 7px;
-
-        margin-bottom: 7px;
-    }
-
-    input[type='checkbox'] {
+	.main {
+		max-width: 600px;
+		margin: 0 auto;
+		padding: 0 20px;
+	}
+
+	form {
+		padding-bottom: 200px;
+	}
+
+	.submit-button {
+		padding-top: 40px;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.field {
+		margin-bottom: 20px;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 7px;
+	}
+
+	.label {
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+
+		margin-top: 14px;
+	}
+
+	.option {
+		display: flex;
+		align-items: center;
+		gap: 7px;
+
+		margin-bottom: 7px;
+	}
+
+	input[type='checkbox'] {
 		appearance: none;
 		border: 2px solid var(--light-gray);
 		background-color: var(--secondary-container);
@@ -117,7 +121,7 @@
 	input[type='checkbox']:checked::after {
 		content: 'check';
 		color: var(--secondary-container);
-		font-family: 'Material Symbols Rounded';
+		font-family: 'Material Symbols Rounded Reduced';
 		font-variation-settings: 'opsz' 22, 'GRAD' 100;
 		font-size: 22px;
 
@@ -126,4 +130,8 @@
 		left: 50%;
 		transform: translate(-50%, -50%) scaleX(0.8);
 	}
+
+	:global(.fullIconsWillLoad) input[type='checkbox']:checked::after {
+		font-family: 'Material Symbols Rounded Full';
+	}
 </style>
diff --git a/src/routes/tools/people/AddPersonForm.svelte b/src/routes/tools/people/AddPersonForm.svelte
index 4d2d447..64e19d0 100644
--- a/src/routes/tools/people/AddPersonForm.svelte
+++ b/src/routes/tools/people/AddPersonForm.svelte
@@ -7,65 +7,65 @@
 	import { Button, Dialog, TextField, Select } from 'magnolia-ui-svelte';
 	import { createEventDispatcher } from 'svelte';
 
-    export let showCancel = false;
+	export let showCancel = false;
 
-    const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-    function onSuccess() {
-        dispatch('success');
-    }
+	function onSuccess() {
+		dispatch('success');
+	}
 
-    function onCancel() {
-        dispatch('cancel');
-    }
+	function onCancel() {
+		dispatch('cancel');
+	}
 </script>
 
 <h2>Add a person</h2>
-	<form
-		method="POST"
-		action="/tools/people?/addPerson"
-		use:enhance={() => {
-            console.log('ay')
-			return async ({ result, update }) => {
-				if (result.type === 'success') {
-                    onSuccess();
-				}
-
-				update();
-			};
-		}}
-	>
-		<label for="name">Name</label>
-		<TextField id="name" name="name" required />
-		<label for="email">Email</label>
-		<TextField
-			id="email"
-			name="email"
-			type="email"
-			required
-			errorMessage={$page.form?.field === 'email' ? $page.form?.message : null}
-		/>
-		<label for="role">Role</label>
-		<Select
-			id="role"
-			name="role"
-			required
-			items={roles.map((role) => ({
-				label: localizedRole(role),
-				value: role
-			}))}
-		/>
-		<div class="labeled-selectable">
-			<input type="checkbox" id="teamAffiliated" name="teamAffiliated" />
-			<label for="teamAffiliated">Affiliated with 8033</label>
-		</div>
-		<div class="actions">
-            {#if showCancel}
-                <Button type="button" variant="secondary" on:click={onCancel}>Cancel</Button>
-            {/if}
-			<Button>Add</Button>
-		</div>
-	</form>
+<form
+	method="POST"
+	action="/tools/people?/addPerson"
+	use:enhance={() => {
+		console.log('ay');
+		return async ({ result, update }) => {
+			if (result.type === 'success') {
+				onSuccess();
+			}
+
+			update();
+		};
+	}}
+>
+	<label for="name">Name</label>
+	<TextField id="name" name="name" required />
+	<label for="email">Email</label>
+	<TextField
+		id="email"
+		name="email"
+		type="email"
+		required
+		errorMessage={$page.form?.field === 'email' ? $page.form?.message : null}
+	/>
+	<label for="role">Role</label>
+	<Select
+		id="role"
+		name="role"
+		required
+		items={roles.map((role) => ({
+			label: localizedRole(role),
+			value: role
+		}))}
+	/>
+	<div class="labeled-selectable">
+		<input type="checkbox" id="teamAffiliated" name="teamAffiliated" />
+		<label for="teamAffiliated">Affiliated with 8033</label>
+	</div>
+	<div class="actions">
+		{#if showCancel}
+			<Button type="button" variant="secondary" on:click={onCancel}>Cancel</Button>
+		{/if}
+		<Button>Add</Button>
+	</div>
+</form>
 
 <style>
 	form {
@@ -114,7 +114,7 @@
 	input[type='checkbox']:checked::after {
 		content: 'check';
 		color: var(--secondary-container);
-		font-family: 'Material Symbols Rounded';
+		font-family: 'Material Symbols Rounded Reduced';
 		font-variation-settings: 'opsz' 22, 'GRAD' 100;
 		font-size: 22px;
 
@@ -124,6 +124,10 @@
 		transform: translate(-50%, -50%) scaleX(0.8);
 	}
 
+	:global(.fullIconsWillLoad) input[type='checkbox']:checked::after {
+		font-family: 'Material Symbols Rounded Full';
+	}
+
 	.actions {
 		display: flex;
 		justify-content: end;
@@ -131,4 +135,3 @@
 		margin-top: 19px;
 	}
 </style>
-
diff --git a/src/routes/tools/people/[id]/ProfileCard.svelte b/src/routes/tools/people/[id]/ProfileCard.svelte
index 0d9dab8..f70fe0b 100644
--- a/src/routes/tools/people/[id]/ProfileCard.svelte
+++ b/src/routes/tools/people/[id]/ProfileCard.svelte
@@ -222,7 +222,7 @@
 	input[type='checkbox']:checked::after {
 		content: 'check';
 		color: var(--secondary-container);
-		font-family: 'Material Symbols Rounded';
+		font-family: 'Material Symbols Rounded Reduced';
 		font-variation-settings: 'opsz' 22, 'GRAD' 100;
 		font-size: 22px;
 
@@ -232,6 +232,10 @@
 		transform: translate(-50%, -50%) scaleX(0.8);
 	}
 
+	:global(.fullIconsWillLoad) input[type='checkbox']:checked::after {
+		font-family: 'Material Symbols Rounded Full';
+	}
+
 	.error {
 		color: var(--danger);
 		margin-top: 14px;