[7/n][project settings ui] cleanup dialogs (#34)

packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx

@@ -2,16 +2,12 @@ import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { AddProjectMemberInput, Permission } from 'gql-client';
 
-import {
-  Button,
-  Dialog,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-  Input,
-  Typography,
-  Checkbox,
-} from '@snowballtools/material-tailwind-react-fork';
+import { Typography } from '@snowballtools/material-tailwind-react-fork';
+
+import { Button } from 'components/shared/Button';
+import { Modal } from 'components/shared/Modal';
+import { Input } from 'components/shared/Input';
+import { Checkbox } from 'components/shared/Checkbox';
 
 interface AddMemberDialogProp {
   open: boolean;
@@ -61,59 +57,47 @@ const AddMemberDialog = ({
   }, []);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between">
-        <div>Add member</div>
-        <Button
-          variant="outlined"
-          onClick={handleOpen}
-          className="mr-1 rounded-3xl"
-        >
-          X
-        </Button>
-      </DialogHeader>
-      <form onSubmit={handleSubmit(submitHandler)}>
-        <DialogBody className="flex flex-col gap-2 p-4">
-          <Typography variant="small">
-            We will send an invitation link to this email address.
-          </Typography>
-          <Typography variant="small">Email address</Typography>
-          <Input
-            type="email"
-            {...register('emailAddress', {
-              required: 'email field cannot be empty',
-            })}
-          />
-          <Typography variant="small">Permissions</Typography>
-          <Typography variant="small">
-            You can change this later if required.
-          </Typography>
-          <Checkbox
-            label={Permission.View}
-            {...register(`permissions.view`)}
-            color="blue"
-          />
-          <Checkbox
-            label={Permission.Edit}
-            {...register(`permissions.edit`)}
-            color="blue"
-          />
-        </DialogBody>
-        <DialogFooter className="flex justify-start">
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
-            Cancel
-          </Button>
-          <Button
-            variant="gradient"
-            color="blue"
-            type="submit"
-            disabled={!isValid}
-          >
-            Send invite
-          </Button>
-        </DialogFooter>
-      </form>
-    </Dialog>
+    <Modal open={open} onOpenChange={handleOpen}>
+      <Modal.Content>
+        <Modal.Header>Add member</Modal.Header>
+        <form onSubmit={handleSubmit(submitHandler)}>
+          <Modal.Body className="flex flex-col gap-2 p-4">
+            <Typography variant="small">
+              We will send an invitation link to this email address.
+            </Typography>
+            <Typography variant="small">Email address</Typography>
+            <Input
+              type="email"
+              {...register('emailAddress', {
+                required: 'email field cannot be empty',
+              })}
+            />
+            <Typography variant="small">Permissions</Typography>
+            <Typography variant="small">
+              You can change this later if required.
+            </Typography>
+            <Checkbox
+              label={Permission.View}
+              {...register(`permissions.view`)}
+              color="blue"
+            />
+            <Checkbox
+              label={Permission.Edit}
+              {...register(`permissions.edit`)}
+              color="blue"
+            />
+          </Modal.Body>
+          <Modal.Footer className="flex justify-start">
+            <Button onClick={handleOpen} variant="secondary">
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!isValid}>
+              Send invite
+            </Button>
+          </Modal.Footer>
+        </form>
+      </Modal.Content>
+    </Modal>
   );
 };
 

packages/frontend/src/components/projects/project/settings/DomainCard.tsx

@@ -115,13 +115,13 @@ const DomainCard = ({
                   setEditDialogOpen((preVal) => !preVal);
                 }}
               >
-                ^ Edit domain
+                Edit Domain
               </MenuItem>
               <MenuItem
                 className="text-red-500"
                 onClick={() => setDeleteDialogOpen((preVal) => !preVal)}
               >
-                ^ Delete domain
+                Delete domain
               </MenuItem>
             </MenuList>
           </Menu>
