Update rsvp-form.tsx style

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

@@ -50,76 +50,86 @@ 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>
+          <h2 className="text-lg font-medium">RSVP to this Event</h2>
+        </div>
 
-      <div>
-        <Label htmlFor="status" className="mb-2">
-          Your Attendance
-        </Label>
-        <Select
-          defaultValue={status}
-          onValueChange={(val) => setStatus(val as any)}
-        >
-          <SelectTrigger id="status">
-            <span className="capitalize">{status.replace("_", " ")}</span>
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="attending">Attending</SelectItem>
-            <SelectItem value="not_attending">Not Attending</SelectItem>
-            <SelectItem value="maybe">Maybe</SelectItem>
-          </SelectContent>
-        </Select>
+        <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" className="w-full">
+                <SelectValue>
+                  <span className="capitalize">{status.replace("_", " ")}</span>
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="attending">Attending</SelectItem>
+                <SelectItem value="not_attending">Not Attending</SelectItem>
+                <SelectItem value="maybe">Maybe</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <Label htmlFor="number_of_guests" className="mb-2 block">
+              Number of Guests
+            </Label>
+            <Input
+              id="number_of_guests"
+              type="number"
+              min={1}
+              value={number_of_guests}
+              onChange={(e) =>
+                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 block">
+              Message to Hosts (optional)
+            </Label>
+            <Textarea
+              id="response_message"
+              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 block">
+              Dietary Requirements
+            </Label>
+            <Textarea
+              id="dietary_requirements"
+              value={dietary_requirements}
+              onChange={(e) => setDietaryRequirements(e.target.value)}
+              placeholder="Any dietary restrictions or allergies?"
+              rows={2}
+            />
+          </div>
+
+          <div className="flex justify-end mt-6">
+            <Button type="submit" className="w-full md:w-auto">
+              Submit RSVP
+            </Button>
+          </div>
+        </form>
       </div>
-
-      <div>
-        <Label htmlFor="number_of_guests" className="mb-2">
-          N. guests
-        </Label>
-        <Input
-          id="number_of_guests"
-          type="number"
-          min={1}
-          value={number_of_guests}
-          onChange={(e) =>
-            setNumberOfGuests(Math.max(1, Number(e.target.value)))
-          }
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="response_message" className="mb-2">
-          Message to Hosts (optional)
-        </Label>
-        <Textarea
-          id="response_message"
-          value={response_message}
-          onChange={(e) => setResponseMessage(e.target.value)}
-          placeholder="Write a short message to the hosts"
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="dietary_requirements" className="mb-2">
-          Dietary Requirements
-        </Label>
-        <Textarea
-          id="dietary_requirements"
-          value={dietary_requirements}
-          onChange={(e) => setDietaryRequirements(e.target.value)}
-          placeholder="Any dietary restrictions?"
-        />
-      </div>
-
-      <Button type="submit" className="w-full">
-        Submit RSVP
-      </Button>
-    </form>
+    </div>
   );
 };