Refactor: AssignDomainDialog uses Modal component (#202)

### TL;DR

This PR includes updates to the project settings.

### What changed?

The project settings have been refactored for better organization and readability.

### How to test?

To test this change, navigate to the project settings and ensure all options are functioning as expected.

### Why make this change?

This change was made to improve the user experience when navigating through the project settings.

---
This commit is contained in:
Vivian Phung 2024-06-20 00:32:41 -04:00 committed by GitHub
parent 2ada11f311
commit 82a1c151a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,13 +1,8 @@
import { CopyBlock, atomOneLight } from 'react-code-blocks'; import { CopyBlock, atomOneLight } from 'react-code-blocks';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import { Modal } from 'components/shared/Modal';
Button, import { Button } from 'components/shared/Button';
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
} from '@snowballtools/material-tailwind-react-fork';
interface AssignDomainProps { interface AssignDomainProps {
open: boolean; open: boolean;
@ -16,11 +11,12 @@ interface AssignDomainProps {
const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => { const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
return ( return (
<Dialog open={open} handler={handleOpen}> <Modal open={open} onOpenChange={handleOpen}>
<DialogHeader>Assign Domain</DialogHeader> <Modal.Content>
<DialogBody> <Modal.Header>Assign Domain</Modal.Header>
In order to assign a domain to your production deployments, configure it <Modal.Body>
in the{' '} In order to assign a domain to your production deployments, configure
it in the{' '}
{/* TODO: Fix selection of project settings tab on navigation to domains */} {/* TODO: Fix selection of project settings tab on navigation to domains */}
<Link to="../settings/domains" className="text-light-blue-800 inline"> <Link to="../settings/domains" className="text-light-blue-800 inline">
project settings{' '} project settings{' '}
@ -34,18 +30,12 @@ const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
showLineNumbers={false} showLineNumbers={false}
theme={atomOneLight} theme={atomOneLight}
/> />
</DialogBody> </Modal.Body>
<DialogFooter className="flex justify-start"> <Modal.Footer className="flex justify-start">
<Button <Button onClick={handleOpen}>Okay</Button>
className="rounded-3xl" </Modal.Footer>
variant="gradient" </Modal.Content>
color="blue" </Modal>
onClick={handleOpen}
>
<span>Okay</span>
</Button>
</DialogFooter>
</Dialog>
); );
}; };