Update rsvp-form.tsx style

frontend/src/components/rsvp/rsvp-form.tsx

@@ -50,24 +50,25 @@ export const RSVP: React.FC<RSVPProps> = ({
   };
 
   return (
-    <form
-      onSubmit={submitRsvp}
-      className="rounded-lg bg-white p-6 flex flex-col gap-5"
-    >
-      <h2 className="text-2xl font-semibold text-gray-800">
-        RSVP to this Event
-      </h2>
-
+    <div className="w-full bg-card text-card-foreground rounded-lg border shadow-sm">
+      <div className="p-6 flex flex-col gap-6">
         <div>
-        <Label htmlFor="status" className="mb-2">
+          <h2 className="text-lg font-medium">RSVP to this Event</h2>
+        </div>
+
+        <form onSubmit={submitRsvp} className="space-y-4">
+          <div>
+            <Label htmlFor="status" className="mb-2 block">
               Your Attendance
             </Label>
             <Select
               defaultValue={status}
               onValueChange={(val) => setStatus(val as any)}
             >
-          <SelectTrigger id="status">
+              <SelectTrigger id="status" className="w-full">
+                <SelectValue>
                   <span className="capitalize">{status.replace("_", " ")}</span>
+                </SelectValue>
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="attending">Attending</SelectItem>
@@ -78,8 +79,8 @@ export const RSVP: React.FC<RSVPProps> = ({
           </div>
 
           <div>
-        <Label htmlFor="number_of_guests" className="mb-2">
-          N. guests
+            <Label htmlFor="number_of_guests" className="mb-2 block">
+              Number of Guests
             </Label>
             <Input
               id="number_of_guests"
@@ -90,10 +91,13 @@ export const RSVP: React.FC<RSVPProps> = ({
                 setNumberOfGuests(Math.max(1, Number(e.target.value)))
               }
             />
+            <p className="text-sm text-muted-foreground mt-1">
+              How many people (including yourself) will be attending?
+            </p>
           </div>
 
           <div>
-        <Label htmlFor="response_message" className="mb-2">
+            <Label htmlFor="response_message" className="mb-2 block">
               Message to Hosts (optional)
             </Label>
             <Textarea
@@ -101,25 +105,31 @@ export const RSVP: React.FC<RSVPProps> = ({
               value={response_message}
               onChange={(e) => setResponseMessage(e.target.value)}
               placeholder="Write a short message to the hosts"
+              rows={3}
             />
           </div>
 
           <div>
-        <Label htmlFor="dietary_requirements" className="mb-2">
+            <Label htmlFor="dietary_requirements" className="mb-2 block">
               Dietary Requirements
             </Label>
             <Textarea
               id="dietary_requirements"
               value={dietary_requirements}
               onChange={(e) => setDietaryRequirements(e.target.value)}
-          placeholder="Any dietary restrictions?"
+              placeholder="Any dietary restrictions or allergies?"
+              rows={2}
             />
           </div>
 
-      <Button type="submit" className="w-full">
+          <div className="flex justify-end mt-6">
+            <Button type="submit" className="w-full md:w-auto">
               Submit RSVP
             </Button>
+          </div>
         </form>
+      </div>
+    </div>
   );
 };