Modal sizing

namesakefyi · Nov 30, 2024 · ec7d399 · ec7d399
1 parent 73fdd0b
commit ec7d399
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 19 deletions.
diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx
@@ -20,7 +20,7 @@ const overlayStyles = tv({
 });
 
 const modalStyles = tv({
-  base: "p-5 w-full max-w-md max-h-full rounded-2xl bg-gray-subtle forced-colors:bg-[Canvas] flex flex-col items-start gap-4 shadow-2xl bg-clip-padding border border-gray-dim",
+  base: "p-5 w-[400px] max-w-full max-h-full rounded-2xl bg-gray-subtle forced-colors:bg-[Canvas] flex flex-col items-start gap-4 shadow-2xl bg-clip-padding border border-gray-dim",
   variants: {
     isEntering: {
       true: "animate-in zoom-in-105 ease-out duration-2",
@@ -58,3 +58,11 @@ export function ModalHeader({ title, children }: ModalHeaderProps) {
     </header>
   );
 }
+
+export function ModalFooter({ children }: { children: React.ReactNode }) {
+  return (
+    <footer className="flex w-full justify-end items-center gap-2">
+      {children}
+    </footer>
+  );
+}
diff --git a/src/components/quests/EditQuestCostsModal/EditQuestCostsModal.tsx b/src/components/quests/EditQuestCostsModal/EditQuestCostsModal.tsx
@@ -30,7 +30,7 @@ const CostInput = memo(function CostInput({
     <div className="flex items-start gap-2">
       <NumberField
         aria-label="Cost"
-        className="w-28"
+        className="w-24"
         prefix="$"
         value={cost.cost}
         onChange={(value) =>

diff --git a/src/components/quests/EditQuestTimeRequiredModal/EditQuestTimeRequiredModal.tsx b/src/components/quests/EditQuestTimeRequiredModal/EditQuestTimeRequiredModal.tsx
@@ -39,7 +39,7 @@ const TimeRequiredInput = memo(function TimeRequiredInput({
       <div className="flex items-end gap-2">
         <NumberField
           label="Est. min time"
-          className="w-28"
+          className="w-24"
           value={timeRequired?.min}
           maxValue={Math.max(timeRequired.max, 60)}
           onChange={(value) =>
@@ -51,7 +51,7 @@ const TimeRequiredInput = memo(function TimeRequiredInput({
         />
         <NumberField
           label="Est. max time"
-          className="w-28"
+          className="w-24"
           value={timeRequired.max}
           minValue={Math.min(timeRequired.min, 1)}
           onChange={(value) =>
@@ -63,7 +63,7 @@ const TimeRequiredInput = memo(function TimeRequiredInput({
         />
         <Select
           label="Unit"
-          className="w-40"
+          className="flex-1"
           selectedKey={timeRequired.unit}
           onSelectionChange={(key) =>
             onChange({

diff --git a/src/components/settings/DeleteAccountSetting/DeleteAccountSetting.tsx b/src/components/settings/DeleteAccountSetting/DeleteAccountSetting.tsx
@@ -1,4 +1,4 @@
-import { Button, Modal, ModalHeader } from "@/components/common";
+import { Button, Modal, ModalFooter, ModalHeader } from "@/components/common";
 import { SettingsItem } from "@/components/settings";
 import { useAuthActions } from "@convex-dev/auth/react";
 import { api } from "@convex/_generated/api";
@@ -35,12 +35,12 @@ const DeleteAccountModal = ({
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalHeader title="Delete account?" />
       <p>This will permanently erase your account and all data.</p>
-      <div className="flex justify-end w-full gap-2">
+      <ModalFooter>
         <Button onPress={() => onOpenChange(false)}>Cancel</Button>
         <Button variant="destructive" onPress={handleSubmit}>
           Delete
         </Button>
-      </div>
+      </ModalFooter>
     </Modal>
   );
 };

diff --git a/src/components/settings/EditBirthplaceSetting/EditBirthplaceSetting.tsx b/src/components/settings/EditBirthplaceSetting/EditBirthplaceSetting.tsx
@@ -1,4 +1,12 @@
-import { Button, Form, Modal, Select, SelectItem } from "@/components/common";
+import {
+  Button,
+  Form,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  Select,
+  SelectItem,
+} from "@/components/common";
 import { api } from "@convex/_generated/api";
 import type { Doc } from "@convex/_generated/dataModel";
 import { JURISDICTIONS, type Jurisdiction } from "@convex/constants";
@@ -31,29 +39,30 @@ const EditBirthplaceModal = ({
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalHeader title="Edit birthplace" />
       <Form onSubmit={handleSubmit} className="w-full">
-        Edit birthplace
         <Select
           aria-label="Birthplace"
           name="birthplace"
           selectedKey={birthplace}
           onSelectionChange={(key) => setBirthplace(key as Jurisdiction)}
           placeholder="Select state"
+          className="w-full"
         >
           {Object.entries(JURISDICTIONS).map(([value, label]) => (
             <SelectItem key={value} id={value}>
               {label}
             </SelectItem>
           ))}
         </Select>
-        <div className="flex justify-end gap-2">
+        <ModalFooter>
           <Button variant="secondary" onPress={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button type="submit" variant="primary">
             Save
           </Button>
-        </div>
+        </ModalFooter>
       </Form>
     </Modal>
   );

diff --git a/src/components/settings/EditNameSetting/EditNameSetting.tsx b/src/components/settings/EditNameSetting/EditNameSetting.tsx
@@ -1,4 +1,11 @@
-import { Button, Form, Modal, TextField } from "@/components/common";
+import {
+  Button,
+  Form,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  TextField,
+} from "@/components/common";
 import { api } from "@convex/_generated/api";
 import type { Doc } from "@convex/_generated/dataModel";
 import { useMutation } from "convex/react";
@@ -30,17 +37,23 @@ const EditNameModal = ({
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalHeader title="Edit name" />
       <Form onSubmit={handleSubmit} className="w-full">
-        Edit name
-        <TextField name="name" label="Name" value={name} onChange={setName} />
-        <div className="flex justify-end gap-2">
+        <TextField
+          name="name"
+          label="Name"
+          value={name}
+          onChange={setName}
+          className="w-full"
+        />
+        <ModalFooter>
           <Button variant="secondary" onPress={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button type="submit" variant="primary">
             Save
           </Button>
-        </div>
+        </ModalFooter>
       </Form>
     </Modal>
   );

diff --git a/src/components/settings/EditResidenceSetting/EditResidenceSetting.tsx b/src/components/settings/EditResidenceSetting/EditResidenceSetting.tsx
@@ -2,6 +2,7 @@ import {
   Button,
   Form,
   Modal,
+  ModalFooter,
   ModalHeader,
   Select,
   SelectItem,
@@ -46,21 +47,22 @@ const EditResidenceModal = ({
           selectedKey={residence}
           onSelectionChange={(key) => setResidence(key as Jurisdiction)}
           placeholder="Select state"
+          className="w-full"
         >
           {Object.entries(JURISDICTIONS).map(([value, label]) => (
             <SelectItem key={value} id={value}>
               {label}
             </SelectItem>
           ))}
         </Select>
-        <div className="flex justify-end gap-2">
+        <ModalFooter>
           <Button variant="secondary" onPress={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button type="submit" variant="primary">
             Save
           </Button>
-        </div>
+        </ModalFooter>
       </Form>
     </Modal>
   );