Migrating all modals to MUI

src/components/AffixButton/AffixButton.tsx

@@ -1,7 +1,7 @@
-import { 
-    NoteAdd, 
-    AddCircle, 
-    AddOutlined, 
+import {
+    NoteAdd,
+    AddCircle,
+    AddOutlined,
     PersonAddAlt1Outlined,
     Source,
     Report
@@ -177,12 +177,21 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
                     ))}
             </div>
             <AletheiaModal
-                className="ant-modal-content"
                 open={isModalVisible}
-                footer={false}
                 onCancel={handleHideModal}
-                centered
-                title={t("tutorial:modalTitle")}
+                title={
+                    <h2
+                        style={{
+                            fontFamily: "open sans, sans-serif",
+                            fontWeight: 700,
+                            fontSize: 14,
+                            textAlign: "center",
+                            textTransform: "uppercase",
+                            padding: "0 34px"
+                        }}>
+                        {t("tutorial:modalTitle")}
+                    </h2>
+                }
             >
                 <p
                     style={{
@@ -197,7 +206,7 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
                         components={[<AddCircle style={{marginBottom:"-5px",fontSize:"18px"}} key={"icon"} />]}
                     />
                 </p>
-
+                
                 <div
                     style={{
                         marginTop: 24,

src/components/AffixButton/AffixCTAButton.tsx

@@ -16,7 +16,7 @@ const CloseIcon = () => {
     return (
         <InfoTooltip
             children={
-                <CloseOutlined style={{ margin: "10px", color: colors.white }} />
+                <CloseOutlined style={{ margin: "10px", color: colors.white, position: "absolute", top: 5, right: 5 }} />
             }
             content={
                 <span style={{ color: colors.black, fontSize: 15 }}>
@@ -90,13 +90,28 @@ const AffixCTAButton = ({ copilotDrawerWidth }) => {
 
             <AletheiaModal
                 open={modalVisible}
-                footer={null}
-                title={t("NewCTARegistration:body")}
                 onCancel={() => setModalVisible(false)}
-                maskClosable={false}
                 theme="dark"
-                width={"75%"}
+                width={vw?.xs ? "100%" : "60%"}
                 closeIcon={<CloseIcon />}
+                style={{ alignSelf: "flex-start", paddingTop: "10vh" }}
+                title={
+                    <div style={{ display: "flex", justifyContent: "space-between" }}>
+                        <h2
+                            style={{
+                                color: colors.white,
+                                fontFamily: "open sans, sans-serif",
+                                fontWeight: 700,
+                                fontSize: 14,
+                                textAlign: "center",
+                                textTransform: "uppercase",
+                                padding: "0 30px",
+                            }}
+                        >
+                            {t("NewCTARegistration:body")}
+                        </h2>
+                    </div>
+                }
             >
                 <Banner />
             </AletheiaModal>

src/components/Form/ClassificationModal.tsx

@@ -32,14 +32,24 @@ const ClassificationModal = ({
     return (
         <AletheiaModal
             open={open}
-            footer={false}
             onCancel={handleCancel}
-            setValue={setValue}
-            title={t("claimReviewForm:classificationLabel")}
             style={{
                 display: "flex",
-                alingItens: "center",
+                alignItems: "center",
             }}
+            title={
+                <h2
+                    style={{
+                        fontFamily: "open sans, sans-serif",
+                        fontWeight: 700,
+                        fontSize: 14,
+                        textAlign: "center",
+                        textTransform: "uppercase",
+                    }}
+                >
+                    {t("claimReviewForm:classificationLabel")}
+                </h2>
+            }
         >
             <RadioGroup
                 onChange={onChangeRadio}
@@ -103,7 +113,7 @@ const ClassificationModal = ({
                 }}
             >
                 <ModalCancelButton
-                    type="text"
+                    type="button"
                     onClick={handleCancel}
                     style={{ width: "62%" }}
                 >

src/components/ImageUpload.tsx

@@ -115,10 +115,23 @@ const ImageUpload = ({
             )}
             <AletheiaModal
                 open={previewOpen}
-                title={previewTitle}
-                footer={null}
                 onCancel={handleCancel}
                 width={"fit-content"}
+                style={{ alignSelf: "flex-start", paddingTop: "10vh" }}
+                title={
+                    <h2
+                        style={{
+                            fontFamily: "open sans, sans-serif",
+                            fontWeight: 700,
+                            fontSize: 14,
+                            textAlign: "center",
+                            textTransform: "uppercase",
+                            padding: "0 34px",
+                        }}
+                    >
+                        {previewTitle}
+                    </h2>
+                }
             >
                 <img
                     alt={`preview uploaded file ${previewTitle}`}

src/components/Modal/AletheiaModal.style.tsx

@@ -1,80 +1,126 @@
-import { Button, Modal } from "antd";
+import { Dialog, DialogTitle, DialogContent, IconButton, Button } from "@mui/material";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
 import styled from "styled-components";
 import colors from "../../styles/colors";
 import { NameSpaceEnum } from "../../types/Namespace";
 
-const AletheiaModal = styled(Modal)`
-    background: none;
-    box-shadow: none;
-    padding: 0;
+const DefaultModal = styled(Dialog)`
+  display: flex;
+  justify-content: center;
+  align-self: center;
 
-    .ant-modal-content {
-        width: ${(props) => (props.width ? props.width : "300px")};
-        margin: 0 auto;
-        border-radius: 8px;
-        background-color: ${(props) =>
-        props.theme === "dark" ? colors.black : colors.lightNeutral};
-        box-shadow: 0px 0px 15px ${colors.shadow};
-        padding: 26px 26px;
-        max-width: 90vw;
-    }
+  .MuiDialog-paper {
+    width: ${(props) => (props.width ? props.width : "300px")};
+    margin: 0 auto;
+    border-radius: 8px;
+    background-color: ${(props) =>
+    props.theme === "dark" ? colors.black : colors.lightNeutral};
+    box-shadow: 0px 0px 15px ${colors.shadow};
+    padding: 24px;
+    max-width: 90vw;
+  }
 
-    .ant-modal-body {
-        padding: 0;
-    }
+  .MuiDialogTitle-root {
+    color: ${(props) => props.theme === "dark" ? colors.white : colors.black};
+    font-size: 14px;
+    line-height: 20px;
+    margin-bottom: 12;
+    padding: 0;
+  }
 
-    .ant-modal-header {
-        background: none;
-        border-bottom: 0px;
-        padding: 0 0 10px 0;
-    }
+  .MuiDialogActions-root {
+    display: flex;
+    justify-content: center;
+    font-size: 24px;
+    line-height: 24px;
+    padding: 20px 0;
+  }
 
-    .ant-modal-title {
-        color: ${(props) =>
-        props.theme === "dark" ? colors.white : colors.black};
-        font-weight: 700;
-        font-size: 14px;
-        text-align: center;
-        text-transform: uppercase;
-        padding: 0 32px;
-    }
+  .MuiIconButton-root {
+    top: 10px;
+    right: 10px;
+    position: absolute;
+    color: ${(props) =>
+    props.theme === "dark" ? colors.white : colors.primary};
+  }
 
-    svg[data-icon="close"] {
-        margin-top: 26px;
-        width: 14px;
-        height: 14px;
-        color: ${(props) =>
-        props.theme === "dark" ? colors.white : colors.primary};
-        margin-right: 20px;
-    }
+  .MuiDialogContent-root {
+    font-size: 14px;
+    padding: 0;
+  }
 
-    .ant-modal-body .modal-title {
-        display: flex;
-        gap: 10px;
-        width: calc(100% - 20px);
-        font-size: 24px;
-        line-height: 24px;
-    }
+  .MuiButtonBase-root {
+    color: ${({ namespace }) =>
+    namespace === NameSpaceEnum.Main ? colors.primary : colors.secondary};
+    font-size: 14px;
+ }
 
-    .hide-modal {
-        color: ${colors.warning};
-    }
+  .hide-modal {
+    color: ${colors.warning};
+  }
 
-    .delete-modal {
-        color: #ca1105;
-    }
+  .delete-modal {
+    color: #ca1105;
+  }
 `;
 
 const ModalCancelButton = styled(Button)`
     height: 40px;
     width: 120px;
     color: ${({ namespace }) =>
-        namespace === NameSpaceEnum.Main
-            ? colors.primary
-            : colors.secondary};
+    namespace === NameSpaceEnum.Main
+      ? colors.primary
+      : colors.secondary};
     text-align: "center";
     font-weight: 700;
     font-size: 14;
 `;
 
+interface AletheiaModalProps {
+  open: boolean;
+  closeIcon?: React.ReactNode;
+  width?: string;
+  theme?: string;
+  namespace?: NameSpaceEnum;
+  onCancel?: () => void;
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const AletheiaModal: React.FC<AletheiaModalProps> = ({
+  open,
+  closeIcon = true,
+  onCancel,
+  style = {},
+  title,
+  children,
+  width,
+  theme,
+  namespace
+}) => (
+  <DefaultModal
+    open={open}
+    onClose={onCancel}
+    width={width}
+    theme={theme}
+    namespace={namespace}
+    style={{ ...style }}
+  >
+    <DialogTitle>
+      {title}
+      {typeof closeIcon === 'boolean' ? (
+        <IconButton size="small" onClick={onCancel}>
+          <CloseOutlined />
+        </IconButton>
+      ) : (
+        <IconButton size="small" onClick={onCancel}>
+          {closeIcon}
+        </IconButton>
+      )}
+    </DialogTitle>
+    <DialogContent>{children}</DialogContent>
+  </DefaultModal>
+);
+
 export { AletheiaModal, ModalCancelButton };

src/components/Modal/ModalButtons.tsx

@@ -1,4 +1,4 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import React from "react";
 import { ModalCancelButton } from "./AletheiaModal.style";
 import AletheiaButton, { ButtonType } from "../Button";
@@ -8,15 +8,15 @@ const ModalButtons = ({ isLoading, hasCaptcha, handleCancel = null }) => {
     const { t } = useTranslation();
 
     return (
-        <Col
+        <Grid item
             style={{
                 marginTop: 32,
                 display: "flex",
                 justifyContent: "space-around",
             }}
         >
             {handleCancel && (
-                <ModalCancelButton type="text" onClick={() => handleCancel()}>
+                <ModalCancelButton type="button" onClick={() => handleCancel()}>
                     <span
                         style={{
                             textDecorationLine: "underline",
@@ -35,7 +35,7 @@ const ModalButtons = ({ isLoading, hasCaptcha, handleCancel = null }) => {
             >
                 {t("orderModal:okButton")}
             </AletheiaButton>
-        </Col>
+        </Grid>
     );
 };