Skip to content

Commit 306ec7d

Browse files
thesocialdevthesocialdev
authored
Merge pull request #1798 from AletheiaFact/Migrating-all-modal-for-MUI
Migrating all modals to MUI
2 parents 4f8b6f9 + 321b79d commit 306ec7d

File tree

11 files changed

+282
-164
lines changed

11 files changed

+282
-164
lines changed

‎src/components/AffixButton/AffixButton.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import {
2-
NoteAdd,
3-
AddCircle,
4-
AddOutlined,
1+
import {
2+
NoteAdd,
3+
AddCircle,
4+
AddOutlined,
55
PersonAddAlt1Outlined,
66
Source,
77
Report
@@ -177,12 +177,21 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
177177
))}
178178
</div>
179179
<AletheiaModal
180-
className="ant-modal-content"
181180
open={isModalVisible}
182-
footer={false}
183181
onCancel={handleHideModal}
184-
centered
185-
title={t("tutorial:modalTitle")}
182+
title={
183+
<h2
184+
style={{
185+
fontFamily: "open sans, sans-serif",
186+
fontWeight: 700,
187+
fontSize: 14,
188+
textAlign: "center",
189+
textTransform: "uppercase",
190+
padding: "0 34px"
191+
}}>
192+
{t("tutorial:modalTitle")}
193+
</h2>
194+
}
186195
>
187196
<p
188197
style={{
@@ -197,7 +206,7 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
197206
components={[<AddCircle style={{marginBottom:"-5px",fontSize:"18px"}} key={"icon"} />]}
198207
/>
199208
</p>
200-
209+
201210
<div
202211
style={{
203212
marginTop: 24,

‎src/components/AffixButton/AffixCTAButton.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const CloseIcon = () => {
1616
return (
1717
<InfoTooltip
1818
children={
19-
<CloseOutlined style={{ margin: "10px", color: colors.white }} />
19+
<CloseOutlined style={{ margin: "10px", color: colors.white, position: "absolute", top: 5, right: 5 }} />
2020
}
2121
content={
2222
<span style={{ color: colors.black, fontSize: 15 }}>
@@ -90,13 +90,28 @@ const AffixCTAButton = ({ copilotDrawerWidth }) => {
9090

9191
<AletheiaModal
9292
open={modalVisible}
93-
footer={null}
94-
title={t("NewCTARegistration:body")}
9593
onCancel={() => setModalVisible(false)}
96-
maskClosable={false}
9794
theme="dark"
98-
width={"75%"}
95+
width={vw?.xs ? "100%" : "60%"}
9996
closeIcon={<CloseIcon />}
97+
style={{ alignSelf: "flex-start", paddingTop: "10vh" }}
98+
title={
99+
<div style={{ display: "flex", justifyContent: "space-between" }}>
100+
<h2
101+
style={{
102+
color: colors.white,
103+
fontFamily: "open sans, sans-serif",
104+
fontWeight: 700,
105+
fontSize: 14,
106+
textAlign: "center",
107+
textTransform: "uppercase",
108+
padding: "0 30px",
109+
}}
110+
>
111+
{t("NewCTARegistration:body")}
112+
</h2>
113+
</div>
114+
}
100115
>
101116
<Banner />
102117
</AletheiaModal>

‎src/components/Form/ClassificationModal.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,24 @@ const ClassificationModal = ({
3232
return (
3333
<AletheiaModal
3434
open={open}
35-
footer={false}
3635
onCancel={handleCancel}
37-
setValue={setValue}
38-
title={t("claimReviewForm:classificationLabel")}
3936
style={{
4037
display: "flex",
41-
alingItens: "center",
38+
alignItems: "center",
4239
}}
40+
title={
41+
<h2
42+
style={{
43+
fontFamily: "open sans, sans-serif",
44+
fontWeight: 700,
45+
fontSize: 14,
46+
textAlign: "center",
47+
textTransform: "uppercase",
48+
}}
49+
>
50+
{t("claimReviewForm:classificationLabel")}
51+
</h2>
52+
}
4353
>
4454
<RadioGroup
4555
onChange={onChangeRadio}
@@ -103,7 +113,7 @@ const ClassificationModal = ({
103113
}}
104114
>
105115
<ModalCancelButton
106-
type="text"
116+
type="button"
107117
onClick={handleCancel}
108118
style={{ width: "62%" }}
109119
>

‎src/components/ImageUpload.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,23 @@ const ImageUpload = ({
115115
)}
116116
<AletheiaModal
117117
open={previewOpen}
118-
title={previewTitle}
119-
footer={null}
120118
onCancel={handleCancel}
121119
width={"fit-content"}
120+
style={{ alignSelf: "flex-start", paddingTop: "10vh" }}
121+
title={
122+
<h2
123+
style={{
124+
fontFamily: "open sans, sans-serif",
125+
fontWeight: 700,
126+
fontSize: 14,
127+
textAlign: "center",
128+
textTransform: "uppercase",
129+
padding: "0 34px",
130+
}}
131+
>
132+
{previewTitle}
133+
</h2>
134+
}
122135
>
123136
<img
124137
alt={`preview uploaded file ${previewTitle}`}

‎src/components/Modal/AletheiaModal.style.tsx‎

Lines changed: 102 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,126 @@
1-
import { Button, Modal } from "antd";
1+
import { Dialog, DialogTitle, DialogContent, IconButton, Button } from "@mui/material";
2+
import CloseOutlined from "@mui/icons-material/CloseOutlined";
23
import styled from "styled-components";
34
import colors from "../../styles/colors";
45
import { NameSpaceEnum } from "../../types/Namespace";
56

6-
const AletheiaModal = styled(Modal)`
7-
background: none;
8-
box-shadow: none;
9-
padding: 0;
7+
const DefaultModal = styled(Dialog)`
8+
display: flex;
9+
justify-content: center;
10+
align-self: center;
1011
11-
.ant-modal-content {
12-
width: ${(props) => (props.width ? props.width : "300px")};
13-
margin: 0 auto;
14-
border-radius: 8px;
15-
background-color: ${(props) =>
16-
props.theme === "dark" ? colors.black : colors.lightNeutral};
17-
box-shadow: 0px 0px 15px ${colors.shadow};
18-
padding: 26px 26px;
19-
max-width: 90vw;
20-
}
12+
.MuiDialog-paper {
13+
width: ${(props) => (props.width ? props.width : "300px")};
14+
margin: 0 auto;
15+
border-radius: 8px;
16+
background-color: ${(props) =>
17+
props.theme === "dark" ? colors.black : colors.lightNeutral};
18+
box-shadow: 0px 0px 15px ${colors.shadow};
19+
padding: 24px;
20+
max-width: 90vw;
21+
}
2122
22-
.ant-modal-body {
23-
padding: 0;
24-
}
23+
.MuiDialogTitle-root {
24+
color: ${(props) => props.theme === "dark" ? colors.white : colors.black};
25+
font-size: 14px;
26+
line-height: 20px;
27+
margin-bottom: 12;
28+
padding: 0;
29+
}
2530
26-
.ant-modal-header {
27-
background: none;
28-
border-bottom: 0px;
29-
padding: 0 0 10px 0;
30-
}
31+
.MuiDialogActions-root {
32+
display: flex;
33+
justify-content: center;
34+
font-size: 24px;
35+
line-height: 24px;
36+
padding: 20px 0;
37+
}
3138
32-
.ant-modal-title {
33-
color: ${(props) =>
34-
props.theme === "dark" ? colors.white : colors.black};
35-
font-weight: 700;
36-
font-size: 14px;
37-
text-align: center;
38-
text-transform: uppercase;
39-
padding: 0 32px;
40-
}
39+
.MuiIconButton-root {
40+
top: 10px;
41+
right: 10px;
42+
position: absolute;
43+
color: ${(props) =>
44+
props.theme === "dark" ? colors.white : colors.primary};
45+
}
4146
42-
svg[data-icon="close"] {
43-
margin-top: 26px;
44-
width: 14px;
45-
height: 14px;
46-
color: ${(props) =>
47-
props.theme === "dark" ? colors.white : colors.primary};
48-
margin-right: 20px;
49-
}
47+
.MuiDialogContent-root {
48+
font-size: 14px;
49+
padding: 0;
50+
}
5051
51-
.ant-modal-body .modal-title {
52-
display: flex;
53-
gap: 10px;
54-
width: calc(100% - 20px);
55-
font-size: 24px;
56-
line-height: 24px;
57-
}
52+
.MuiButtonBase-root {
53+
color: ${({ namespace }) =>
54+
namespace === NameSpaceEnum.Main ? colors.primary : colors.secondary};
55+
font-size: 14px;
56+
}
5857
59-
.hide-modal {
60-
color: ${colors.warning};
61-
}
58+
.hide-modal {
59+
color: ${colors.warning};
60+
}
6261
63-
.delete-modal {
64-
color: #ca1105;
65-
}
62+
.delete-modal {
63+
color: #ca1105;
64+
}
6665
`;
6766

6867
const ModalCancelButton = styled(Button)`
6968
height: 40px;
7069
width: 120px;
7170
color: ${({ namespace }) =>
72-
namespace === NameSpaceEnum.Main
73-
? colors.primary
74-
: colors.secondary};
71+
namespace === NameSpaceEnum.Main
72+
? colors.primary
73+
: colors.secondary};
7574
text-align: "center";
7675
font-weight: 700;
7776
font-size: 14;
7877
`;
7978

79+
interface AletheiaModalProps {
80+
open: boolean;
81+
closeIcon?: React.ReactNode;
82+
width?: string;
83+
theme?: string;
84+
namespace?: NameSpaceEnum;
85+
onCancel?: () => void;
86+
style?: React.CSSProperties;
87+
title?: React.ReactNode;
88+
children: React.ReactNode;
89+
}
90+
91+
const AletheiaModal: React.FC<AletheiaModalProps> = ({
92+
open,
93+
closeIcon = true,
94+
onCancel,
95+
style = {},
96+
title,
97+
children,
98+
width,
99+
theme,
100+
namespace
101+
}) => (
102+
<DefaultModal
103+
open={open}
104+
onClose={onCancel}
105+
width={width}
106+
theme={theme}
107+
namespace={namespace}
108+
style={{ ...style }}
109+
>
110+
<DialogTitle>
111+
{title}
112+
{typeof closeIcon === 'boolean' ? (
113+
<IconButton size="small" onClick={onCancel}>
114+
<CloseOutlined />
115+
</IconButton>
116+
) : (
117+
<IconButton size="small" onClick={onCancel}>
118+
{closeIcon}
119+
</IconButton>
120+
)}
121+
</DialogTitle>
122+
<DialogContent>{children}</DialogContent>
123+
</DefaultModal>
124+
);
125+
80126
export { AletheiaModal, ModalCancelButton };

‎src/components/Modal/ModalButtons.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Col } from "antd";
1+
import { Grid } from "@mui/material";
22
import React from "react";
33
import { ModalCancelButton } from "./AletheiaModal.style";
44
import AletheiaButton, { ButtonType } from "../Button";
@@ -8,15 +8,15 @@ const ModalButtons = ({ isLoading, hasCaptcha, handleCancel = null }) => {
88
const { t } = useTranslation();
99

1010
return (
11-
<Col
11+
<Grid item
1212
style={{
1313
marginTop: 32,
1414
display: "flex",
1515
justifyContent: "space-around",
1616
}}
1717
>
1818
{handleCancel && (
19-
<ModalCancelButton type="text" onClick={() => handleCancel()}>
19+
<ModalCancelButton type="button" onClick={() => handleCancel()}>
2020
<span
2121
style={{
2222
textDecorationLine: "underline",
@@ -35,7 +35,7 @@ const ModalButtons = ({ isLoading, hasCaptcha, handleCancel = null }) => {
3535
>
3636
{t("orderModal:okButton")}
3737
</AletheiaButton>
38-
</Col>
38+
</Grid>
3939
);
4040
};
4141

0 commit comments

Comments
 (0)