edb/oldeneuf
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

even better styling

Browse Source
This commit is contained in:
Jonas Braathen
2025-08-11 23:34:44 +02:00
parent f60cade344
commit 43a99d7e77
5 changed files with 25 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -7,7 +7,7 @@
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "next lint", "lint": "next lint",
"tunnel": "npx cloudflared tunnel --url http://localhost:3000" "tunnel": "npx cloudflared tunnel --url http://localhost:3001"
}, },
"dependencies": { "dependencies": {
"@tanstack/react-query": "^5.84.2", "@tanstack/react-query": "^5.84.2",

2
src/app/globals.css
View File

@@ -29,5 +29,5 @@
body { body {
background: var(--background); background: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: Arial, Helvetica, sans-serif; font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
} }

32
src/app/page.tsx
View File

@@ -28,34 +28,34 @@ function SessionInfo({
}) { }) {
return ( return (
<div className="max-w-md mx-auto mt-2 p-2 bg-neuf-black space-y-4"> <div className="max-w-md mx-auto mt-2 p-2 bg-neuf-black space-y-4">
<div className="flex justify-center"> <div className="flex items-center relative bg-white rounded-lg overflow-hidden">
<button <button
onClick={onClear} onClick={onClear}
className="w-8 h-8 bg-red-600 text-white rounded-full hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center justify-center font-bold text-lg transition-colors duration-200" className="w-10 h-10 absolute top-2 right-2 bg-red-600 text-white rounded-full hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center justify-center font-bold text-lg transition-colors duration-200"
aria-label="Clear session" aria-label="Clear session"
> >
× &times;
</button> </button>
</div>
<div className="flex flex-col items-center">
<Image <Image
src={`data:image/jpeg;base64,${session.documentPhoto}`} src={`data:image/jpeg;base64,${session.documentPhoto}`}
alt="Document" alt="Document"
width={200} width={200}
height={261} height={261}
className="w-40 h-50 object-cover rounded-lg mb-4 border border-black-300 shadow" className="w-40 h-50 object-cover border border-black-300 shadow"
unoptimized unoptimized
/> />
{(session.firstName || session.lastName) && ( <div className="py-4 px-4">
<div className="text-xl font-bold text-white"> {(session.firstName || session.lastName) && (
{[session.firstName, session.lastName].filter(Boolean).join(" ")} <div className="text-xl font-bold">
</div> {[session.firstName, session.lastName].filter(Boolean).join(" ")}
)} </div>
{typeof session.age === "number" && ( )}
<div className="text-3xl font-extrabold text-white mt-2"> {typeof session.age === "number" && (
{session.age} år <div className="text-5xl font-extrabold text-neuf-black mt-2">
</div> {session.age} år
)} </div>
)}
</div>
</div> </div>
</div> </div>
); );

12
src/components/LoginForm.tsx
View File

@@ -37,14 +37,14 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
return ( return (
<div className="max-w-md mx-auto mt-20 p-6 bg-neuf-black"> <div className="max-w-md mx-auto mt-20 p-6 bg-neuf-black">
<h1 className="text-2xl font-bold text-center mb-6 text-white"> <h1 className="text-5xl font-bold text-center mb-20 text-white">
Oldeneuf? Oldeneuf?
</h1> </h1>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div> <div>
<label <label
htmlFor="password" htmlFor="password"
className="block text-sm font-medium text-gray-300 mb-1" className="block text-md font-medium text-gray-300 mb-1"
> >
Passord Passord
</label> </label>
@@ -56,17 +56,15 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
setPassword(e.target.value); setPassword(e.target.value);
setError(""); setError("");
}} }}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full px-3 py-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required required
disabled={isLoading} disabled={isLoading}
/> />
{error && ( {error && <p className="text-red-500 text-md mt-1">{error}</p>}
<p className="text-red-500 text-sm mt-1">{error}</p>
)}
</div> </div>
<button <button
type="submit" type="submit"
className="w-full bg-golden-orange text-neuf-black py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 disabled:opacity-50" className="w-full font-bold bg-golden-orange text-neuf-black py-4 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 disabled:opacity-50"
disabled={isLoading} disabled={isLoading}
> >
{isLoading ? "Logger inn..." : "Logg inn"} {isLoading ? "Logger inn..." : "Logg inn"}

4
src/components/Scanner.tsx
View File

@@ -290,7 +290,7 @@ export default function Scanner({ onScan }: ScannerProps) {
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
margin-top: 0 !important; margin-top: 0 !important;
height: 50vh !important; height: 55dvh !important;
background: #000; background: #000;
border-radius: 0 !important; border-radius: 0 !important;
display: flex; display: flex;
@@ -299,7 +299,7 @@ export default function Scanner({ onScan }: ScannerProps) {
} }
.video-container-responsive video { .video-container-responsive video {
width: 100vw !important; width: 100vw !important;
height: 50vh !important; height: 55dvh !important;
object-fit: cover; object-fit: cover;
border-radius: 0 !important; border-radius: 0 !important;
border: none !important; border: none !important;