[4/n][project settings ui] GitTabPanel cleanup (#26)

packages/frontend/src/pages/org-slug/projects/id/settings/Git.tsx

@@ -1,18 +1,15 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
 
-import {
-  Button,
-  Input,
-  Switch,
-  Typography,
-} from '@snowballtools/material-tailwind-react-fork';
-
-import WebhookCard from '../../../../../components/projects/project/settings/WebhookCard';
+import WebhookCard from 'components/projects/project/settings/WebhookCard';
 import { useGQLClient } from '../../../../../context/GQLClientContext';
-import { OutletContextType } from '../../../../../types/types';
+import { OutletContextType } from '../../../../../types';
+import { Button } from 'components/shared/Button';
+import { Input } from 'components/shared/Input';
+import { Switch } from 'components/shared/Switch';
+import { Heading } from 'components/shared/Heading';
+import { useToast } from 'components/shared/Toast';
 
 type UpdateProdBranchValues = {
   prodBranch: string;
@@ -24,8 +21,12 @@ type UpdateWebhooksValues = {
 
 const GitTabPanel = () => {
   const client = useGQLClient();
+  const { toast } = useToast();
   const { project, onUpdate } = useOutletContext<OutletContextType>();
 
+  const [pullRequestComments, updatePullRequestComments] = useState(true);
+  const [commitComments, updateCommitComments] = useState(false);
+
   const {
     register: registerProdBranch,
     handleSubmit: handleSubmitProdBranch,
@@ -45,9 +46,19 @@ const GitTabPanel = () => {
 
         if (updateProject) {
           await onUpdate();
-          toast.success('Production branch upadated successfully');
+          toast({
+            id: 'prod_branch_updated',
+            title: 'Production branch updated successfully',
+            variant: 'success',
+            onDismiss() {},
+          });
         } else {
-          toast.error('Error updating production branch');
+          toast({
+            id: 'prod_branch_update_failed',
+            title: 'Error updating production branch',
+            variant: 'error',
+            onDismiss() {},
+          });
         }
       },
       [project],
@@ -72,9 +83,19 @@ const GitTabPanel = () => {
 
         if (updateProject) {
           await onUpdate();
-          toast.success('Webhook added successfully');
+          toast({
+            id: 'webhook_added',
+            title: 'Webhook added successfully',
+            variant: 'success',
+            onDismiss() {},
+          });
         } else {
-          toast.error('Error adding webhook');
+          toast({
+            id: 'webhook_add_failed',
+            title: 'Error adding webhook',
+            variant: 'error',
+            onDismiss() {},
+          });
         }
 
         resetWebhooks();
@@ -96,69 +117,97 @@ const GitTabPanel = () => {
 
     if (updateProject) {
       await onUpdate();
-      toast.success('Webhook deleted successfully');
+      toast({
+        id: 'webhook_deleted',
+        title: 'Webhook deleted successfully',
+        variant: 'success',
+        onDismiss() {},
+      });
     } else {
-      toast.error('Error deleting webhook');
+      toast({
+        id: 'webhook_delete_failed',
+        title: 'Error deleting webhook',
+        variant: 'error',
+        onDismiss() {},
+      });
     }
   };
 
   return (
-    <>
-      <div className="mb-2 p-2">
-        <Typography variant="h6" className="text-black">
+    <div className="flex-col justify-start items-start gap-6 inline-flex">
+      <div className="self-stretch space-y-3 px-2">
+        <Heading className="text-sky-950 text-lg font-medium leading-normal">
           Git repository
-        </Typography>
+        </Heading>
 
         <div className="flex justify-between mt-4">
           <div>
-            <Typography variant="small">Pull request comments</Typography>
+            <p className="text-slate-600 text-sm font-normal leading-tight">
+              Pull request comments
+            </p>
           </div>
           <div>
-            <Switch defaultChecked />
+            <Switch
+              checked={pullRequestComments}
+              onChange={() => updatePullRequestComments(!pullRequestComments)}
+            />
           </div>
         </div>
 
         <div className="flex justify-between">
           <div>
-            <Typography variant="small">Commit comments</Typography>
+            <p className="text-slate-600 text-sm font-normal leading-tight">
+              Commit comments
+            </p>
           </div>
           <div>
-            <Switch />
+            <Switch
+              checked={commitComments}
+              onChange={() => updateCommitComments(!commitComments)}
+            />
           </div>
         </div>
       </div>
 
-      <form onSubmit={handleSubmitProdBranch(updateProdBranchHandler)}>
-        <div className="mb-2 p-2">
-          <Typography variant="h6" className="text-black">
+      <form
+        onSubmit={handleSubmitProdBranch(updateProdBranchHandler)}
+        className="space-y-3 px-2"
+      >
+        <Heading className="text-sky-950 text-lg font-medium leading-normal">
           Production branch
-          </Typography>
-          <Typography variant="small">
+        </Heading>
+        <p className="text-slate-600 text-sm font-normal leading-tight">
           By default, each commit pushed to the{' '}
           <span className="font-bold">{project.prodBranch}</span> branch
-            initiates a production deployment. You can opt for a different
-            branch for deployment in the settings.
-          </Typography>
-          <Typography variant="small">Branch name</Typography>
+          initiates a production deployment. You can opt for a different branch
+          for deployment in the settings.
+        </p>
+        <p className="text-slate-600 text-sm font-normal leading-tight">
+          Branch name
+        </p>
         <Input {...registerProdBranch('prodBranch')} />
-          <Button size="sm" className="mt-1" type="submit">
+        <Button size="md" variant="primary">
           Save
         </Button>
-        </div>
       </form>
 
-      <form onSubmit={handleSubmitWebhooks(updateWebhooksHandler)}>
-        <div className="mb-2 p-2">
-          <Typography variant="h6" className="text-black">
+      <form
+        onSubmit={handleSubmitWebhooks(updateWebhooksHandler)}
+        className="space-y-3 px-2"
+      >
+        <Heading className="text-sky-950 text-lg font-medium leading-normal">
           Deploy webhooks
-          </Typography>
-          <Typography variant="small">
+        </Heading>
+        <p className="text-slate-600 text-sm font-normal leading-tight">
+          {' '}
           Webhooks configured to trigger when there is a change in a
           project&apos;s build or deployment status.
-          </Typography>
+        </p>
         <div className="flex gap-1">
           <div className="grow">
-              <Typography variant="small">Webhook URL</Typography>
+            <p className="text-slate-600 text-sm font-normal leading-tight">
+              Webhook URL
+            </p>
             <Input {...registerWebhooks('webhookUrl')} />
           </div>
           <div className="self-end">
@@ -167,9 +216,8 @@ const GitTabPanel = () => {
             </Button>
           </div>
         </div>
-        </div>
       </form>
-      <div className="mb-2 p-2">
+      <div className="space-y-3 px-2">
         {project.webhooks.map((webhookUrl, index) => {
           return (
             <WebhookCard
@@ -180,7 +228,7 @@ const GitTabPanel = () => {
           );
         })}
       </div>
-    </>
+    </div>
   );
 };