Fix icon in checkbox

HighlanderRobotics · Jun 23, 2024 · 170dcc2 · 170dcc2
1 parent e0f3137
commit 170dcc2
Show file tree

Hide file tree

Showing 4 changed files with 257 additions and 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
@@ -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>