Skip to content

Commit 2943f31

Browse files
thesocialdevthesocialdev
authored
Merge pull request #1683 from AletheiaFact/Change-all-typography-antd-for-muy
Change all typography antd for muy
2 parents f347ab6 + d26d91d commit 2943f31

File tree

18 files changed

+257
-245
lines changed

18 files changed

+257
-245
lines changed

‎src/components/AletheiaTitle.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import colors from "../styles/colors"
2-
import { Typography } from "antd";
2+
import Typography from "@mui/material/Typography"
33

4-
const { Title } = Typography
54
const AletheiaTitle = (props) => {
65
return (
7-
<Title
8-
level={props.level}
6+
<Typography
7+
variant={props.variant}
98
style={{
109
fontSize: 14,
1110
color: colors.white,
@@ -15,7 +14,7 @@ const AletheiaTitle = (props) => {
1514
}}
1615
>
1716
{props.children}
18-
</Title>
17+
</Typography>
1918
)
2019
}
2120

‎src/components/Claim/ClaimCard.tsx‎

Lines changed: 41 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Col, Comment, Row, Typography } from "antd";
1+
import { Grid, Typography } from "@mui/material"
22
import React, { useEffect, useState } from "react";
33
import { useTranslation } from "next-i18next";
44
import ReviewColors from "../../constants/reviewColors";
@@ -7,7 +7,6 @@ import ClaimSummary from "./ClaimSummary";
77
import Button, { ButtonType } from "../Button";
88
import ClaimCardHeader from "./ClaimCardHeader";
99
import colors from "../../styles/colors";
10-
import styled from "styled-components";
1110
import ClaimSummaryContent from "./ClaimSummaryContent";
1211
import ClaimSpeechBody from "./ClaimSpeechBody";
1312
import actions from "../../store/actions";
@@ -18,15 +17,6 @@ import { useAtom } from "jotai";
1817
import { currentNameSpace } from "../../atoms/namespace";
1918
import { NameSpaceEnum } from "../../types/Namespace";
2019

