trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-05-13 13:17:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: make makeup options on submit form clearer

Browse source
This commit is contained in:
trafficlunar 2026-04-21 19:59:32 +01:00
parent d0fe60067a
commit 9e712530b0
3 changed files with 22 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/src/components/admin/mii-list.tsx
View file

@ -11,7 +11,7 @@ export default async function MiiList({ searchParams }: Props) {
const parsed = searchSchema.safeParse(searchParams); const parsed = searchSchema.safeParse(searchParams);
if (!parsed.success) return <h1>{parsed.error.issues[0].message}</h1>; if (!parsed.success) return <h1>{parsed.error.issues[0].message}</h1>;
const { page = 1, limit = 24 } = parsed.data; const { page = 1, limit = 100 } = parsed.data;
const skip = (page - 1) * limit; const skip = (page - 1) * limit;

2
frontend/src/index.css
View file

@ -20,7 +20,7 @@
} }
#root { #root {
@apply antialiased flex flex-col items-center w-screen h-screen; @apply antialiased flex flex-col items-center w-full min-h-screen;
} }
.pill { .pill {

53
frontend/src/pages/submit.tsx
View file

@ -342,49 +342,26 @@ export default function SubmitPage() {
{/* Makeup (switch only) */} {/* Makeup (switch only) */}
<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}> <div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
<label htmlFor="makeup" className="font-semibold py-2"> <label className="font-semibold py-2">Face Paint</label>
Face Paint
</label>
<div className="col-span-2 flex gap-1"> <div className="col-span-2 flex flex-col gap-1.5">
{/* Full Makeup */} {[
{ value: "FULL", label: "Full", desc: "Most of the face/features are covered", color: "pink" },
{ value: "PARTIAL", label: "Partial", desc: "Small designs that don't cover features, like marks, stickers, etc.", color: "purple" },
{ value: "NONE", label: "None", desc: "No face paint present.", color: "gray" },
].map(({ value, label, desc, color }) => (
<button <button
key={value}
type="button" type="button"
onClick={() => setMakeup("FULL")} onClick={() => setMakeup(value as MiiMakeup)}
aria-label="Full Face Paint" className={`cursor-pointer rounded-xl text-left px-3 py-2 border-2 transition-all ${
data-tooltip="Face covered more than 80%" makeup === value ? `bg-${color}-100 border-${color}-400 shadow-md` : "bg-white border-gray-300 hover:border-gray-400"
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
makeup === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`} }`}
> >
<Icon icon="mdi:palette" className="text-pink-400" /> <div className={`font-medium text-sm ${makeup === value ? `text-${color}-500` : "text-gray-500"}`}>{label}</div>
</button> <div className="text-xs text-gray-500 mt-0.5">{desc}</div>
{/* Partial Makeup */}
<button
type="button"
onClick={() => setMakeup("PARTIAL")}
aria-label="Partial Face Paint"
data-tooltip="For at least any face paint"
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
makeup === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`}
>
<Icon icon="mdi:lipstick" className="text-purple-400" />
</button>
{/* No Makeup */}
<button
type="button"
onClick={() => setMakeup("NONE")}
aria-label="No Face Paint"
data-tooltip="No Face Paint"
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-gray-400! after:border-gray-400! before:border-b-gray-400! ${
makeup === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
}`}
>
<Icon icon="codex:cross" className="text-gray-400" />
</button> </button>
))}
</div> </div>
</div> </div>
@ -503,7 +480,7 @@ export default function SubmitPage() {
<MiiEditor instructions={instructions} /> <MiiEditor instructions={instructions} />
<SwitchSubmitTutorialButton /> <SwitchSubmitTutorialButton />
<span className="text-xs text-zinc-400 text-center px-32 max-sm:px-8"> <span className="text-xs text-zinc-400 text-center px-32 max-sm:px-8">
Mii editor may be inaccurate. Instructions are recommended, but not required - you do not have to add every instruction. Mii editor may be inaccurate. Instructions are REALLY recommended, but you do not have to add every instruction.
</span> </span>
</div> </div>
</div> </div>