Merge pull request #121 from EETagent/more_prod_fixes

(frontend) more prod fixes

Dockerfile

@@ -10,4 +10,5 @@ COPY --from=builder /portfolio/target/release/portfolio /usr/local/bin/portfolio
 VOLUME ["/portfolio"]
 WORKDIR /portfolio
 
+EXPOSE 8000
 ENTRYPOINT ["portfolio"]

frontend/src/global.d.ts

@@ -1,6 +1,6 @@
-declare type FileDropEvent = import("filedrop-svelte/event").FileDropEvent;
+declare type FileDropEvent = import('filedrop-svelte/event').FileDropEvent;
-declare type FileDropSelectEvent = import("filedrop-svelte/event").FileDropSelectEvent;
+declare type FileDropSelectEvent = import('filedrop-svelte/event').FileDropSelectEvent;
-declare type FileDropDragEvent = import("filedrop-svelte/event").FileDropDragEvent;
+declare type FileDropDragEvent = import('filedrop-svelte/event').FileDropDragEvent;
 declare namespace svelte.JSX {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	interface HTMLAttributes<T> {
@@ -11,8 +11,14 @@ declare namespace svelte.JSX {
 		onfiledialogcancel?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
 		onfiledialogclose?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
 		onfiledialogopen?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
-        onwindowfiledragenter?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
+		onwindowfiledragenter?: (
-        onwindowfiledragleave?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
+			event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
-        onwindowfiledragover?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
+		) => void;
+		onwindowfiledragleave?: (
+			event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
+		) => void;
+		onwindowfiledragover?: (
+			event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
+		) => void;
 	}
 }

frontend/src/lib/@api/admin.ts

@@ -123,9 +123,7 @@ export const apiFetchCandidate = async (id: number, fetchSsr?: Fetch): Promise<C
 
 // SSR compatible
 // List all candidates /admin/list/candidates
-export const apiListCandidatesCSV = async (
+export const apiListCandidatesCSV = async (fetchSsr?: Fetch): Promise<Blob> => {
-	fetchSsr?: Fetch,
-): Promise<Blob> => {
 	const apiFetch = fetchSsr || fetch;
 	try {
 		const res = await apiFetch(API_URL + '/admin/list/candidates_csv', {

frontend/src/lib/components/admin/modal/CreateCandidateModal.svelte

@@ -26,6 +26,7 @@
 		try {
 			login = await apiCreateCandidate(data);
 			dispatch('created');
+			error = '';
 		} catch (e: unknown) {
 			console.error(e);
 			error = (e as ApiError).msg;
@@ -47,7 +48,10 @@
 			{:else}
 				<h1 class="text-sspsBlue text-3xl font-semibold">Registrace nového uchazeče</h1>
 				{#if error}
-					<div class="my-2 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+					<div
+						class="relative my-2 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
+						role="alert"
+					>
 						<span class="block sm:inline">{error}</span>
 					</div>
 				{/if}

frontend/src/lib/components/dashboard/DashboardInfoCard.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
 	import debounce from 'just-debounce-it';
 
-	import { apiDeltePortfolio, apiGetPortfolio, apiLogout, apiSubmitPortfolio } from '$lib/@api/candidate';
+	import {
+		apiDeltePortfolio,
+		apiGetPortfolio,
+		apiLogout,
+		apiSubmitPortfolio
+	} from '$lib/@api/candidate';
 	import Circles from '$lib/components/icons/Circles.svelte';
 	import { fetchSubmProgress, type Status } from '$lib/stores/portfolio';
 	import StatusNotificationBig from './StatusNotificationBig.svelte';
 	import InfoButton from './InfoButton.svelte';
 	import { baseCandidateData, candidateData } from '$lib/stores/candidate';
-	import tippy, {sticky} from 'tippy.js';
+	import tippy, { sticky } from 'tippy.js';
 	import { goto } from '$app/navigation';
 
 	export let title: string;
@@ -61,19 +66,19 @@
 	};
 
 	const editDetails = async () => {
-		goto('/register?edit=true')
+		goto('/register?edit=true');
-	}
+	};
 
 	const logout = async () => {
 		await apiLogout();
-		goto("/auth/login");
+		goto('/auth/login');
-	}
+	};
 </script>
 
 <div class="card flex flex-col">
 	<div class="infoBar <2xl:flex-col flex flex-row-reverse">
 		<StatusNotificationBig {loading} {status} on:click={debounce(handleNotificationClick, 150)} />
-		<div class="mr-4 <2xl:mr-1">
+		<div class="<2xl:mr-1 mr-4">
 			<div on:click on:keydown class="flex flex-col">
 				<div class="<2xl:ml-auto <2xl:flex-row <2xl:my-2 flex flex-col">
 					<InfoButton
@@ -101,15 +106,28 @@
 							sticky: true,
 							plugins: [sticky]
 						}}
-						class="<2xl:hidden hover:cursor-pointer">
+						class="<2xl:hidden hover:cursor-pointer"
-						<svg class="w-10 h-10 stroke-sspsBlueDark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
+					>
+						<svg
+							class="stroke-sspsBlueDark h-10 w-10"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+							><path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+							/></svg
+						>
 					</span>
 				</div>
 				<slot />
 			</div>
 		</div>
 		{#if showDetails}
-			<div class="overflow-scroll flex justify-between">
+			<div class="flex justify-between overflow-scroll">
 				<div>
 					<div
 						use:tippy={{
@@ -121,7 +139,10 @@
 						}}
 						class="mt-4 flex flex-col justify-between leading-10"
 					>
-						<span>Ev. č. přihlášky: <span class="font-bold">{$baseCandidateData.applicationId}</span></span>
+						<span
+							>Ev. č. přihlášky: <span class="font-bold">{$baseCandidateData.applicationId}</span
+							></span
+						>
 						<span>Obor: <span class="font-bold">{$candidateData.candidate.study}</span></span>
 						<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
 						<span
@@ -133,10 +154,12 @@
 							></span
 						>
 						<span
-							>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
+							>Rodné číslo: <span class="font-bold"
+								>{$candidateData.candidate.personalIdNumber}</span
 							></span
 						>
-						<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
+						<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span
+						>
 					</div>
 					<div
 						use:tippy={{
@@ -167,8 +190,23 @@
 						sticky: true,
 						plugins: [sticky]
 					}}
-				 	on:click={(_) => editDetails()} on:keydown={(_) => editDetails()} class="mt-4 hover:cursor-pointer">
+					on:click={(_) => editDetails()}
-					<svg class="w-10 h-10 stroke-sspsBlue" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+					on:keydown={(_) => editDetails()}
+					class="mt-4 hover:cursor-pointer"
+				>
+					<svg
+						class="stroke-sspsBlue h-10 w-10"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+						/></svg
+					>
 				</span>
 			</div>
 		{/if}
@@ -182,7 +220,7 @@
 
 		@apply bg-[#f8fbfc];
 		@apply rounded-3xl;
-		@apply px-7 py-10 <2xl:px-5 <2xl:py-5;
+		@apply <2xl:px-5 <2xl:py-5 px-7 py-10;
 
 		@apply transition-all duration-300;
 	}

frontend/src/lib/components/dashboard/DashboardUploadCard.svelte

@@ -68,7 +68,6 @@
 		clearInterval(dashAnimationInterval);
 	};
 
-
 	const onFileDrop = (dropped: Files) => {
 		console.log(dropped);
 		if (dropped.accepted.length > 0) {

frontend/src/lib/components/dashboard/InfoButton.svelte

@@ -88,8 +88,21 @@
 	}}
 	on:click={(_) => logout()}
 	on:keydown={(_) => logout()}
-	class="icon logoutIcon ml-1 hover:cursor-pointer">
+	class="icon logoutIcon ml-1 hover:cursor-pointer"
-	<svg class="w-10 h-10 icon logoutIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
+>
+	<svg
+		class="icon logoutIcon h-10 w-10"
+		fill="none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		><path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+		/></svg
+	>
 </span>
 
 <style lang="postcss">

frontend/src/lib/components/layout/SplitLayout.svelte

@@ -49,8 +49,7 @@
 	}
 	.view {
 		@apply z-10 overflow-scroll;
-		@apply rounded-3xl md:rounded-none;
+		@apply absolute top-0 right-0 bottom-0 left-0 m-auto md:top-auto md:bottom-auto md:left-auto md:m-0;
-		@apply absolute top-0 right-0 bottom-0 left-0 m-auto h-[90vh] w-[90vw] md:top-auto md:bottom-auto md:left-auto md:m-0;
 		@apply md:h-screen md:w-[50vw];
 		@apply md:my-auto;
 		@apply bg-white;

frontend/src/lib/stores/candidate.ts

@@ -43,7 +43,7 @@ export interface CreateCandidateLogin extends CreateCandidate {
 	password: string;
 }
 
-export const baseCandidateData= writable<CreateCandidate>({
+export const baseCandidateData = writable<CreateCandidate>({
 	applicationId: 0,
 	personalIdNumber: ''
 });

frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte

@@ -8,7 +8,7 @@
 	import type { PageServerData } from './$types';
 	import Table from '$lib/components/admin/table/Table.svelte';
 
-	import bacgkround from "$lib/assets/background.jpg";
+	import bacgkround from '$lib/assets/background.jpg';
 
 	export let data: PageServerData;
 
@@ -87,7 +87,7 @@
 		} catch (e) {
 			console.log(e);
 		}
-	}
+	};
 </script>
 
 {#if createCandidateModal}
@@ -98,8 +98,8 @@
 {/if}
 
 <div>
-	<header class="w-full h-14">
+	<header class="h-14 w-full">
-		<img class="h-12 w-full object-cover filter blur-sm" src={bacgkround} alt="Background">
+		<img class="h-12 w-full object-cover blur-sm filter" src={bacgkround} alt="Background" />
 	</header>
 	<div class="flex flex-row">
 		<div class="list fixed">
@@ -116,12 +116,12 @@
 				<TextField on:keyup={search} bind:value={searchValue} placeholder="Hledat" />
 				<button
 					on:click={openCreateCandidateModal}
-					class="bg-gray-500 hover:bg-gray-600 ml-3 w-2/5 rounded-lg p-3 py-4 text-xl font-semibold text-white transition-colors duration-300"
+					class="ml-3 w-2/5 rounded-lg bg-gray-500 p-3 py-4 text-xl font-semibold text-white transition-colors duration-300 hover:bg-gray-600"
 					>Nový uchazeč</button
 				>
 				<button
 					on:click={downloadCSV}
-					class="bg-gray-500 hover:bg-gray-600 ml-3 w-2/5 rounded-lg p-3 py-4 text-xl font-semibold text-white transition-colors duration-300"
+					class="ml-3 w-2/5 rounded-lg bg-gray-500 p-3 py-4 text-xl font-semibold text-white transition-colors duration-300 hover:bg-gray-600"
 					>CSV</button
 				>
 			</div>

frontend/src/routes/(admin)/admin/auth/login/+page.svelte

@@ -34,7 +34,7 @@
 		<p class="text-sspsGray mt-8 text-center font-light">
 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 		</p>
-		<div class="mt-8 flex w-3/5 flex-col">
+		<div class="mt-8 flex w-4/5 flex-col lg:w-3/5">
 			<span>
 				<TextField bind:value={adminIdValue} placeholder="Admin id" type="number" />
 			</span>
@@ -42,7 +42,7 @@
 				<PasswordField bind:value={adminPasswordValue} placeholder="Heslo" />
 			</span>
 		</div>
-		<div class="mt-8  w-3/5">
+		<div class="mt-8 w-4/5 lg:w-3/5">
 			<Submit value="Odeslat" on:click={login} />
 		</div>
 	</div>

frontend/src/routes/(candidate)/(authenticated)/+layout.server.ts

@@ -12,7 +12,7 @@ export const load: LayoutServerLoad = async ({ cookies, fetch }) => {
 		});
 		return {
 			whoami: whoami
-		}
+		};
 	} else {
 		throw redirect(302, '/auth/logout');
 	}

frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte

@@ -82,7 +82,7 @@
 		{/each}
 	</div>
 	<div class="dashboard dashboardMobile">
-		<div class="name md:my-10 mx-auto w-[90%]">
+		<div class="name mx-auto w-[90%] md:my-10">
 			<DashboardInfoCard
 				status={getUploadStatus($submissionProgress.status)}
 				title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}

frontend/src/routes/(candidate)/(authenticated)/register/+page.server.ts

@@ -9,6 +9,6 @@ export const load: PageServerLoad = async ({ fetch }) => {
 	});
 
 	return {
-		candidate: details,
+		candidate: details
 	};
 };

frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte

@@ -35,7 +35,6 @@
 	export let data: PageData;
 	let details = data.candidate;
 
-
 	const formInitialValues = {
 		gdpr: false,
 		candidate: {
@@ -140,11 +139,10 @@
 	// TODO: validate on admin dashboard, move somewhere
 	// TODO: nefunguje pro lidi nar. pred 1.1.1954 :D
 	const isPersonalIdNumberValid = (personalIdNumber: string): boolean => {
-		const idFmt = personalIdNumber
+		const idFmt = personalIdNumber.split('/').join('');
-			.split('/')
-			.join('');
 
-		const lastDigitCheck = Number(idFmt.slice(0, 9)) % 11 === Number(idFmt.at(-1)) || 
+		const lastDigitCheck =
+			Number(idFmt.slice(0, 9)) % 11 === Number(idFmt.at(-1)) ||
 			Number(idFmt.slice(0, 9)) % 11 === 10; // an edge case that could occur
 		const divisibleBy11 = Number(idFmt) % 11 === 0;
 
@@ -153,25 +151,29 @@
 		} else {
 			return false;
 		}
-	}
+	};
 
