Merge pull request #1656 from AletheiaFact/Change-just-Rows-alone-ant…

…d-for-muy Adapting imports of {Row} alone and { Row, Col } together to Grid/mui
AletheiaFact · Dec 18, 2024 · db0ca26 · db0ca26
2 parents d15fe0d + 6a52842
commit db0ca26
Show file tree

Hide file tree

Showing 33 changed files with 150 additions and 155 deletions.
diff --git a/src/components/CardBase.tsx b/src/components/CardBase.tsx
@@ -1,9 +1,9 @@
-import { Row } from "antd";
+import { Grid } from "@mui/material"
 import colors from "../styles/colors";
 
 const CardBase = ({ children, style = {} }) => {
     return (
-        <Row style={{
+        <Grid container style={{
             background: colors.white,
             border: `1px solid ${colors.lightNeutralSecondary}`,
             boxSizing: "border-box",
@@ -13,7 +13,7 @@ const CardBase = ({ children, style = {} }) => {
             ...style
         }}>
             {children}
-        </Row>
+        </Grid>
     )
 }
 

diff --git a/src/components/Claim/ClaimListView.tsx b/src/components/Claim/ClaimListView.tsx
@@ -1,4 +1,4 @@
-import { Row, Col } from "antd";
+import { Grid } from "@mui/material"
 import React from "react";
 import ClaimList from "./ClaimList";
 import SourceList from "../Source/SourceList";
@@ -8,19 +8,19 @@ const ClaimListView = () => {
     const { t } = useTranslation();
     return (
         <>
-            <Row justify="center" style={{ marginTop: "64px" }}>
-                <Col sm={22} md={14} lg={21}>
+            <Grid container style={{ marginTop: "64px", justifyContent:"center" }}>
+                <Grid item sm={11} md={7} lg={10.5}>
                     <h1 style={{ fontSize: 32 }}>
                         {t("claim:claimListTitle")}
                     </h1>
-                </Col>
-                <Col sm={22} md={14} lg={12}>
+                </Grid>
+                <Grid item sm={11} md={7} lg={6}>
                     <SourceList />
-                </Col>
-                <Col offset={1} sm={22} md={14} lg={8}>
+                </Grid>
+                <Grid item style={{margin:"0 20px"}} sm={11} md={7} lg={4}>
                     <ClaimList columns={1} personality={{ _id: null }} />
-                </Col>
-            </Row>
+                </Grid>
+            </Grid>
         </>
     );
 };

diff --git a/src/components/Claim/ClaimSummary.tsx b/src/components/Claim/ClaimSummary.tsx
@@ -1,8 +1,8 @@
-import { Row } from "antd";
+import { Grid } from "@mui/material"
 import styled from "styled-components";
 import colors from "../../styles/colors";
 
-const ClaimSummary = styled(Row)`
+const ClaimSummary = styled(Grid)`
     position: relative;
     background: ${colors.lightNeutralSecondary};
     display:flex;

diff --git a/src/components/Claim/CreateClaim/ClaimSelectType.tsx b/src/components/Claim/CreateClaim/ClaimSelectType.tsx
@@ -53,8 +53,9 @@ const ClaimSelectType = () => {
                 </p>
             </div>
 
-            <Grid
+            <Grid container
                 style={{
+                    gap: "10px",
                     margin: "24px 0",
                     display: "flex",
                     justifyContent: "space-evenly",

diff --git a/src/components/Claim/CreateClaim/ClaimUploadImage.tsx b/src/components/Claim/CreateClaim/ClaimUploadImage.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Row } from "antd";
+import { Grid } from "@mui/material"
 import { UploadFile } from "antd/lib/upload/interface";
 import { useAtom } from "jotai";
 import { useTranslation } from "next-i18next";
@@ -94,13 +94,13 @@ const ClaimUploadImage = () => {
                 isLoading={isLoading}
                 dateExtraText={t("claimForm:dateFieldHelpImage")}
                 content={
-                    <Row style={{ marginBottom: 24 }}>
+                    <Grid container style={{ marginBottom: 24 }}>
                         <Label required>{t("claimForm:fileInputButton")}</Label>
                         <ImageUpload
                             onChange={handleAntdChange}
                             error={imageError}
                         />
-                    </Row>
+                    </Grid>
                 }
             />
         </>

diff --git a/src/components/Claim/CreateClaim/CreateClaimView.tsx b/src/components/Claim/CreateClaim/CreateClaimView.tsx
@@ -1,4 +1,4 @@
-import { Col, Row } from "antd";
+import { Grid } from "@mui/material"
 import { useAtom } from "jotai";
 import React, { useState } from "react";
 
@@ -77,8 +77,8 @@ const CreateClaimView = () => {
     };
 
     return (
-        <Row justify="center">
-            <Col span={18} style={{ marginTop: 32 }}>
+        <Grid container style={{justifyContent:"center"}}>
+            <Grid item xs={9} style={{ marginTop: 32 }}>
                 {!isLoading &&
                     claimData?.group &&
                     claimData?.group?.content?.length > 0 && (
@@ -101,7 +101,7 @@ const CreateClaimView = () => {
                 {addDebate && <ClaimCreateDebate />}
                 {isLoading && <Loading />}
                 {addUnattributed && <ClaimCreate />}
-            </Col>
+            </Grid>
 
             <VerificationRequestDrawer
                 groupContent={claimData.group.content}
@@ -110,7 +110,7 @@ const CreateClaimView = () => {
                 onCloseDrawer={onCloseDrawer}
                 onRemove={onRemove}
             />
-        </Row>
+        </Grid>
     );
 };
 

diff --git a/src/components/ClaimReview/ClaimReviewDrawer.tsx b/src/components/ClaimReview/ClaimReviewDrawer.tsx
@@ -2,7 +2,7 @@ import {
     ArrowLeftOutlined,
     ExclamationCircleOutlined,
 } from "@ant-design/icons";
-import { Col, Row } from "antd";
+import { Grid } from "@mui/material"
 import { useTranslation } from "next-i18next";
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
@@ -62,16 +62,16 @@ const ClaimReviewDrawer = () => {
                     }
                 >
                     <VisualEditorProvider data_hash={data_hash}>
-                        <Row
-                            justify="space-between"
+                        <Grid container
                             style={{
                                 width: "100%",
                                 padding: "1rem",
                                 display: "flex",
                                 flexDirection: "column",
+                                justifyContent:"space-between"
                             }}
                         >
-                            <Col style={{ display: "flex", gap: 32 }}>
+                            <Grid item style={{ display: "flex", gap: 32 }}>
                                 <AletheiaButton
                                     icon={<ArrowLeftOutlined />}
                                     onClick={() =>
@@ -82,7 +82,7 @@ const ClaimReviewDrawer = () => {
                                 >
                                     {t("common:back_button")}
                                 </AletheiaButton>
-                                <Col span={vw?.xs ? 8 : 14}>
+                                <Grid item xs={vw?.xs ? 4 : 7}>
                                     <AletheiaButton
                                         href={generateReviewContentPath(
                                             nameSpace,
@@ -102,10 +102,10 @@ const ClaimReviewDrawer = () => {
                                     >
                                         {t("reviewTask:seeFullPage")}
                                     </AletheiaButton>
-                                </Col>
-                            </Col>
+                                </Grid>
+                            </Grid>
                             {enableCopilotChatBot && (
-                                <Col
+                                <Grid item
                                     style={{
                                         display: "flex",
                                         justifyContent: "center",
@@ -128,9 +128,9 @@ const ClaimReviewDrawer = () => {
                                     >
                                         {t("copilotChatBot:copilotWarning")}
                                     </span>
-                                </Col>
+                                </Grid>
                             )}
-                        </Row>
+                        </Grid>
                         <ClaimReviewView
                             personality={personality}
                             target={target}

diff --git a/src/components/ClaimReview/ClaimReviewForm.tsx b/src/components/ClaimReview/ClaimReviewForm.tsx
@@ -1,4 +1,4 @@
-import { Col, Row } from "antd";
+import { Grid } from "@mui/material"
 import React, { useContext, useEffect, useState } from "react";
 import {
     reviewingSelector,
@@ -72,13 +72,14 @@ const ClaimReviewForm = ({
     }, [isUnassigned]);
 
     return (
-        <Row
+        <Grid container
             style={{
                 background: colors.lightNeutral,
                 padding: "20px 15px",
+                justifyContent:"center"
             }}
         >
-            <Col span={componentStyle.span} offset={componentStyle.offset}>
+            <Grid item xs={componentStyle.span}>
                 {formCollapsed && (
                     <ReportModelButtons setFormCollapsed={setFormCollapsed} />
                 )}
@@ -90,8 +91,8 @@ const ClaimReviewForm = ({
                         target={target?._id}
                     />
                 )}
-            </Col>
-        </Row>
+            </Grid>
+        </Grid>
     );
 };
 

diff --git a/src/components/ClaimReview/ClaimReviewHeader.tsx b/src/components/ClaimReview/ClaimReviewHeader.tsx
@@ -1,5 +1,5 @@
 import { useSelector } from "@xstate/react";
-import { Col, Row } from "antd";
+import { Grid } from "@mui/material"
 import React, { useContext } from "react";
 
 import { ReviewTaskMachineContext } from "../../machines/reviewTask/ReviewTaskMachineProvider";
@@ -45,25 +45,21 @@ const ClaimReviewHeader = ({
         reviewTaskType === ReviewTaskTypeEnum.VerificationRequest;
 
     return (
-        <Row
+        <Grid container
             style={{
+                justifyContent:"center",
                 background:
                     isPublished &&
                     reviewTaskType !== ReviewTaskTypeEnum.VerificationRequest
                         ? "none"
                         : colors.lightNeutral,
             }}
         >
-            <Col offset={componentStyle.offset} span={componentStyle.span}>
-                <Row>
-                    <Col
-                        lg={{
-                            order: 1,
-                            span: 24,
-                        }}
-                        md={{ order: 2, span: 24 }}
-                        sm={{ order: 2, span: 24 }}
-                        xs={{ order: 2, span: 24 }}
+            <Grid item xs={componentStyle.span}>
+                <Grid container>
+                    <Grid item
+                       xs={12} 
+                       order={{ xs: 2, lg: 1 }}
                     >
                         <SentenceReportCard
                             personality={personality}
@@ -84,16 +80,16 @@ const ClaimReviewHeader = ({
                                 topics={content?.topics || []}
                             />
                         )}
-                    </Col>
+                    </Grid>
 
                     <ReviewAlert
                         isHidden={isHidden}
                         isPublished={isPublished}
                         hideDescription={hideDescription}
                     />
-                </Row>
-            </Col>
-        </Row>
+                </Grid>
+            </Grid>
+        </Grid>
     );
 };
 

diff --git a/src/components/ClaimReview/ClaimReviewView.tsx b/src/components/ClaimReview/ClaimReviewView.tsx
@@ -55,13 +55,11 @@ const ClaimReviewView = (props: ClaimReviewViewProps) => {
     const isSourceOrVerificationRequest = reviewTaskType === "Source" || reviewTaskType === "VerificationRequest";
 
     const componentStyle = {
-        span: 18,
-        offset: 3,
+        span: 9,
     };
 
     if (!reviewDrawerCollapsed) {
-        componentStyle.span = 22;
-        componentStyle.offset = 1;
+        componentStyle.span = 11;
     }
 
     const reviewContentPath = generateReviewContentPath(

diff --git a/src/components/ClaimReview/ReportModelButtons.tsx b/src/components/ClaimReview/ReportModelButtons.tsx
@@ -1,4 +1,4 @@
-import { Col, Row } from "antd";
+import { Grid } from "@mui/material"
 import React, { useContext } from "react";
 import Button, { ButtonType } from "../Button";
 import {
@@ -28,15 +28,15 @@ const ReportModelButtons = ({ setFormCollapsed }) => {
     };
 
     return (
-        <Row
+        <Grid container
             style={{
                 width: "100%",
                 padding: "0px 0px 15px 0px",
                 justifyContent: "center",
             }}
         >
-            <Col
-                span={24}
+            <Grid item
+                xs={12}
                 style={{
                     display: "flex",
                     justifyContent: "center",
@@ -102,8 +102,8 @@ const ReportModelButtons = ({ setFormCollapsed }) => {
                         )}
                     </>
                 )}
-            </Col>
-        </Row>
+            </Grid>
+        </Grid>
     );
 };
 

diff --git a/src/components/ClaimReview/form/DynamicReviewTaskForm.tsx b/src/components/ClaimReview/form/DynamicReviewTaskForm.tsx
@@ -12,7 +12,7 @@ import { VisualEditorContext } from "../../Collaborative/VisualEditorProvider";
 import DynamicForm from "../../Form/DynamicForm";
 import { ReviewTaskEvents } from "../../../machines/reviewTask/enums";
 import { ReviewTaskMachineContext } from "../../../machines/reviewTask/ReviewTaskMachineProvider";
-import { Row } from "antd";
+import { Grid } from "@mui/material"
 import Text from "antd/lib/typography/Text";
 import {
     isUserLoggedIn,
@@ -118,9 +118,9 @@ const DynamicReviewTaskForm = ({ data_hash, personality, target }) => {
         const isValidReviewer =
             event === ReviewTaskEvents.sendToCrossChecking
                 ? !data.crossCheckerId ||
-                  !reviewData.usersId.includes(data.crossCheckerId)
+                !reviewData.usersId.includes(data.crossCheckerId)
                 : !data.reviewerId ||
-                  !reviewData.usersId.includes(data.reviewerId);
+                !reviewData.usersId.includes(data.reviewerId);
 
         setReviewerError(!isValidReviewer);
         return isValidReviewer;
@@ -244,10 +244,11 @@ const DynamicReviewTaskForm = ({ data_hash, personality, target }) => {
                 </>
             )}
             {showButtons && (
-                <Row
+                <Grid container
                     style={{
                         padding: "32px 0 0",
                         justifyContent: "space-evenly",
+                        gap: "10px"
                     }}
                 >
                     {events?.map((event) => {
@@ -266,7 +267,7 @@ const DynamicReviewTaskForm = ({ data_hash, personality, target }) => {
                             </AletheiaButton>
                         );
                     })}
-                </Row>
+                </Grid>
             )}
 
             <WarningModal