From e0a03f00bf06c60f7e873c6a4a878f5b2acafc81 Mon Sep 17 00:00:00 2001
From: Guus <ghligtvoet@gmail.com>
Date: Tue, 12 Aug 2025 23:27:55 +0200
Subject: [PATCH] responsive mobile-voting btns

---
 frontend/src/app/mobile-voting/page.tsx | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/mobile-voting/page.tsx b/frontend/src/app/mobile-voting/page.tsx
index 3b2310c..28f7345 100644
--- a/frontend/src/app/mobile-voting/page.tsx
+++ b/frontend/src/app/mobile-voting/page.tsx
@@ -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>
   );
 }