Feature: Improve Dialog Component

[nickytonline]

Type of feature

🧑‍💻 Refactor

Current behavior

Currently there building a dialog looks something like this.

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "components/molecules/Dialog/dialog";

const DeleteAccountModal = ({ open, setOpen, onDelete }: DeleteAccountModalProps) => {
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="p-4">
        <DialogHeader>
          <DialogTitle className="text-left">Delete Account</DialogTitle>
        </DialogHeader>
        <div className="flex flex-col gap-4">
          <Text>Are you sure you want to delete your account?</Text>
          <div className="flex gap-4">
            <Button
              type="submit"
              rel="noopener noreferrer"
              target="_blank"
              className="w-max border-dark-red-8 bg-dark-red-8 text-white hover:border-dark-red-7 hover:bg-dark-red-7"
              variant="primary"
              onClick={onDelete}
            >
              Delete
            </Button>
            <Button
              variant="default"
              onClick={() => {
                setOpen(false);
              }}
            >
              Cancel
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};

This works, but there is a lot of boiler plate and it opens up the door to deviate from standard styles as well, specifically for the title.

Suggested solution

import { Dialog } from "components/molecules/Dialog/dialog";

const DeleteAccountModal = ({ open, setOpen, onDelete }: DeleteAccountModalProps) => {
  return (
    <Dialog title="Delete Account" open={open} onOpenChange={setOpen}>
      <div className="flex flex-col gap-4">
        <Text>Are you sure you want to delete your account?</Text>
        <div className="flex gap-4">
          <Button
            type="submit"
            rel="noopener noreferrer"
            target="_blank"
            className="w-max border-dark-red-8 bg-dark-red-8 text-white hover:border-dark-red-7 hover:bg-dark-red-7"
            variant="primary"
            onClick={onDelete}
          >
            Delete
          </Button>
          <Button
            variant="default"
            onClick={() => {
              setOpen(false);
            }}
          >
            Cancel
          </Button>
        </div>
      </div>
    </Dialog>
  );
};

This could be the base for a dialog then we could update the confirm or alert dialogs that have specific buttons that the dev can't change aside from text and button events.

Relates to the efforts in https://github.com/open-sauced/internal-team/issues/21

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.