-	const isPersonalIdNumberWithBirthdateValid = (personalIdNumber: string, birthdate: string): boolean => {
+	const isPersonalIdNumberWithBirthdateValid = (
+		personalIdNumber: string,
+		birthdate: string
+	): boolean => {
 		const dateFmt = birthdate
 			.split('.')
 			.map((x) => x.padStart(2, '0'))
 			.reverse()
 			.join('')
 			.slice(2);
-		const idFmt = personalIdNumber
+		const idFmt = personalIdNumber.split('/').join('');
-			.split('/')
-			.join('');
 
 		const divisionValid = isPersonalIdNumberValid(personalIdNumber);
 
 		const idMonth = Number(idFmt.slice(2, 4));
 		const dateMonth = Number(dateFmt.slice(2, 4));
-		const monthValid = idMonth === dateMonth || idMonth === dateMonth + 50 || 
+		const monthValid =
-			idMonth === dateMonth + 20 || idMonth === dateMonth + 70;
+			idMonth === dateMonth ||
+			idMonth === dateMonth + 50 ||
+			idMonth === dateMonth + 20 ||
+			idMonth === dateMonth + 70;
 
 		if (
 			idFmt.slice(0, 2) === dateFmt.slice(0, 2) &&
@@ -183,7 +185,6 @@
 		} else {
 			return false;
 		}
-	
 	};
 
 	const onSubmit = async (values: CandidateData) => {
@@ -192,7 +193,12 @@
 			let oldValues = JSON.parse(JSON.stringify(values));
 			try {
 				if (values.candidate.citizenship === 'Česká republika') {
-					if (!isPersonalIdNumberWithBirthdateValid(values.candidate.personalIdNumber, values.candidate.birthdate)) {
+					if (
+						!isPersonalIdNumberWithBirthdateValid(
+							values.candidate.personalIdNumber,
+							values.candidate.birthdate
+						)
+					) {
 						alert('Rodné číslo neodpovídá oficiální specifikaci či datumu narození'); // TODO: alerts
 						throw new Error('Rodné číslo neodpovídá datumu narození');
 					}
@@ -212,7 +218,6 @@
 					(x) => x.name !== '' && x.surname !== '' && x.email !== '' && x.telephone !== ''
 				);
 
-
 				await apiFillDetails(values);
 				goto('/dashboard');
 			} catch (e) {
@@ -220,7 +225,7 @@
 				console.error('error while submitting data: ' + e);
 			}
 		}
-	}
+	};
 
 	const { form, errors, handleSubmit, handleChange } = createForm({
 		initialValues: formInitialValues,
@@ -292,19 +297,16 @@
 	};
 
 	const formatTelephone = (telephone: string) => {
-		return '+' + telephone
+		return '+' + telephone.match(/[0-9]{1,3}/g)!.join(' ');
-			.match(/[0-9]{1,3}/g)!
+	};
-			.join(' ');
-	}
 
 	if (details !== undefined) {
-		details.candidate.birthdate = details.candidate.birthdate
+		details.candidate.birthdate = details.candidate.birthdate.split('-').reverse().join('.');
-			.split('-')
-			.reverse()
-			.join('.');
 
 		details.candidate.telephone = formatTelephone(details.candidate.telephone);
-			details.parents.map((x) => x.telephone = x.telephone != '' ? formatTelephone(x.telephone) : '');
+		details.parents.map(
+			(x) => (x.telephone = x.telephone != '' ? formatTelephone(x.telephone) : '')
+		);
 		form.set({
 			gdpr: true,
 			candidate: {
@@ -315,34 +317,34 @@
 					...details.parents[0]
 				},
 				{
-					...details.parents[1] ?? {
+					...(details.parents[1] ?? {
 						name: '',
 						surname: '',
 						email: '',
 						telephone: ''
-					}
+					})
 				}
 			]
 		});
 		pageIndex = 1; // skip gdpr page
