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

improved settings design

Browse Source
This commit is contained in:
Theis Gaedigk
2026-05-29 22:28:41 +02:00
parent 501f94ab5d
commit 6bacd1c605
2 changed files with 118 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Settings.tsx
+108 -29
View File
@@ -1,4 +1,12 @@
import { Input, Button, CircularProgress } from "@mui/joy";
import {
Input,
Button,
CircularProgress,
Typography,
Sheet,
Chip,
Divider,
} from "@mui/joy";
import { useForm } from "@tanstack/react-form";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import Cookies from "js-cookie";
@@ -44,34 +52,105 @@ export const Settings = () => {
return (
<>
{settingsPending ? (
<CircularProgress />
) : (
<form
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<form.Field name="app-name">
{(field) => (
<Input
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
/>
)}
</form.Field>
<form.Field name="currency">
{(field) => (
<Input
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
/>
)}
</form.Field>
<Button type="submit">{t("submit")}</Button>
</form>
)}
<div className="space-y-6">
<div className="flex flex-wrap items-center gap-3">
<div className="space-y-1">
<Typography level="h2" className="text-slate-900">
{t("settings")}
</Typography>
<Typography level="body-lg" className="text-slate-500">
{t("settings-sub")}
</Typography>
</div>
<Chip
variant="soft"
color="primary"
className="ml-auto rounded-full px-3"
>
{t("preferences")}
</Chip>
</div>
</div>
<Sheet className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
{settingsPending ? (
<div className="flex items-center justify-center py-16">
<CircularProgress size="lg" />
</div>
) : (
<form
className="space-y-6"
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
<div className="space-y-5">
<div className="space-y-1">
<Typography level="title-md" className="text-slate-900">
{t("app-name")}
</Typography>
<Typography level="body-sm" className="text-slate-500">
{t("app-name-sub")}
</Typography>
<form.Field name="app-name">
{(field) => (
<Input
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
size="lg"
variant="outlined"
placeholder="Stockhome"
className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
/>
)}
</form.Field>
</div>
<div className="space-y-1">
<Typography level="title-md" className="text-slate-900">
{t("currency")}
</Typography>
<Typography level="body-sm" className="text-slate-500">
{t("currency-sub")}
</Typography>
<form.Field name="currency">
{(field) => (
<Input
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
size="lg"
variant="outlined"
placeholder="EUR"
className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
/>
)}
</form.Field>
</div>
</div>
<div className="rounded-2xl border border-white/70 bg-linear-to-br from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] p-5 shadow-[0_16px_40px_rgba(12,38,78,0.08)]">
<Typography level="title-lg" className="text-slate-900">
{t("quick-tips")}
</Typography>
<Divider className="my-3" />
<div className="space-y-3 text-md text-slate-600">
<p>{t("quick-tips-1")}</p>
<p>{t("quick-tips-2")}</p>
</div>
</div>
</div>
<div className="flex flex-wrap items-center justify-between gap-3">
<Button
type="submit"
size="lg"
className="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("save")}
</Button>
</div>
</form>
)}
</Sheet>
</>
);
};
frontend/src/utils/i18n/locales/en/en.json
+10 -1
View File
@@ -29,5 +29,14 @@
"amount": "Amount",
"inventory-subtitle": "Here you can inspect all of your stored items.",
"add-product": "Add product",
"add-product-subtitle": "Here you can enter information for a new product."
"add-product-subtitle": "Here you can enter information for a new product.",
"app-name": "App name",
"app-name-sub": "Displayed in the sidebar and login screen.",
"currency": "Currency",
"currency-sub": "Used for pricing across inventory views.",
"quick-tips": "Quick tips",
"quick-tips-1": "Update the app name to personalize the sidebar and login header.",
"quick-tips-2": "Choose a currency code that matches your pricing display, e.g. EUR, CHF, or USD.",
"settings-sub": "Manage your app preferences and store defaults.",
"preferences": "Preferences"
}