little ui improvements

DiogoDoreto · Apr 7, 2024 · 70d0a13 · 70d0a13
1 parent 6ee989f
commit 70d0a13
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/app/components/ui.tsx b/app/components/ui.tsx
@@ -2,17 +2,26 @@ interface RadioButtonProps {
   name: string;
   value: string;
   checked: boolean;
+  className?: string;
   onChange: () => void;
 }
 
 export function RadioButton({
   name,
   value,
   checked,
+  className,
   onChange,
 }: RadioButtonProps) {
   return (
-    <label className="has-[:checked]:bg-green hover:bg-green cursor-pointer px-2 rounded">
+    <label
+      className={[
+        className,
+        "bg-royal has-[:checked]:bg-green hover:bg-green cursor-pointer rounded flex items-center justify-center",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
       {value}
       <input
         type="radio"

diff --git a/app/page.tsx b/app/page.tsx
@@ -25,7 +25,7 @@ export default function Home() {
   }, []);
 
   return (
-    <main className="bg-marine flex min-h-screen flex-col items-center justify-between p-12">
+    <main className="bg-marine flex min-h-screen flex-col items-center justify-between">
       <svg viewBox="0 0 1250 1500" style={{ maxHeight: "calc(100vh - 200px)" }}>
         <g transform="translate(175,-700)">
           <SvgCourt />
@@ -35,26 +35,28 @@ export default function Home() {
         </g>
       </svg>
 
-      <div className="w-full flex flex-col gap-4">
-        <div className="flex justify-between">
+      <div className="w-full flex flex-col gap-4 p-6">
+        <div className="flex gap-2 items-stretch h-10">
           {AllRotations.map((value) => (
             <RadioButton
               name="rotation"
               value={value}
               key={value}
               checked={rotation === value}
               onChange={() => setRotation(value)}
+              className="grow"
             />
           ))}
         </div>
-        <div className="flex justify-between">
+        <div className="flex gap-2 items-stretch h-10">
           {AllStances.map((value) => (
             <RadioButton
               name="stance"
               value={value}
               key={value}
               checked={stance === value}
               onChange={() => setStance(value)}
+              className="grow"
             />
           ))}
         </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -21,6 +21,9 @@ const config: Config = {
         royal: "rgb(31,83,154)",
         yellow: "rgb(245,200,82)",
       },
+      minHeight: {
+        screen: "100dvh",
+      },
     },
   },
   plugins: [],