♻️ refactored code

frontend/src/components/form/answerbox/AnswerBox.svelte

@@ -0,0 +1,18 @@
+<script>
+    import UserFormInput from "../../userform/UserFormInput.svelte";
+</script>
+
+<div class="flex flex-col">
+    <div class="flex flex-col gap-2 mb-6">
+        <h1 class="text-xl text-primary font-bold text-center">Svar 2:</h1>
+        <div class="bg-secondary p-6 rounded-xl text-sm">
+            Hei,
+            Nye symptomer som utslett etter påbegynt skabbehandling er ikke uvanlig og betyr ikke nødvendigvis at behandlingen har feilet. Dette skyldes ofte kroppens reaksjon på skabbmiddene og behandlingen. Det er viktig å gjennomføre den andre kuren som planlagt. Vær oppmerksom på at kløe og utslett kan vedvare i opptil fire uker etter siste behandling, selv når behandlingen har vært effektiv. Hvis du opplever nye utslett mer enn fire uker etter behandlingens slutt, anbefales det å kontakte lege for en videre vurdering.
+        </div>
+    </div>
+    <div class="flex flex-col justify-start items-center gap-6">
+        <UserFormInput inputType="radio" label="Kunnskap" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+        <UserFormInput inputType="radio" label="Empati" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+        <UserFormInput inputType="radio" label="Hjelpsomhet" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+    </div>
+</div>

frontend/src/components/form/footer/Footer.svelte

@@ -0,0 +1,20 @@
+<script>
+	import ArrowChevron from "../../svg/ArrowChevron.svelte";
+    import ButtonComponent from "../../userform/inputs/ButtonComponent.svelte";
+</script>
+
+<div class="flex justify-center items-center gap-8">
+    <a href="/">
+        <button class="flex items-center gap-2 text-primary font-semibold">
+            <ArrowChevron width=16 direction="left"/>
+            Forrige spørsmål
+        </button>
+    </a>
+    <ButtonComponent text="Send inn svar" url="/" filled={true} />
+    <a href="/">
+        <button class="flex items-center gap-2 text-primary font-semibold opacity-50">
+            Neste spørsmål
+            <ArrowChevron width=16 direction="right"/>
+        </button>
+    </a>
+</div>

frontend/src/components/form/header/FormHeader.svelte

@@ -0,0 +1,17 @@
+<script>
+    import CircleExclamation from "../../../components/svg/CircleExclamation.svelte";
+</script>
+
+<div class="flex justify-center items-center h-20">
+    <div class="w-1/3"/>
+    <div class="flex justify-center items-center w-2/3 gap-4">
+        <h1 class="text-xl text-primary font-bold text-center">Spørsmål 3</h1>
+        <div class="border-r-2 border-primary h-24"></div>
+        <p class="text-sm">Hvis man begynner skabbehandling før man har fått symptomer, men får symptomer iløpet av den uka før man skal smøre seg igjen etter 7 dager, har da ikke første smøringen virket?</p>
+    </div>
+    <div class="flex justify-end pr-20 items-center w-1/3">
+        <a class="-" href="/errorreport">
+            <CircleExclamation width="16" height="16" />    
+        </a>
+    </div>
+</div>

frontend/src/components/userform/inputs/ButtonComponent.svelte

@@ -1,9 +1,9 @@
-<script>
-    export let text;
-    export let url;
+<script lang="ts">
+    export let text: string;
+    export let url: string;
     export let filled = false;
 
-    let style;
+    let style:string;
 
     if (!filled) {
         style = "text-primary font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-primary hover:text-bg";

frontend/src/components/userform/inputs/RadioButtons.svelte

@@ -4,7 +4,7 @@
 
 <div class="flex justify-between w-full">
 {#each options as data, index (data)}
-    <div class="flex flex-col justify-start items-center  w-12 text-center">
+    <div class="flex flex-col justify-start items-center w-12 text-center">
         <button name={data} class="h-6 w-6 rounded-full border-2 border-primary hover:bg-primary"></button>
         <label class="text-primary text-sm mt-1" for={data}>{data}</label>
     </div>