From e93b893efdcef6920f555cd3edb36fdfd64a9b36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ludv=C3=ADk=20Prokopec?= <prokolud@fit.cvut.cz>
Date: Thu, 1 Sep 2022 12:05:12 +0200
Subject: [PATCH] Fix checkbox

---
 .../MyComponents/Quiz/answers/CheckBox.svelte        |  2 +-
 .../MyComponents/Quiz/answers/Input.svelte           | 12 +++++++++---
 .../MyComponents/Quiz/answers/Radio.svelte           |  8 +-------
 src/main.scss                                        |  3 +--
 src/routes/quiz.svelte                               |  4 ++--
 vite.config.js                                       |  3 +++
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/lib/Components/MyComponents/Quiz/answers/CheckBox.svelte b/src/lib/Components/MyComponents/Quiz/answers/CheckBox.svelte
index 915ac8a..8ce4a7b 100644
--- a/src/lib/Components/MyComponents/Quiz/answers/CheckBox.svelte
+++ b/src/lib/Components/MyComponents/Quiz/answers/CheckBox.svelte
@@ -11,7 +11,7 @@
 			{id}
 			bind:checked
 			type="checkbox"
-			class="relative w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-blue-600 dark:focus:ring-offset-gray-800 before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200"
+			class="relative w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-[#96ddff] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-[#96ddff] focus:ring-[#96ddff] ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-[var(--blue)] before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-20"
 		/>
 	</div>
 	<label for={id}><slot /></label>
diff --git a/src/lib/Components/MyComponents/Quiz/answers/Input.svelte b/src/lib/Components/MyComponents/Quiz/answers/Input.svelte
index d1b3660..bc4938c 100644
--- a/src/lib/Components/MyComponents/Quiz/answers/Input.svelte
+++ b/src/lib/Components/MyComponents/Quiz/answers/Input.svelte
@@ -15,10 +15,16 @@
 
 <style>
 	input {
+		background-color: rgb(232, 232, 232);
+		color: var(--blue);
 		background: white;
 		border: 4px solid var(--blue);
-		box-shadow: 0 0 4px var(--blue), 0 0 1px var(--blue) inset;
-		border-radius: var(--border-radius);
-		text-align: center;
+		border-radius: 25px;
+		text-align: left;
+		font-size: 30px;
+		font-weight: 600;
+		line-height: 20px;
+		padding: 28px 20px;
+		outline: none;
 	}
 </style>
diff --git a/src/lib/Components/MyComponents/Quiz/answers/Radio.svelte b/src/lib/Components/MyComponents/Quiz/answers/Radio.svelte
index 7acb7cb..4dbbc4e 100644
--- a/src/lib/Components/MyComponents/Quiz/answers/Radio.svelte
+++ b/src/lib/Components/MyComponents/Quiz/answers/Radio.svelte
@@ -8,13 +8,7 @@
 
 <div class="cover h-14 cursor-pointer">
 	<div class="h-14 w-14 flex justify-center items-center">
-		<input
-			{id}
-			bind:group
-			{value}
-			type="radio"
-			class="w-6 h-6 absolute flex justify-center items-center text-red-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-		/>
+		<input {id} bind:group {value} type="radio" class="w-6 h-6 absolute flex justify-center items-center text-red-600 bg-gray-100 border-gray-300" />
 	</div>
 	<label for={id}><slot /></label>
 </div>
diff --git a/src/main.scss b/src/main.scss
index a55ae27..efd9d3c 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -35,7 +35,7 @@ p {
 :root {
 	--quizHeader: 300px;
 	--fontSize: 40px;
-	--blue: rgba(150, 221, 255);
+	--blue: #96ddff;
 	--border-radius: 25px;
 	--grey: rgba(0, 0, 0, 0.4);
 }
@@ -43,4 +43,3 @@ p {
 
 
 @import url("normalize.scss")
-
diff --git a/src/routes/quiz.svelte b/src/routes/quiz.svelte
index fcdd439..1845522 100644
--- a/src/routes/quiz.svelte
+++ b/src/routes/quiz.svelte
@@ -1,5 +1,5 @@
 <script>
-	import TextForm from './Forms/textForm.svelte'
+	import TextForm from './Forms/TextForm.svelte'
 	import NumberForm from './Forms/NumberForm.svelte'
 	import SingleForm from './Forms/SingleForm.svelte'
 	import MultiplyForm from './Forms/MultiplyForm.svelte'
@@ -9,7 +9,7 @@
 	$: console.log(control)
 
 	const answers = {
-		type: 'TextForm',
+		type: 'MultiplyForm',
 		//... answers
 	}
 	const components = {
diff --git a/vite.config.js b/vite.config.js
index fb6bc94..b3a2807 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,6 +5,9 @@ import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+	server: {
+		port: 3003
+	},
 	resolve: {
 		alias: {
 			$lib: path.resolve(__dirname, 'src', 'lib'),