Adaptation Grid/mui for Col/antd

AletheiaFact · Dec 15, 2024 · f9109bb · f9109bb
1 parent 1bc46df
commit f9109bb
Show file tree

Hide file tree

Showing 22 changed files with 107 additions and 107 deletions.
diff --git a/src/components/Claim/ClaimSummaryContent.tsx b/src/components/Claim/ClaimSummaryContent.tsx
@@ -1,5 +1,5 @@
 import colors from "../../styles/colors";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import { ContentModelEnum } from "../../types/enums";
@@ -56,7 +56,7 @@ const ClaimSummaryContent = ({
         : {};
 
     return (
-        <Col>
+        <Grid>
             <ReviewContent
                 title={
                     isImage ? (
@@ -83,7 +83,7 @@ const ClaimSummaryContent = ({
                 linkText={t(linkText)}
                 ellipsis={true}
             />
-        </Col>
+        </Grid>
     );
 };
 

diff --git a/src/components/Claim/CreateClaim/ClaimSelectType.tsx b/src/components/Claim/CreateClaim/ClaimSelectType.tsx
@@ -3,7 +3,7 @@ import {
     PictureOutlined,
     VideoCameraOutlined,
 } from "@ant-design/icons";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import { useAtom } from "jotai";
 import { useTranslation } from "next-i18next";
 
@@ -53,7 +53,7 @@ const ClaimSelectType = () => {
                 </p>
             </div>
 
-            <Col
+            <Grid
                 style={{
                     margin: "24px 0",
                     display: "flex",
@@ -71,7 +71,7 @@ const ClaimSelectType = () => {
                         {t(`claimForm:${key}`)}
                     </AletheiaButton>
                 ))}
-            </Col>
+            </Grid>
         </>
     );
 };

diff --git a/src/components/ClaimReview/ReviewAlert.tsx b/src/components/ClaimReview/ReviewAlert.tsx
@@ -1,4 +1,4 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import React, { useContext, useEffect, useState } from "react";
 import AletheiaAlert from "../AletheiaAlert";
 import { useTranslation } from "next-i18next";
@@ -107,7 +107,7 @@ const ReviewAlert = ({ isHidden, isPublished, hideDescription }) => {
     return (
         <>
             {alert.show && (
-                <Col
+                <Grid
                     style={{
                         margin: isPublished ? "16px 0" : "16px",
                         width: "100%",
@@ -120,7 +120,7 @@ const ReviewAlert = ({ isHidden, isPublished, hideDescription }) => {
                         description={alert.description}
                         showIcon={true}
                     />
-                </Col>
+                </Grid>
             )}
         </>
     );

diff --git a/src/components/ClaimReview/ReviewCard.tsx b/src/components/ClaimReview/ReviewCard.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import PersonalityMinimalCard from "../Personality/PersonalityMinimalCard";
 import CardBase from "../CardBase";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import reviewColors from "../../constants/reviewColors";
 import TagsList from "../topics/TagsList";
@@ -68,15 +68,15 @@ const ReviewCard = ({ review, summarized = false }) => {
         <CardBase>
             <ReviewCardStyled>
                 {!summarized && personalityItem && (
-                    <Col className="personality-card">
+                    <Grid className="personality-card">
                         <PersonalityMinimalCard
                             personality={personalityItem}
                             avatarSize={88}
                         />
-                    </Col>
+                    </Grid>
                 )}
-                <Col className="review-content">
-                    <Col className="review-info">
+                <Grid className="review-content">
+                    <Grid className="review-info">
                         <ClaimInfo
                             isImage={isImage}
                             date={claimItem.date}
@@ -96,8 +96,8 @@ const ReviewCard = ({ review, summarized = false }) => {
                                 classificationTextStyle={{ fontSize: 16 }}
                             />
                         )}
-                    </Col>
-                    <Col className="sentence-content">
+                    </Grid>
+                    <Grid className="sentence-content">
                         {content?.props?.classification && (
                             <div
                                 style={{
@@ -118,9 +118,9 @@ const ReviewCard = ({ review, summarized = false }) => {
                             linkText={t(linkText)}
                             style={{ fontSize: 18 }}
                         />
-                    </Col>
+                    </Grid>
 
-                    <Col className="review-actions">
+                    <Grid className="review-actions">
                         <TagsList key={0} tags={content.topics || []} />
                         <AletheiaButton
                             type={ButtonType.blue}
@@ -130,8 +130,8 @@ const ReviewCard = ({ review, summarized = false }) => {
                         >
                             {t("home:reviewsCarouselOpen")}
                         </AletheiaButton>
-                    </Col>
-                </Col>
+                    </Grid>
+                </Grid>
             </ReviewCardStyled>
         </CardBase>
     );

diff --git a/src/components/Collaborative/Comment/CommentPopoverContent.tsx b/src/components/Collaborative/Comment/CommentPopoverContent.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import Button, { ButtonType } from "../../Button";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { useTranslation } from "react-i18next";
 
 const CommentPopoverContent = ({ handleDeleteClick }) => {
     const { t } = useTranslation();
     return (
-        <Col className="source-card-popover-content">
+        <Grid className="source-card-popover-content">
             <Button
                 type={ButtonType.white}
                 style={{
@@ -22,7 +22,7 @@ const CommentPopoverContent = ({ handleDeleteClick }) => {
                 <DeleteIcon />
                 {t("sourceForm:deleteSourceButton")}
             </Button>
-        </Col>
+        </Grid>
     );
 };
 

diff --git a/src/components/Collaborative/Components/SourceEditorButton.tsx b/src/components/Collaborative/Components/SourceEditorButton.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useContext, useState } from "react";
 import AletheiaButton from "../../Button";
 import { Col } from "antd";
+import { Grid } from "@mui/material";
 import SummarizationApi from "../../../api/summarizationApi";
 import { useTranslation } from "next-i18next";
 import { VisualEditorContext } from "../VisualEditorProvider";
@@ -42,8 +43,9 @@ const SourceEditorButton = ({ manager, state, readonly }) => {
     }, [manager, state.doc]);
 
     return (
-        <Col
-            span={24}
+        <Grid
+        container
+            xs={12}
             style={{
                 display: "flex",
                 order: 4,
@@ -61,7 +63,7 @@ const SourceEditorButton = ({ manager, state, readonly }) => {
             >
                 {t("sourceForm:summarizeSouce")}
             </AletheiaButton>
-        </Col>
+        </Grid>
     );
 };
 

diff --git a/src/components/Collaborative/Form/EditorCard.tsx b/src/components/Collaborative/Form/EditorCard.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { uniqueId } from "remirror";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import CardStyle from "./CardStyle";
 
 interface EditorCardProps {
@@ -17,21 +17,21 @@ const EditorCard = ({
     dataCy,
     forwardRef,
     extra,
-    span = 24,
+    span = 12,
     inputSize = 100,
 }: EditorCardProps) => {
     return (
         <CardStyle>
             <label>{label}</label>
-            <Col span={span} className="card-container">
+            <Grid container xs={span} className="card-container">
                 <div
                     className="card-content"
                     data-cy={dataCy}
                     style={{ minHeight: inputSize }}
                 >
                     <p style={{ overflowY: "inherit" }} ref={forwardRef} />
                 </div>
-            </Col>
+            </Grid>
             {extra}
         </CardStyle>
     );

diff --git a/src/components/Collaborative/Form/QuestionCard.tsx b/src/components/Collaborative/Form/QuestionCard.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useContext } from "react";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import Button from "../../Button";
 import { useCommands } from "@remirror/react";
 import { DeleteOutlined } from "@ant-design/icons";
@@ -29,11 +29,12 @@ const QuestionCard = ({ forwardRef, node, initialPosition }) => {
         <EditorCard
             label={t("claimReviewForm:questionsLabel")}
             dataCy="testClaimReviewquestions0"
-            span={21}
+            span={11}
             forwardRef={forwardRef}
             inputSize={40}
             extra={
-                <Col span={3}>
+                <Grid container xs={1}
+                    style={{alignContent:"center"}}>
                     <Button
                         style={{ height: "40px", margin: "0 auto" }}
                         onClick={handleDelete}
@@ -42,7 +43,7 @@ const QuestionCard = ({ forwardRef, node, initialPosition }) => {
                     >
                         <DeleteOutlined />
                     </Button>
-                </Col>
+                </Grid>
             }
         />
     );

diff --git a/src/components/Dashboard/DashboardView.tsx b/src/components/Dashboard/DashboardView.tsx
@@ -4,7 +4,7 @@ import personalitiesApi from "../../api/personality";
 import { useTranslation } from "next-i18next";
 import PersonalityCard from "../Personality/PersonalityCard";
 import PersonalitySkeleton from "../Skeleton/PersonalitySkeleton";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import ClaimSkeleton from "../Skeleton/ClaimSkeleton";
 import claimApi from "../../api/claim";
 import ClaimCard from "../Claim/ClaimCard";
@@ -17,7 +17,7 @@ const DashboardView = () => {
 
     return (
         <DashboardViewStyle justify="space-around">
-            <Col className="dashboard-item" sm={24} md={11} lg={7}>
+            <Grid container className="dashboard-item" sm={12} md={5} lg={3.5}>
                 <BaseList
                     title={t("admin:dashboardHiddenPersonalities")}
                     apiCall={personalitiesApi.getPersonalities}
@@ -37,9 +37,9 @@ const DashboardView = () => {
                     }
                     skeleton={<PersonalitySkeleton />}
                 />
-            </Col>
+            </Grid>
 
-            <Col className="dashboard-item" sm={24} md={11} lg={7}>
+            <Grid container className="dashboard-item" sm={12} md={5} lg={3.5}>
                 <BaseList
                     title={t("admin:dashboardHiddenClaims")}
                     apiCall={claimApi.get}
@@ -59,9 +59,9 @@ const DashboardView = () => {
                     }
                     skeleton={<ClaimSkeleton />}
                 />
-            </Col>
+            </Grid>
 
-            <Col className="dashboard-item" sm={24} md={11} lg={7}>
+            <Grid container className="dashboard-item" sm={12} md={5} lg={3.5}>
                 <BaseList
                     title={t("admin:dashboardHiddenReviews")}
                     apiCall={claimReviewApi.get}
@@ -78,7 +78,7 @@ const DashboardView = () => {
                     }
                     skeleton={<ClaimSkeleton />}
                 />
-            </Col>
+            </Grid>
         </DashboardViewStyle>
     );
 };

diff --git a/src/components/Footer/AletheiaSocialMediaIcons.tsx b/src/components/Footer/AletheiaSocialMediaIcons.tsx
@@ -4,12 +4,13 @@ import colors from "../../styles/colors";
 import { NameSpaceEnum } from "../../types/Namespace";
 import { useAtom } from "jotai";
 import { currentNameSpace } from "../../atoms/namespace";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 
 const AletheiaSocialMediaIcons = () => {
     const [nameSpace] = useAtom(currentNameSpace);
     return (
-        <Col span={24}>
+        <Grid container xs={12}
+            style={{justifyContent:"center"}}>
             <SocialIcon
                 url="https://www.instagram.com/aletheiafact"
                 bgColor={
@@ -54,7 +55,7 @@ const AletheiaSocialMediaIcons = () => {
                 rel="noreferrer"
                 fgColor="white"
             />
-        </Col>
+        </Grid>
     )
 }
 

diff --git a/src/components/Header/HeaderActions.style.tsx b/src/components/Header/HeaderActions.style.tsx
@@ -1,8 +1,8 @@
 import styled from "styled-components";
 import { queries } from "../../styles/mediaQueries";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 
-const HeaderActionsStyle = styled(Col)`
+const HeaderActionsStyle = styled(Grid)`
     display: flex;
     align-items: flex-end;
     justify-content: space-evenly;

diff --git a/src/components/Header/HeaderContent.tsx b/src/components/Header/HeaderContent.tsx
@@ -68,7 +68,7 @@ const HeaderContent = () => {
                 <Logo />
             </a>
             <SearchOverlay />
-            <HeaderActionsStyle xs={14} sm={10} md={6}>
+            <HeaderActionsStyle xs={7} sm={5} md={3}>
                 {vw?.xs && !router.pathname.includes("/home-page") && (
                     <AletheiaButton
                         onClick={handleClickSearchIcon}