21-
const { Paragraph } = Typography;
22-
23-
const CommentStyled = styled(Comment)`
24-
width: 100%;
25-
.ant-comment-inner {
26-
padding: 0;
27-
}
28-
`;
29-
3020
const ClaimCard = ({
3121
personality,
3222
claim,
@@ -87,51 +77,45 @@ const ClaimCard = ({
8777

8878
return (
8979
<CardBase style={{ padding: "16px 12px" }}>
90-
<Row style={{ width: "100%" }}>
91-
<CommentStyled
92-
author={
93-
<ClaimCardHeader
94-
personality={personality}
95-
date={claim?.date}
96-
claimType={claim?.contentModel}
97-
/>
98-
}
99-
content={
100-
<ClaimSummary
101-
style={{
102-
padding: "12px 16px",
103-
width: "100%",
104-
}}
105-
>
106-
{collapsed ? (
107-
<ClaimSummaryContent
108-
claimTitle={claim?.title}
109-
claimContent={claimContent}
110-
contentModel={claim?.contentModel}
111-
href={href}
112-
/>
113-
) : (
114-
<ClaimSpeechBody
115-
handleSentenceClick={
116-
dispatchPersonalityAndClaim
117-
}
118-
paragraphs={paragraphs}
119-
showHighlights={true}
120-
/>
121-
)}
122-
</ClaimSummary>
123-
}
80+
<Grid container style={{ width: "100%" }}>
81+
<ClaimCardHeader
82+
personality={personality}
83+
date={claim?.date}
84+
claimType={claim?.contentModel}
12485
/>
125-
</Row>
126-
<Row
86+
<ClaimSummary
87+
style={{
88+
padding: "12px 16px",
89+
width: "100%",
90+
}}
91+
>
92+
{collapsed ? (
93+
<ClaimSummaryContent
94+
claimTitle={claim?.title}
95+
claimContent={claimContent}
96+
contentModel={claim?.contentModel}
97+
href={href}
98+
/>
99+
) : (
100+
<ClaimSpeechBody
101+
handleSentenceClick={
102+
dispatchPersonalityAndClaim
103+
}
104+
paragraphs={paragraphs}
105+
showHighlights={true}
106+
/>
107+
)}
108+
</ClaimSummary>
109+
</Grid>
110+
<Grid container
127111
style={{
112+
justifyContent:"space-between",
128113
padding: "4px 15px 0 0",
129114
width: "100%",
130115
}}
131-
justify="space-between"
132116
>
133-
<Col
134-
span={16}
117+
<Grid item
118+
xs={8}
135119
style={{
136120
display: "flex",
137121
flexWrap: "wrap",
@@ -152,7 +136,8 @@ const ClaimCard = ({
152136
})}
153137
</p>
154138
)}{" "}
155-
<Paragraph
139+
<Typography
140+
variant="body1"
156141
style={{
157142
fontSize: "10px",
158143
lineHeight: "18px",
@@ -178,9 +163,9 @@ const ClaimCard = ({
178163
({review?.count})
179164
</span>
180165
)}
181-
</Paragraph>
182-
</Col>
183-
<Col>
166+
</Typography>
167+
</Grid>
168+
<Grid item>
184169
{!isInsideDebate && (
185170
<Button
186171
type={ButtonType.blue}
@@ -201,8 +186,8 @@ const ClaimCard = ({
201186
</span>
202187
</Button>
203188
)}
204-
</Col>
205-
</Row>
189+
</Grid>
190+
</Grid>
206191
</CardBase>
207192
);
208193
};

‎src/components/Claim/ClaimCardHeader.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import { Col, Row, Typography } from "antd";
1+
import { Grid, Typography } from "@mui/material"
22
import { useTranslation } from "next-i18next";
33
import React from "react";
44
import colors from "../../styles/colors";
55
import { ContentModelEnum } from "../../types/enums";
66
import LocalizedDate from "../LocalizedDate";
77

8-
const { Paragraph } = Typography;
9-
108
const ClaimCardHeader = ({
119
personality,
1210
date,
@@ -23,16 +21,17 @@ const ClaimCardHeader = ({
2321

2422
const speechTypeTranslation = speechTypeMapping[claimType];
2523
return (
26-
<Col
27-
span={24}
24+
<Grid item
25+
xs={12}
2826
style={{
2927
color: colors.blackSecondary,
3028
width: "100%",
3129
}}
3230
>
3331
{personality && (
3432
<>
35-
<Paragraph
33+
<Typography
34+
variant="body1"
3635
style={{
3736
fontSize: "14px",
3837
lineHeight: "20px",
@@ -42,10 +41,11 @@ const ClaimCardHeader = ({
4241
}}
4342
>
4443
{personality.name}
45-
</Paragraph>
44+
</Typography>
4645

47-
<Row>
48-
<Paragraph
46+
<Grid container>
47+
<Typography
48+
variant="body1"
4949
style={{
5050
fontSize: 10,
5151
fontWeight: 400,
@@ -54,13 +54,14 @@ const ClaimCardHeader = ({
5454
}}
5555
>
5656
{personality.description}
57-
</Paragraph>
58-
</Row>
57+
</Typography>
58+
</Grid>
5959
</>
6060
)}
61-
<Row>
61+
<Grid container>
6262
{!isImage ? (
63-
<Paragraph
63+
<Typography
64+
variant="body1"
6465
style={{
6566
fontSize: 10,
6667
fontWeight: 400,
@@ -76,9 +77,10 @@ const ClaimCardHeader = ({
7677
<span style={{ fontWeight: 700 }}>
7778
{speechTypeTranslation}
7879
</span>
79-
</Paragraph>
80+
</Typography>
8081
) : (
81-
<Paragraph
82+
<Typography
83+
variant="body1"
8284
style={{
8385
fontSize: 10,
8486
fontWeight: 400,
@@ -90,10 +92,10 @@ const ClaimCardHeader = ({
9092
{t("claim:cardHeader3")}
9193
&nbsp;
9294
<LocalizedDate date={date || new Date()} />
93-
</Paragraph>
95+
</Typography>
9496
)}
95-
</Row>
96-
</Col>
97+
</Grid>
98+
</Grid>
9799
);
98100
};
99101

‎src/components/Claim/ClaimInfo.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,8 @@
11
import React from "react";
2-
3-
import { Typography } from "antd";
2+
import Typography from "@mui/material/Typography";
43
import { useTranslation } from "next-i18next";
54
import LocalizedDate from "../LocalizedDate";
65
import colors from "../../styles/colors";
7-
import styled from "styled-components";
8-
9-
const { Paragraph } = Typography;
10-
11-
const ClaimInfoParagraph = styled(Paragraph)`
12-
font-size: 10px;
13-
font-weight: 400;
14-
line-height: 15px;
15-
margin-bottom: 0;
16-
margin-top: 20px;
17-
color: ${colors.blackSecondary};
18-
`;
196

207
const ClaimInfo = ({
218
isImage,
@@ -24,22 +11,35 @@ const ClaimInfo = ({
2411
style = {},
2512
}) => {
2613
const { t } = useTranslation();
14+
const textstyle = {
15+
marginTop: 20,
16+
color: colors.blackSecondary,
17+
fontSize: 10,
18+
lineHeight: "16px",
19+
...style
20+
}
2721

2822
return (
2923
<>
3024
{!isImage ? (
31-
<ClaimInfoParagraph style={style}>
25+
<Typography
26+
variant="body1"
27+
style={textstyle}
28+
>
3229
{t("claim:cardHeader1")}&nbsp;
3330
<LocalizedDate date={date || new Date()} />
3431
&nbsp;
3532
{t("claim:cardHeader2")}&nbsp;
3633
<strong>{t(speechTypeTranslation)}</strong>
37-
</ClaimInfoParagraph>
34+
</Typography>
3835
) : (
39-
<ClaimInfoParagraph style={style}>
36+
<Typography
37+
variant="body1"
38+
style={textstyle}
39+
>
4040
{t("claim:cardHeader3")}&nbsp;
4141
<LocalizedDate date={date || new Date()} />
42-
</ClaimInfoParagraph>
42+
</Typography>
4343
)}
4444
</>
4545
);

0 commit comments

Comments
 (0)