From a2d3b34ea2268f4af3237f291c0bea21b44dfaea Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Thu, 12 Jan 2023 21:13:04 +0100
Subject: [PATCH] feat: formatting & error for mobile code input

---
 .../login/[code=application]/+page.svelte     | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte b/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
index cc06634..128517e 100644
--- a/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
+++ b/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
@@ -6,7 +6,7 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { apiLogin } from '$lib/@api/candidate';
-	import { SvelteToast, toast } from '@zerodevx/svelte-toast'
+	import { SvelteToast, toast } from '@zerodevx/svelte-toast';
 
 	let applicationId = Number($page.params.code);
 	let codeValueMobile: string = '';
@@ -36,7 +36,7 @@
 			}
 		}
 		codeValueMobile = codeValueArray.join('');
-		
+
 		if (codeValueArray.filter((item) => item !== '').length === 12) {
 			await submit();
 		} else {
@@ -44,7 +44,6 @@
 		}
 	};
 
-
 	const submit = async () => {
 		console.log('submitting: ', codeValueArray);
 		try {
@@ -57,8 +56,8 @@
 					'--toastColor': 'mintcream',
 					'--toastBackground': '#b91c1c',
 					'--toastBarBackground': '#7f1d1d'
-				}	
-			})
+				}
+			});
 			isError = true;
 		}
 	};
@@ -94,9 +93,14 @@
 <FullLayout>
 	<div class="modal">
 		<img class="mx-auto" src={woman} alt="" />
-		<SvelteToast></SvelteToast>
+		<SvelteToast />
 		<div class="flex items-center justify-center">
-			<input bind:value={codeValueMobile} type="text" class="codeInputMobile" />
+			<input
+				class:error={isError}
+				bind:value={codeValueMobile}
+				type="text"
+				class="codeInputMobile"
+			/>
 			{#each [1, 2, 3, 4] as value}
 				<input
 					class="codeInputDesktop"
@@ -166,6 +170,6 @@
 	.codeInputDesktop {
 		@apply hidden;
 		@apply mr-1 md:mr-2;
-		@apply sm:h-15 2xl:w-18 2xl:h-22 sm:w-12 sm:text-xl xl:text-2xl md:block md:h-20 md:w-16 md:text-4xl xl:h-20 xl:w-16 xl:p-0;
+		@apply sm:h-15 2xl:w-18 2xl:h-22 sm:w-12 sm:text-xl md:block md:h-20 md:w-16 md:text-4xl xl:h-20 xl:w-16 xl:p-0 xl:text-2xl;
 	}
 </style>