From 5beac21d51c65dda9ccee55c8bf0a5d285badd75 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 24 Oct 2025 14:21:18 +0000
Subject: [PATCH] Fix: Update banner and anonymous signing

---
 src/components/PetitionForm.tsx | 37 +++++++++++++--------------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/components/PetitionForm.tsx b/src/components/PetitionForm.tsx
index 40d2baf..bf99485 100644
--- a/src/components/PetitionForm.tsx
+++ b/src/components/PetitionForm.tsx
@@ -2,6 +2,8 @@ import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
 import { supabase } from "@/integrations/supabase/client";
 import { z } from "zod";
@@ -72,28 +74,19 @@ export const PetitionForm = ({ compact = false }: PetitionFormProps) => {
 
   return (
     <form onSubmit={handleSubmit} className={`space-y-4 ${compact ? 'max-w-md' : 'max-w-xl'} mx-auto`}>
-      {!compact && (
-        <div className="mb-4 flex items-center gap-2">
-          <Button
-            type="button"
-            variant={isAnonymous ? "outline" : "default"}
-            size="sm"
-            onClick={() => setIsAnonymous(false)}
-            className="flex-1"
-          >
-            Full Signature
-          </Button>
-          <Button
-            type="button"
-            variant={isAnonymous ? "default" : "outline"}
-            size="sm"
-            onClick={() => setIsAnonymous(true)}
-            className="flex-1"
-          >
-            Anonymous Sign
-          </Button>
-        </div>
-      )}
+      <div className="flex items-center space-x-2 mb-4 bg-muted/50 p-3 rounded-md">
+        <Checkbox 
+          id="anonymous" 
+          checked={isAnonymous}
+          onCheckedChange={(checked) => setIsAnonymous(checked as boolean)}
+        />
+        <Label 
+          htmlFor="anonymous" 
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+        >
+          Sign anonymously (only email required)
+        </Label>
+      </div>
       
       {!isAnonymous && (
         <div>