-		pageTexts[1] = 'Úprava osobních údajů'
+		pageTexts[1] = 'Úprava osobních údajů';
 	}
-
 </script>
 
 <SplitLayout>
 	<div class="form relative">
-		<div class="overflow-scroll h-[65%] md:h-auto absolute bottom-3/12 flex flex-col w-full">
+		<div class="bottom-3/12 absolute flex w-full flex-col overflow-scroll md:h-auto">
-			<div class="h-32 w-32 <md:hidden self-center mb-4">
+			<div class="<md:h-24 <md:w-24 mb-4 h-32 w-32 self-center">
 				<SchoolBadge />
 			</div>
-		<form on:submit={handleSubmit} id="triggerForm" class="invisible hidden"></form>
+			<form on:submit={handleSubmit} id="triggerForm" class="invisible hidden" />
 			{#if pageIndex === 0}
 				<form on:submit={handleSubmit}>
 					<h1 class="title mt-8">{pageTexts[0]}</h1>
 					<p class="description mt-8 block text-center">
-					V rámci portálu pro přijímací řízení zpracováváme mnoho osobních údajů. Proto je nutný Váš
+						V rámci portálu pro přijímací řízení zpracováváme mnoho osobních údajů. Proto je nutný
-					souhlas s jejich zpracováním. O bezpečnosti zpracování Vašich osobních údajů si můžete přečíst
+						Váš souhlas s jejich zpracováním. O bezpečnosti zpracování Vašich osobních údajů si
+						můžete přečíst
 						<a href="/bezpecnost" class="text-sspsBlue underline"> zde</a>.
 					</p>
 					<div class="field">
@@ -508,7 +510,8 @@
 			{:else if pageIndex === 5}
 				<h1 class="title mt-8">{pageTexts[5]}</h1>
 				<p class="description mt-8 block text-center">
-				Zadejte prosím své občanství, rodné číslo, či jeho alternativu Vaší země a obor na který se hlásíte. 
+					Zadejte prosím své občanství, rodné číslo, či jeho alternativu Vaší země a obor na který
+					se hlásíte.
 				</p>
 				<div class="flex w-full flex-row md:flex-col">
 					<span class="field">
@@ -521,7 +524,11 @@
 						/>
 					</span>
 					<span class="field ml-2 md:ml-0">
-					<TextField on:change={handleChange} type="text" placeholder="Evidenční číslo přihlášky" />
+						<TextField
+							on:change={handleChange}
+							type="text"
+							placeholder="Evidenční číslo přihlášky"
+						/>
 					</span>
 				</div>
 				<div class="field flex items-center justify-center">
@@ -552,7 +559,7 @@
 				</div>
 			{/if}
 		</div>
-		<div class="controls w-full absolute bottom-1/12">
+		<div class="controls bottom-1/12 absolute w-full">
 			<div class="field">
 				<Submit
 					on:click={async (e) => {
@@ -570,7 +577,7 @@
 				/>
 			</div>
 
-			<div class="mt-4 md:mt-8 flex flex-row justify-center">
+			<div class="mt-4 flex flex-row justify-center md:mt-8">
 				{#each Array(pageCount + 1) as _, i}
 					<button
 						class:dotActive={i === pageIndex}
@@ -594,7 +601,7 @@
 
 <style lang="postcss">
 	.field {
-		@apply mt-4 md:mt-8 w-full;
+		@apply mt-4 w-full md:mt-8 lg:mx-auto lg:w-4/5;
 	}
 	.form {
 		@apply flex flex-col;
@@ -618,6 +625,6 @@
 		@apply text-gray-500;
 	}
 	.title {
-		@apply text-sspsBlue text-4xl font-semibold text-center;
+		@apply text-sspsBlue text-center text-4xl font-semibold;
 	}
 </style>

frontend/src/routes/(candidate)/auth/login/+page.svelte

@@ -21,12 +21,13 @@
 		<SchoolBadge />
 		<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Přihlášení</h1>
 		<p class="text-sspsGray my-8 text-center font-light">
-			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
+			Evidenční číslo je jedinečné číslo přidělené uchazeči, které slouží k jeho identifikaci<br /> a
+			přihlášení se do systému.
 		</p>
-		<div class="w-3/5">
+		<div class="w-4/5 lg:w-3/5">
 			<TextField bind:value={applicationValue} placeholder="Ev. číslo" type="number" />
 		</div>
-		<div class="mt-8 w-3/5">
+		<div class="mt-8 w-4/5 lg:w-3/5">
 			<Submit on:click={redirectToCode} value="Odeslat" />
 		</div>
 	</div>

frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte

@@ -123,14 +123,14 @@
 	.modal {
 		@apply flex flex-col items-center justify-center;
 		@apply mx-auto my-auto;
-		@apply h-[90vh] w-[90vw] md:h-4/5 md:w-4/5;
+		@apply h-full w-full md:h-4/5 md:w-4/5;
-		@apply rounded-3xl;
+		@apply md:rounded-3xl;
 		@apply bg-white;
 	}
 	input {
 		@apply text-sspsBlue text-center font-semibold;
 		@apply transition-colors duration-300;
-		@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 md:caret-transparent shadow-lg outline-none;
+		@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 shadow-lg outline-none md:caret-transparent;
 	}
 	.separater {
 		@apply bg-sspsBlue mr-2 hidden h-2 w-8 md:block;

frontend/src/routes/+page.svelte

@@ -1,2 +0,0 @@
-<h1 class="text-6xl">Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>