mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

responsive mobile-voting btns

Browse Source
This commit is contained in:
Guus
2025-08-12 23:27:55 +02:00
parent 76b084b541
commit e0a03f00bf
1 changed files with 9 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/mobile-voting/page.tsx
+9 -13
View File
@@ -15,42 +15,38 @@ export default function MobileVoting() {
const [yesHighlight, setYesHighlight] = useState(false);
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div></div>
<div className="mb-0 flex flex-row items-center justify-between gap-32 rounded-md bg-blue-950/80 p-16">
<main className="m-3 h-screen rounded bg-blue-950/80 p-8 sm:p-14 md:p-20">
<div className="flex flex-row items-center justify-between gap-8 rounded-md">
<button
className={`flex w-full flex-col items-center gap-2 rounded bg-blue-500/0 p-[0px] text-center font-bold text-white ${noHighlight ? "ring-5 ring-amber-500" : "ring-0"}`}
className={`flex aspect-square w-1/2 max-w-[200px] items-center rounded bg-black/20 p-0 text-center font-bold text-white ${noHighlight ? "ring-5 ring-amber-400" : "ring-0 ring-black/20"}`}
onClick={() => {
setYesHighlight(false);
setNoHighlight(true);
setVote(0);
setVote(0.0);
}}
>
<img
src="https://media.tenor.com/HU0FukwCUH4AAAAm/nono.webp"
alt="icon"
className="h-45 w-45 object-contain"
className="h-full w-full rounded object-contain"
/>
{/*<span>MEH</span>*/}
</button>
<button
className={`flex w-full flex-col items-center gap-2 rounded bg-blue-500/0 p-[0px] text-center font-bold text-white ${yesHighlight ? "ring-5 ring-amber-500" : "ring-0"}`}
className={`flex aspect-square w-1/2 max-w-[200px] items-center rounded bg-black/20 p-0 text-center font-bold text-white ${yesHighlight ? "ring-5 ring-amber-400" : "ring-0 ring-black/20"}`}
onClick={() => {
setYesHighlight(true);
setNoHighlight(false);
setVote(1);
setVote(1.0);
}}
>
<img
src="https://media.tenor.com/wtv7ADhTUD4AAAAm/dance-happy.webp"
alt="icon"
className="h-45 w-45 object-contain"
className="h-full w-full rounded object-contain"
/>
{/*<span>YEAH</span>*/}
</button>
</div>
<div></div>
</main>
);
}