theis.gaedigk/stockhome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

added styling to login card

Browse Source
This commit is contained in:
Theis Gaedigk
2026-05-26 17:11:40 +02:00
parent ed9fb0d1ce
commit 56a31bb614
1 changed files with 55 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/LoginCard.tsx
+55 -31
View File
@@ -35,36 +35,60 @@ export const LoginCard = () => {
}); });
return ( return (
<> <div className="flex min-h-screen w-full items-center justify-center bg-[radial-gradient(1200px_circle_at_20%_10%,#e6f2ff_0%,#f7f9fc_40%,#f1f5fb_100%)] px-6 py-10">
<form <div className="mx-auto flex w-full max-w-4xl items-center justify-center">
onSubmit={(e) => { <div className="w-full max-w-md rounded-3xl border border-white/70 bg-white/80 p-8 shadow-[0_24px_60px_rgba(12,38,78,0.18)] backdrop-blur">
e.preventDefault(); <div className="mb-8 space-y-2">
form.handleSubmit(); <p className="text-xs font-semibold uppercase tracking-[0.3em] text-[#0b6bcb]">
}} Stockhome
> </p>
<form.Field name="username"> <h1 className="text-3xl font-semibold text-slate-900">
{(field) => ( {t("login")}
<Input </h1>
value={field.state.value} </div>
onChange={(e) => field.handleChange(e.target.value)} <form
placeholder={t("username")} className="space-y-5"
/> onSubmit={(e) => {
)} e.preventDefault();
</form.Field> form.handleSubmit();
<form.Field name="password"> }}
{(field) => ( >
<Input <form.Field name="username">
value={field.state.value} {(field) => (
type="password" <Input
onChange={(e) => field.handleChange(e.target.value)} value={field.state.value}
placeholder={t("password")} onChange={(e) => field.handleChange(e.target.value)}
/> placeholder={t("username")}
)} variant="outlined"
</form.Field> size="lg"
<Button type="submit" loading={isPending}> className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
{t("login")} />
</Button> )}
</form> </form.Field>
</> <form.Field name="password">
{(field) => (
<Input
value={field.state.value}
type="password"
onChange={(e) => field.handleChange(e.target.value)}
placeholder={t("password")}
variant="outlined"
size="lg"
className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
/>
)}
</form.Field>
<Button
type="submit"
loading={isPending}
size="lg"
className="w-full rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
>
{t("login")}
</Button>
</form>
</div>
</div>
</div>
); );
}; };