Portal Productisation - Refactor CancelFormDialog

[jocelynmutso]

In CancelFormDialog, we have too many variant-based styles all mixed together and broke up throughout the code. The logic for selecting and rendering styles is mixed to the point where it is difficult to understand the separation and which styles belong to which variants.

TASK: Refactor this component so that it renders two different dialogs based on the variant prop that already exists in the CancelDialogProps.

1. Remove all breakpoint-based styles: This means that there should be no styles declared in connection wtih breakpoints like this:

  [theme.breakpoints.down('sm')]: {
    justifyContent: 'center',
  },

2. Rename methods: handleClose --> onClose, handleCancel ---> onCancel

3. To get started, you could try rendering the dialog like this:

const CancelFormDialog: React.FC<CancelDialogProps> = ({ variant, ... }) => {
  if (variant === 'desktop') {
    return (<DialogDesktop variant="desktop"  otherProps... />)
  }
  return (<DialogMobile variant="mobile"  otherProps... />);
}