[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 {
+import { Typography } from '@snowballtools/material-tailwind-react-fork';
-  Button,
+
-  Dialog,
+import { Button } from 'components/shared/Button';
-  DialogHeader,
+import { Modal } from 'components/shared/Modal';
-  DialogBody,
+import { Input } from 'components/shared/Input';
-  DialogFooter,
+import { Checkbox } from 'components/shared/Checkbox';
-  Input,
-  Typography,
-  Checkbox,
-} from '@snowballtools/material-tailwind-react-fork';
 
 interface AddMemberDialogProp {
   open: boolean;
@@ -61,19 +57,11 @@ const AddMemberDialog = ({
   }, []);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
+    <Modal open={open} onOpenChange={handleOpen}>
-      <DialogHeader className="flex justify-between">
+      <Modal.Content>
-        <div>Add member</div>
+        <Modal.Header>Add member</Modal.Header>
-        <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">
+          <Modal.Body className="flex flex-col gap-2 p-4">
             <Typography variant="small">
               We will send an invitation link to this email address.
             </Typography>
@@ -98,22 +86,18 @@ const AddMemberDialog = ({
               {...register(`permissions.edit`)}
               color="blue"
             />
-        </DialogBody>
+          </Modal.Body>
-        <DialogFooter className="flex justify-start">
+          <Modal.Footer className="flex justify-start">
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
+            <Button onClick={handleOpen} variant="secondary">
               Cancel
             </Button>
-          <Button
+            <Button type="submit" disabled={!isValid}>
-            variant="gradient"
-            color="blue"
-            type="submit"
-            disabled={!isValid}
-          >
               Send invite
             </Button>
-        </DialogFooter>
+          </Modal.Footer>
         </form>
-    </Dialog>
+      </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,19 +119,11 @@ const EditDomainDialog = ({
   }, [domain]);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
+    <Modal open={open} onOpenChange={handleOpen}>
-      <DialogHeader className="flex justify-between">
+      <Modal.Content>
-        <div>Edit domain</div>
+        <Modal.Header>Edit domain</Modal.Header>
-        <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">
+          <Modal.Body className="flex flex-col gap-2">
             <Typography variant="small">Domain name</Typography>
             <Input {...register('name')} />
             <Typography variant="small">Redirect to</Typography>
@@ -155,7 +144,8 @@ const EditDomainDialog = ({
               <div className="flex p-2 gap-2 text-black bg-gray-300 rounded-lg">
                 <div>^</div>
                 <Typography variant="small">
-                Domain “{domainRedirectedFrom ? domainRedirectedFrom.name : ''}”
+                  Domain “
+                  {domainRedirectedFrom ? domainRedirectedFrom.name : ''}”
                   redirects to this domain so you can not redirect this doman
                   further.
                 </Typography>
@@ -174,25 +164,22 @@ const EditDomainDialog = ({
             />
             {!isValid && (
               <Typography variant="small" className="text-red-500">
-              We couldn&apos;t find this branch in the connected Git repository.
+                We couldn&apos;t find this branch in the connected Git
+                repository.
               </Typography>
             )}
-        </DialogBody>
+          </Modal.Body>
-        <DialogFooter className="flex justify-start">
+          <Modal.Footer>
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
+            <Button onClick={handleOpen} className="mr-1">
               Cancel
             </Button>
-          <Button
+            <Button type="submit" disabled={!isDirty}>
-            variant="gradient"
-            color="blue"
-            type="submit"
-            disabled={!isDirty}
-          >
               Save changes
             </Button>
-        </DialogFooter>
+          </Modal.Footer>
         </form>
-    </Dialog>
+      </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 = {};