AletheiaFact · thesocialdev · Jan 18, 2025 · Jan 17, 2025
@@ -2,15 +2,12 @@ import React from "react";
 import { ContentModelEnum } from "../../types/enums";
 import SentenceReportSummary from "./SentenceReportSummary";
 import { generateSentenceContentPath } from "../../utils/GetSentenceContentHref";
-import { Typography } from "antd";
 import ClaimInfo from "../Claim/ClaimInfo";
 import { useAtom } from "jotai";
 import { currentNameSpace } from "../../atoms/namespace";
 import { useTranslation } from "next-i18next";
 import ReviewContent from "../ClaimReview/ReviewContent";
 
-const { Paragraph } = Typography;
-
 const ClaimSummaryDisplay = ({
     claim,
     personality,
@@ -76,7 +73,7 @@ const ClaimSummaryDisplay = ({
 
     return (
         <>
-            <SentenceReportSummary className={personality ? "after" : ""}>
+            <SentenceReportSummary container className={personality ? "after" : ""}>
                 <ReviewContent
                     title={isImage ? claim?.title : title}
                     content={content?.content}

@@ -1,9 +1,9 @@
 import styled from "styled-components";
 import colors from "../../styles/colors";
 import { queries } from "../../styles/mediaQueries";
-import { Row } from "antd";
+import { Grid } from "@mui/material";
 
-const SentenceReportCardStyle = styled(Row)`
+const SentenceReportCardStyle = styled(Grid)`
     padding-top: 32px;
 
     .sentence-card {

@@ -1,4 +1,4 @@
-import { Col, Typography } from "antd";
+import { Grid, Typography } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React, { useContext } from "react";
 
@@ -13,8 +13,6 @@ import ClaimSummaryDisplay from "./ClaimSummaryDisplay";
 import SourceSummaryDisplay from "./SourceSummaryDisplay";
 import VerificationRequestDisplay from "../VerificationRequest/VerificationRequestDisplay";
 
-const { Title } = Typography;
-
 const SentenceReportCard = ({
     target,
     personality,
@@ -39,32 +37,31 @@ const SentenceReportCard = ({
         reviewTaskType === ReviewTaskTypeEnum.VerificationRequest;
 
     return (
-        <SentenceReportCardStyle>
+        <SentenceReportCardStyle container>
             {personality && (
-                <Col md={6} sm={24}>
+                <Grid item md={3} sm={12}>
                     <PersonalityMinimalCard
                         personality={personality}
                         avatarSize={80}
                     />
-                </Col>
+                </Grid>
             )}
-            <Col
-                lg={personality ? 18 : 24}
-                md={personality ? (md && !sm ? 17 : 18) : 24}
-                offset={personality && md && !sm ? 1 : 0}
-                sm={24}
+            <Grid item
+                lg={personality ? 9 : 12}
+                md={personality ? (md && !sm ? 8.5 : 9) : 12}
+                sm={12}
                 className="sentence-card"
             >
                 {classification && (
-                    <Title className="classification" level={1}>
+                    <Typography variant="h1" className="classification">
                         <ReviewClassification
                             // TODO: Create a more meaningful h1 for this page
                             label={t(
                                 `claimReview:title${reviewTaskType}Review`
                             )}
                             classification={classification}
                         />
-                    </Title>
+                    </Typography>
                 )}
                 {isClaim && (
                     <ClaimSummaryDisplay
@@ -86,7 +83,7 @@ const SentenceReportCard = ({
                         style={{ padding: "10px" }}
                     />
                 )}
-            </Col>
+            </Grid>
         </SentenceReportCardStyle>
     );
 };

@@ -2,12 +2,16 @@ import styled from "styled-components";
 
 const SentenceReportContentStyle = styled.div`
     margin: 10px 0;
-    word-break: break-word;
+    .report-Divider{
+      margin: 24px 0;
+
+    }
 
     .title {
         font-size: 16px;
         font-weight: 700;
         text-transform: uppercase;
+        margin-bottom: 16px;
     }
 
     .paragraph {

@@ -1,4 +1,4 @@
-import { Col, Divider, Typography } from "antd";
+import { Grid, Divider, Typography } from "@mui/material";
 
 import React, { useContext } from "react";
 import SentenceReportContentStyle from "./SentenceReportContent.style";
@@ -10,7 +10,6 @@ import { useSelector } from "@xstate/react";
 import { publishedSelector } from "../../machines/reviewTask/selectors";
 import { ReviewTaskMachineContext } from "../../machines/reviewTask/ReviewTaskMachineProvider";
 
-const { Paragraph } = Typography;
 const SentenceReportContent = ({
     context,
     classification,
@@ -32,36 +31,35 @@ const SentenceReportContent = ({
     return (
         <SentenceReportContentStyle>
             {showClassification && classification && (
-                <Col span={24}>
-                    <Paragraph className="title">
+                <Grid item xs={12}>
+                    <Typography variant="body1" className="title">
                         {t(`claimReview:title${reviewTaskType}Review`)}
-                    </Paragraph>
-                    <Paragraph className="paragraph">
+                    </Typography>
+                    <Typography variant="body1" className="paragraph">
                         <ClassificationText classification={classification} />
-                    </Paragraph>
-                    <Divider />
-                </Col>
+                    </Typography>
+                    <Divider className="report-Divider" />
+                </Grid>
             )}
             {summary && (
-                <Col span={24}>
-                    <Paragraph className="title">
+                <Grid item xs={12}>
+                    <Typography variant="body1" className="title">
                         {t("claimReview:summarySectionTitle")}
-                    </Paragraph>
-                    <Paragraph className="paragraph">
-                        <p
-                            dangerouslySetInnerHTML={{
-                                __html: sanitizer(summary),
-                            }}
-                        />
-                    </Paragraph>
-                    <Divider />
-                </Col>
+                    </Typography>
+                    <p
+                        dangerouslySetInnerHTML={{
+                            __html: sanitizer(summary),
+                        }}
+                        className="paragraph"
+                    />
+                    <Divider className="report-Divider" />
+                </Grid>
             )}
             {questions && questions.length > 0 && (
-                <Col span={24}>
-                    <Paragraph className="title">
+                <Grid item xs={12}>
+                    <Typography variant="body1" className="title">
                         {t("claimReview:questionsSectionTitle")}
-                    </Paragraph>
+                    </Typography>
                     {questions.map((item) => {
                         return (
                             <li
@@ -73,49 +71,49 @@ const SentenceReportContent = ({
                             />
                         );
                     })}
-                    <Divider />
-                </Col>
+                    <Divider className="report-Divider" />
+                </Grid>
             )}
             {report && (
-                <Col span={24}>
-                    <Paragraph className="title">
+                <Grid item xs={12}>
+                    <Typography variant="body1" className="title">
                         {t("claimReview:verificationSectionTitle")}
-                    </Paragraph>
+                    </Typography>
                     <p
                         dangerouslySetInnerHTML={{ __html: sanitizer(report) }}
                         className="paragraph"
                     />
-                    <Divider />
-                </Col>
+                    <Divider className="report-Divider" />
+                </Grid>
             )}
             {verification && (
-                <Col span={24}>
-                    <Paragraph className="title">
+                <Grid item xs={12}>
+                    <Typography variant="body1" className="title">
                         {t("claimReview:howSectionTitle")}
-                    </Paragraph>
+                    </Typography>
                     <p
                         dangerouslySetInnerHTML={{
                             __html: sanitizer(verification),
                         }}
                         className="paragraph"
                     />
-                    <Divider />
-                </Col>
+                    <Divider className="report-Divider" />
+                </Grid>
             )}
-            <Col span={24}>
+            <Grid item xs={12}>
                 {sources && sources?.length > 0 && (
                     <>
-                        <Typography.Title level={4}>
+                        <Typography className="title" variant="h4">
                             {t("claim:sourceSectionTitle")}
-                        </Typography.Title>
+                        </Typography>
                         <ClaimSourceList
                             sources={sortedSources}
                             seeMoreHref={`${href}/sources`}
                             showAllSources={showAllSources}
                         />
                     </>
                 )}
-            </Col>
+            </Grid>
         </SentenceReportContentStyle>
     );
 };

@@ -1,6 +1,6 @@
 import React from "react";
 import CTARegistration from "../Home/CTARegistration";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import SentenceReportComments from "./SentenceReportComments";
 import SentenceReportContent from "./SentenceReportContent";
 import { isUserLoggedIn } from "../../atoms/currentUser";
@@ -14,7 +14,7 @@ const SentenceReportPreview = ({
 }) => {
     const [isLoggedIn] = useAtom(isUserLoggedIn);
     return (
-        <Col span={componentStyle.span} offset={componentStyle.offset}>
+        <Grid item xs={componentStyle.span}>
             {canShowReportPreview && (
                 <SentenceReportComments context={context} />
             )}
@@ -25,7 +25,7 @@ const SentenceReportPreview = ({
                 href={href}
             />
             {!isLoggedIn && <CTARegistration />}
-        </Col>
+        </Grid>
     );
 };
 

@@ -94,9 +94,9 @@ const SentenceReportPreviewView = ({
             <Grid container
                 justifyContent="center"
                 style={
-                    (isCrossChecking || isReport || isReviewing) && {
-                        backgroundColor: colors.lightNeutral,
-                    }
+                    (isCrossChecking || isReport || isReviewing)
+                        ? { backgroundColor: colors.error }
+                        : undefined
                 }
             >
                 {canShowReport && (

@@ -1,9 +1,9 @@
-import { Row } from "antd";
+import { Grid } from "@mui/material";
 import colors from "../../styles/colors";
 import styled from "styled-components";
 import { queries } from "../../styles/mediaQueries";
 
-const SentenceReportSummary = styled(Row)`
+const SentenceReportSummary = styled(Grid)`
     position: relative;
     margin: 8px 0 16px 4px;
     padding: 16px 24px;

@@ -22,11 +22,11 @@ export default {
 } as ComponentMeta<typeof SentenceReportSummary>;
 
 export const Default = (args) => (
-    <SentenceReportSummary>{args.content}</SentenceReportSummary>
+    <SentenceReportSummary container>{args.content}</SentenceReportSummary>
 );
 
 export const ClaimReview = (args) => (
-    <SentenceReportSummary className="claim-review">
+    <SentenceReportSummary container className="claim-review">
         {args.content}
     </SentenceReportSummary>
 );