@@ -141,7 +141,7 @@ const DomainCard = ({
 
       <Typography variant="small">Production</Typography>
       {domain.status === DomainStatus.Pending && (
-        <Card className="bg-gray-200 p-4 text-sm">
+        <Card className="bg-slate-100 p-4 text-sm">
           {refreshStatus === RefreshStatus.IDLE ? (
             <Typography variant="small">
               ^ Add these records to your domain and refresh to check
@@ -152,7 +152,6 @@ const DomainCard = ({
             </Typography>
           ) : (
             <div className="flex gap-2 text-red-500 mb-2">
-              <div>^</div>
               <div className="grow">
                 Failed to verify records. DNS propagation can take up to 48
                 hours. Please ensure you added the correct records and refresh.

packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx

@@ -4,18 +4,15 @@ import toast from 'react-hot-toast';
 import { Domain } from 'gql-client';
 
 import {
-  Button,
-  Dialog,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-  Input,
   Typography,
   Select,
   Option,
 } from '@snowballtools/material-tailwind-react-fork';
 
 import { useGQLClient } from '../../../../context/GQLClientContext';
+import { Modal } from 'components/shared/Modal';
+import { Button } from 'components/shared/Button';
+import { Input } from 'components/shared/Input';
 
 const DEFAULT_REDIRECT_OPTIONS = ['none'];
 
@@ -122,77 +119,67 @@ const EditDomainDialog = ({
   }, [domain]);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between">
-        <div>Edit domain</div>
-        <Button
-          variant="outlined"
-          onClick={handleOpen}
-          className="mr-1 rounded-3xl"
-        >
-          X
-        </Button>
-      </DialogHeader>
-      <form onSubmit={handleSubmit(updateDomainHandler)}>
-        <DialogBody className="flex flex-col gap-2 p-4">
-          <Typography variant="small">Domain name</Typography>
-          <Input {...register('name')} />
-          <Typography variant="small">Redirect to</Typography>
-          <Controller
-            name="redirectedTo"
-            control={control}
-            render={({ field }) => (
-              <Select {...field} disabled={isDisableDropdown}>
-                {redirectOptions.map((option, key) => (
-                  <Option key={key} value={option}>
-                    ^ {option}
-                  </Option>
-                ))}
-              </Select>
+    <Modal open={open} onOpenChange={handleOpen}>
+      <Modal.Content>
+        <Modal.Header>Edit domain</Modal.Header>
+        <form onSubmit={handleSubmit(updateDomainHandler)}>
+          <Modal.Body className="flex flex-col gap-2">
+            <Typography variant="small">Domain name</Typography>
+            <Input {...register('name')} />
+            <Typography variant="small">Redirect to</Typography>
+            <Controller
+              name="redirectedTo"
+              control={control}
+              render={({ field }) => (
+                <Select {...field} disabled={isDisableDropdown}>
+                  {redirectOptions.map((option, key) => (
+                    <Option key={key} value={option}>
+                      ^ {option}
+                    </Option>
+                  ))}
+                </Select>
+              )}
+            />
+            {isDisableDropdown && (
+              <div className="flex p-2 gap-2 text-black bg-gray-300 rounded-lg">
+                <div>^</div>
+                <Typography variant="small">
+                  Domain “
+                  {domainRedirectedFrom ? domainRedirectedFrom.name : ''}”
+                  redirects to this domain so you can not redirect this doman
+                  further.
+                </Typography>
+              </div>
             )}
-          />
-          {isDisableDropdown && (
-            <div className="flex p-2 gap-2 text-black bg-gray-300 rounded-lg">
-              <div>^</div>
-              <Typography variant="small">
-                Domain “{domainRedirectedFrom ? domainRedirectedFrom.name : ''}”
-                redirects to this domain so you can not redirect this doman
-                further.
+            <Typography variant="small">Git branch</Typography>
+            <Input
+              {...register('branch', {
+                validate: (value) =>
+                  Boolean(branches.length) ? branches.includes(value) : true,
+              })}
+              disabled={
+                !Boolean(branches.length) ||
+                watch('redirectedTo') !== DEFAULT_REDIRECT_OPTIONS[0]
+              }
+            />
+            {!isValid && (
+              <Typography variant="small" className="text-red-500">
+                We couldn&apos;t find this branch in the connected Git
+                repository.
               </Typography>
-            </div>
-          )}
-          <Typography variant="small">Git branch</Typography>
-          <Input
-            {...register('branch', {
-              validate: (value) =>
-                Boolean(branches.length) ? branches.includes(value) : true,
-            })}
-            disabled={
-              !Boolean(branches.length) ||
-              watch('redirectedTo') !== DEFAULT_REDIRECT_OPTIONS[0]
-            }
-          />
-          {!isValid && (
-            <Typography variant="small" className="text-red-500">
-              We couldn&apos;t find this branch in the connected Git repository.
-            </Typography>
-          )}
-        </DialogBody>
-        <DialogFooter className="flex justify-start">
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
-            Cancel
-          </Button>
-          <Button
-            variant="gradient"
-            color="blue"
-            type="submit"
-            disabled={!isDirty}
-          >
-            Save changes
-          </Button>
-        </DialogFooter>
-      </form>
-    </Dialog>
+            )}
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={handleOpen} className="mr-1">
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!isDirty}>
+              Save changes
+            </Button>
+          </Modal.Footer>
+        </form>
+      </Modal.Content>
+    </Modal>
   );
 };
 

packages/frontend/src/components/projects/project/settings/ProjectSettingContainer.tsx

@@ -18,7 +18,10 @@ const ProjectSettingContainer: React.FC<ProjectSettingContainerProps> = ({
   ...props
 }: ProjectSettingContainerProps) => {
   return (
-    <div className={'flex-col justify-start gap-8 space-y-3 px-2'} {...props}>
+    <div
+      className={'flex-col justify-start gap-8 space-y-3 px-2 pb-6'}
+      {...props}
+    >
       <ProjectSettingHeader
         headingText={headingText}
         button={button}

packages/frontend/src/stories/Project/Settings/General.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  reactRouterParameters,
+  withRouter,
+} from 'storybook-addon-remix-react-router';
+
+import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
+
+const meta: Meta<typeof AddEnvironmentVariableRow> = {
+  title: 'Project/Settings/AddEnvironmentVariableRow',
+  component: AddEnvironmentVariableRow,
+  tags: ['autodocs'],
+  decorators: [withRouter],
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: {
+        pathParams: { userId: 'me' },
+      },
+      routing: {
+        path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings',
+      },
+    }),
+  },
+} as Meta<typeof AddEnvironmentVariableRow>;
+
+export default meta;
+
+type Story = StoryObj<typeof AddEnvironmentVariableRow>;
+
+export const Default: Story = {};