Change all typography antd for muy

AletheiaFact · Dec 22, 2024 · d7a5f75 · d7a5f75
1 parent a1b40ea
commit d7a5f75
Show file tree

Hide file tree

Showing 15 changed files with 224 additions and 237 deletions.
diff --git a/src/components/AletheiaTitle.tsx b/src/components/AletheiaTitle.tsx
@@ -1,11 +1,10 @@
 import colors from "../styles/colors"
-import { Typography } from "antd";
+import Typography  from "@mui/material/Typography"
 
-const { Title } = Typography
 const AletheiaTitle = (props) => {
     return (
-        <Title
-            level={props.level}
+        <Typography
+            variant={props.variant}
             style={{
                 fontSize: 14,
                 color: colors.white,
@@ -15,7 +14,7 @@ const AletheiaTitle = (props) => {
             }}
         >
             {props.children}
-        </Title>
+        </Typography>
     )
 }
 

diff --git a/src/components/Claim/ClaimCard.tsx b/src/components/Claim/ClaimCard.tsx
@@ -1,4 +1,4 @@
-import { Col, Comment, Row, Typography } from "antd";
+import { Grid, Typography } from "@mui/material"
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "next-i18next";
 import ReviewColors from "../../constants/reviewColors";
@@ -7,7 +7,6 @@ import ClaimSummary from "./ClaimSummary";
 import Button, { ButtonType } from "../Button";
 import ClaimCardHeader from "./ClaimCardHeader";
 import colors from "../../styles/colors";
-import styled from "styled-components";
 import ClaimSummaryContent from "./ClaimSummaryContent";
 import ClaimSpeechBody from "./ClaimSpeechBody";
 import actions from "../../store/actions";
@@ -18,15 +17,6 @@ import { useAtom } from "jotai";
 import { currentNameSpace } from "../../atoms/namespace";
 import { NameSpaceEnum } from "../../types/Namespace";
 
-const { Paragraph } = Typography;
-
-const CommentStyled = styled(Comment)`
-    width: 100%;
-    .ant-comment-inner {
-        padding: 0;
-    }
-`;
-
 const ClaimCard = ({
     personality,
     claim,
@@ -87,51 +77,45 @@ const ClaimCard = ({
 
     return (
         <CardBase style={{ padding: "16px 12px" }}>
-            <Row style={{ width: "100%" }}>
-                <CommentStyled
-                    author={
-                        <ClaimCardHeader
-                            personality={personality}
-                            date={claim?.date}
-                            claimType={claim?.contentModel}
-                        />
-                    }
-                    content={
-                        <ClaimSummary
-                            style={{
-                                padding: "12px 16px",
-                                width: "100%",
-                            }}
-                        >
-                            {collapsed ? (
-                                <ClaimSummaryContent
-                                    claimTitle={claim?.title}
-                                    claimContent={claimContent}
-                                    contentModel={claim?.contentModel}
-                                    href={href}
-                                />
-                            ) : (
-                                <ClaimSpeechBody
-                                    handleSentenceClick={
-                                        dispatchPersonalityAndClaim
-                                    }
-                                    paragraphs={paragraphs}
-                                    showHighlights={true}
-                                />
-                            )}
-                        </ClaimSummary>
-                    }
+            <Grid container style={{ width: "100%" }}>
+                <ClaimCardHeader
+                    personality={personality}
+                    date={claim?.date}
+                    claimType={claim?.contentModel}
                 />
-            </Row>
-            <Row
+                <ClaimSummary
+                    style={{
+                        padding: "12px 16px",
+                        width: "100%",
+                    }}
+                >
+                    {collapsed ? (
+                        <ClaimSummaryContent
+                            claimTitle={claim?.title}
+                            claimContent={claimContent}
+                            contentModel={claim?.contentModel}
+                            href={href}
+                        />
+                    ) : (
+                        <ClaimSpeechBody
+                            handleSentenceClick={
+                                dispatchPersonalityAndClaim
+                            }
+                            paragraphs={paragraphs}
+                            showHighlights={true}
+                        />
+                    )}
+                </ClaimSummary>
+            </Grid>
+            <Grid container
                 style={{
+                    justifyContent:"space-between",
                     padding: "4px 15px 0 0",
                     width: "100%",
                 }}
-                justify="space-between"
             >
-                <Col
-                    span={16}
+                <Grid item
+                    xs={8}
                     style={{
                         display: "flex",
                         flexWrap: "wrap",
@@ -152,7 +136,8 @@ const ClaimCard = ({
                             })}
                         </p>
                     )}{" "}
-                    <Paragraph
+                    <Typography
+                        variant="body1"
                         style={{
                             fontSize: "10px",
                             lineHeight: "18px",
@@ -178,9 +163,9 @@ const ClaimCard = ({
                                 ({review?.count})
                             </span>
                         )}
-                    </Paragraph>
-                </Col>
-                <Col>
+                    </Typography>
+                </Grid>
+                <Grid item>
                     {!isInsideDebate && (
                         <Button
                             type={ButtonType.blue}
@@ -201,8 +186,8 @@ const ClaimCard = ({
                             </span>
                         </Button>
                     )}
-                </Col>
-            </Row>
+                </Grid>
+            </Grid>
         </CardBase>
     );
 };

diff --git a/src/components/Claim/ClaimCardHeader.tsx b/src/components/Claim/ClaimCardHeader.tsx
@@ -1,12 +1,10 @@
-import { Col, Row, Typography } from "antd";
+import { Grid, Typography } from "@mui/material"
 import { useTranslation } from "next-i18next";
 import React from "react";
 import colors from "../../styles/colors";
 import { ContentModelEnum } from "../../types/enums";
 import LocalizedDate from "../LocalizedDate";
 
-const { Paragraph } = Typography;
-
 const ClaimCardHeader = ({
     personality,
     date,
@@ -23,16 +21,17 @@ const ClaimCardHeader = ({
 
     const speechTypeTranslation = speechTypeMapping[claimType];
     return (
-        <Col
-            span={24}
+        <Grid item
+            xs={12}
             style={{
                 color: colors.blackSecondary,
                 width: "100%",
             }}
         >
             {personality && (
                 <>
-                    <Paragraph
+                    <Typography
+                        variant="body1"
                         style={{
                             fontSize: "14px",
                             lineHeight: "20px",
@@ -42,10 +41,11 @@ const ClaimCardHeader = ({
                         }}
                     >
                         {personality.name}
-                    </Paragraph>
+                    </Typography>
 
-                    <Row>
-                        <Paragraph
+                    <Grid container>
+                        <Typography
+                            variant="body1"
                             style={{
                                 fontSize: 10,
                                 fontWeight: 400,
@@ -54,13 +54,14 @@ const ClaimCardHeader = ({
                             }}
                         >
                             {personality.description}
-                        </Paragraph>
-                    </Row>
+                        </Typography>
+                    </Grid>
                 </>
             )}
-            <Row>
+            <Grid container>
                 {!isImage ? (
-                    <Paragraph
+                    <Typography
+                        variant="body1"
                         style={{
                             fontSize: 10,
                             fontWeight: 400,
@@ -76,9 +77,10 @@ const ClaimCardHeader = ({
                         <span style={{ fontWeight: 700 }}>
                             {speechTypeTranslation}
                         </span>
-                    </Paragraph>
+                    </Typography>
                 ) : (
-                    <Paragraph
+                    <Typography
+                        variant="body1"
                         style={{
                             fontSize: 10,
                             fontWeight: 400,
@@ -90,10 +92,10 @@ const ClaimCardHeader = ({
                         {t("claim:cardHeader3")}
                         &nbsp;
                         <LocalizedDate date={date || new Date()} />
-                    </Paragraph>
+                    </Typography>
                 )}
-            </Row>
-        </Col>
+            </Grid>
+        </Grid>
     );
 };
 

diff --git a/src/components/Claim/ClaimInfo.tsx b/src/components/Claim/ClaimInfo.tsx
@@ -1,21 +1,8 @@
 import React from "react";
-
-import { Typography } from "antd";
+import Typography from "@mui/material/Typography";
 import { useTranslation } from "next-i18next";
 import LocalizedDate from "../LocalizedDate";
 import colors from "../../styles/colors";
-import styled from "styled-components";
-
-const { Paragraph } = Typography;
-
-const ClaimInfoParagraph = styled(Paragraph)`
-    font-size: 10px;
-    font-weight: 400;
-    line-height: 15px;
-    margin-bottom: 0;
-    margin-top: 20px;
-    color: ${colors.blackSecondary};
-`;
 
 const ClaimInfo = ({
     isImage,
@@ -24,22 +11,35 @@ const ClaimInfo = ({
     style = {},
 }) => {
     const { t } = useTranslation();
+    const textstyle = {
+        marginTop: 20,
+        color: colors.blackSecondary,
+        fontSize: 10,
+        lineHeight: "16px",
+        ...style
+    }
 
     return (
         <>
             {!isImage ? (
-                <ClaimInfoParagraph style={style}>
+                <Typography
+                    variant="body1"
+                    style={textstyle}
+                >
                     {t("claim:cardHeader1")}&nbsp;
                     <LocalizedDate date={date || new Date()} />
                     &nbsp;
                     {t("claim:cardHeader2")}&nbsp;
                     <strong>{t(speechTypeTranslation)}</strong>
-                </ClaimInfoParagraph>
+                </Typography>
             ) : (
-                <ClaimInfoParagraph style={style}>
+                <Typography
+                    variant="body1"
+                    style={textstyle}
+                    >
                     {t("claim:cardHeader3")}&nbsp;
                     <LocalizedDate date={date || new Date()} />
-                </ClaimInfoParagraph>
+                </Typography>
             )}
         </>
     );