From f9109bbf1cd1600e77d78f591e8fc11434a5d7ae Mon Sep 17 00:00:00 2001
From: LuizFNJ <luizfnj3103@gmail.com>
Date: Sun, 15 Dec 2024 22:49:19 +0100
Subject: [PATCH] Adaptation Grid/mui for Col/antd

---
 src/components/Claim/ClaimSummaryContent.tsx  |  6 +--
 .../Claim/CreateClaim/ClaimSelectType.tsx     |  6 +--
 src/components/ClaimReview/ReviewAlert.tsx    |  6 +--
 src/components/ClaimReview/ReviewCard.tsx     | 22 +++++------
 .../Comment/CommentPopoverContent.tsx         |  6 +--
 .../Components/SourceEditorButton.tsx         |  8 ++--
 .../Collaborative/Form/EditorCard.tsx         |  8 ++--
 .../Collaborative/Form/QuestionCard.tsx       |  9 +++--
 src/components/Dashboard/DashboardView.tsx    | 14 +++----
 .../Footer/AletheiaSocialMediaIcons.tsx       |  7 ++--
 src/components/Header/HeaderActions.style.tsx |  4 +-
 src/components/Header/HeaderContent.tsx       |  2 +-
 src/components/Home/CTA/CTASectionButtons.tsx | 21 +++++-----
 src/components/Home/CTA/CTASectionTitle.tsx   |  6 +--
 src/components/Home/DonationBanner.style.tsx  | 11 ++++--
 src/components/Home/DonationBanner.tsx        | 38 +++++++++----------
 src/components/Home/HomeFeed.tsx              | 10 ++---
 .../Home/HomeHeader/HomeHeader.style.tsx      |  2 +-
 src/components/Home/HomeStats.tsx             | 14 +++----
 src/components/LoginButton.tsx                |  6 +--
 .../adminArea/Drawer/HeaderTotpStatus.tsx     |  4 +-
 .../adminArea/Drawer/HeaderUserStatus.tsx     |  4 +-
 22 files changed, 107 insertions(+), 107 deletions(-)

diff --git a/src/components/Claim/ClaimSummaryContent.tsx b/src/components/Claim/ClaimSummaryContent.tsx
index 482d50ab1..a1753b325 100644
--- 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
index b8bb8b87e..ac40a26ab 100644
--- 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
index 7720f4554..3b3594c0c 100644
--- 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
index c3472354b..5ba16e17e 100644
--- 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
index 71a1ed126..5fa22a72d 100644
--- 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
index 921cac94b..8341afca8 100644
--- 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
index 84b656972..3f9054e61 100644
--- 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,13 +17,13 @@ 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}
@@ -31,7 +31,7 @@ const EditorCard = ({
                 >
                     <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
index 6662d3f7b..7e4e87ec5 100644
--- 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
index fdb7581b6..38535bfe4 100644
--- 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
index 3d9d5a03e..ee79ecb28 100644
--- 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
index a2533c6b2..e7bf1f80e 100644
--- 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
index ec1ec1675..7c8b8b91f 100644
--- 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}
diff --git a/src/components/Home/CTA/CTASectionButtons.tsx b/src/components/Home/CTA/CTASectionButtons.tsx
index 8032cf056..ba2f37d76 100644
--- a/src/components/Home/CTA/CTASectionButtons.tsx
+++ b/src/components/Home/CTA/CTASectionButtons.tsx
@@ -1,6 +1,5 @@
-import { Col } from "antd";
 import React from "react";
-
+import { Grid } from "@mui/material";
 import { trackUmamiEvent } from "../../../lib/umami";
 import Button, { ButtonType } from "../../Button";
 import DonateButton from "../../Header/DonateButton";
@@ -22,15 +21,13 @@ const CTASectionButtons = () => {
     };
 
     return (
-        <Col
-            offset={smallDevice ? 0 : 1}
-            md={12}
-            sm={10}
-            xs={24}
+        <Grid container
+            xs={7}
+            sm={6}
             className="CTA-button-container"
         >
             {!isLoggedIn && (
-                <Col sm={24} md={11}>
+                <Grid item xs={6}>
                     <Button
                         onClick={handleClick}
                         href={"/sign-up"}
@@ -45,18 +42,18 @@ const CTASectionButtons = () => {
                     >
                         {t("home:createAccountButton")}
                     </Button>
-                </Col>
+                </Grid>
             )}
             {!smallDevice && (
-                <Col md={11}>
+                <Grid item xs={5.5}>
                     {localConfig.header.donateButton.show ? (
                         <DonateButton
                             style={{ fontSize: mediumDevice ? "12px" : "14px" }}
                         />
                     ) : null}
-                </Col>
+                </Grid>
             )}
-        </Col>
+        </Grid>
     );
 };
 
diff --git a/src/components/Home/CTA/CTASectionTitle.tsx b/src/components/Home/CTA/CTASectionTitle.tsx
index 41cf69d6c..a9cbde1b8 100644
--- a/src/components/Home/CTA/CTASectionTitle.tsx
+++ b/src/components/Home/CTA/CTASectionTitle.tsx
@@ -1,4 +1,4 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React from "react";
 import { isUserLoggedIn } from "../../../atoms/currentUser";
@@ -9,9 +9,9 @@ const CTASectionTitle = () => {
     const [isLoggedIn] = useAtom(isUserLoggedIn);
 
     return (
-        <Col md={11} sm={isLoggedIn ? 24 : 13} xs={24} className="footer-text">
+        <Grid container md={6} sm={isLoggedIn ? 12 : 6} xs={12} className="footer-text">
             <p className="CTA-title">{t("home:statsFooter")}</p>
-        </Col>
+        </Grid>
     );
 };
 
diff --git a/src/components/Home/DonationBanner.style.tsx b/src/components/Home/DonationBanner.style.tsx
index 220fb428a..209c24563 100644
--- a/src/components/Home/DonationBanner.style.tsx
+++ b/src/components/Home/DonationBanner.style.tsx
@@ -1,10 +1,13 @@
 import styled from "styled-components";
 import colors from "../../styles/colors";
+import { Grid } from "@mui/material";
 import { Col } from "antd";
 import { queries } from "../../styles/mediaQueries";
 
-const DonationBannerStyle = styled(Col)`
-    background-color: ${colors.inactive};
+
+const DonationBannerStyle = styled(Grid)`
+        background-color: ${colors.inactive};
+        position: relative;
 
     .close-banner {
         color: ${colors.primary};
@@ -12,7 +15,7 @@ const DonationBannerStyle = styled(Col)`
         align-self: flex-end;
         position: absolute;
         right: 10px;
-        bottom: -10px;
+        bottom: 10px;
         z-index: 1;
     }
 
@@ -67,7 +70,7 @@ const DonationBannerStyle = styled(Col)`
 
         .close-banner {
             align-self: flex-start;
-            top: -10px;
+            top: 10px;    
         }
     }
 `;
diff --git a/src/components/Home/DonationBanner.tsx b/src/components/Home/DonationBanner.tsx
index a93ac1553..828d56248 100644
--- a/src/components/Home/DonationBanner.tsx
+++ b/src/components/Home/DonationBanner.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import DonationBannerContent from "./DonationBanner/DonationBannerContent";
 import DonationBannerStyle from "./DonationBanner.style";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import Cookies from "js-cookie";
 import CloseOutlined from "@mui/icons-material/CloseOutlined";
 
@@ -27,25 +27,23 @@ const DonationBanner = () => {
         return null;
     }
 
-    return (
-        showDonationBanner && (
-            <DonationBannerStyle>
-                <Col className="banner-container">
-                    <CloseOutlined
-                        className="close-banner"
-                        onClick={() =>
-                            closeBanner(() => setDonationBanner(false))
-                        }
-                    />
-                    <DonationBannerContent
-                        closeClick={() =>
-                            closeBanner(() => setDonationBanner(false))
-                        }
-                    />
-                </Col>
-            </DonationBannerStyle>
-        )
-    );
+  if (!enableDonationBanner) {
+    return null
+  };
+
+  return showDonationBanner && (
+    <DonationBannerStyle>
+      <Grid container className="banner-container">
+        <CloseOutlined
+          className="close-banner"
+          onClick={() => closeBanner(() => setDonationBanner(false))}
+        />
+        <DonationBannerContent
+          closeClick={() => closeBanner(() => setDonationBanner(false))}
+        />
+      </Grid>
+    </DonationBannerStyle>
+  )
 };
 
 export default DonationBanner;
diff --git a/src/components/Home/HomeFeed.tsx b/src/components/Home/HomeFeed.tsx
index 70babc4e4..29de5f810 100644
--- a/src/components/Home/HomeFeed.tsx
+++ b/src/components/Home/HomeFeed.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import claimRevisionApi from "../../api/claimRevision";
 import Loading from "../Loading";
@@ -50,10 +50,10 @@ const HomeFeed = ({ searchResults }) => {
     return (
         <>
             {results.length > 0 && (
-                <Col>
+                <Grid>
                     <h2>{t("home:homeFeedTitle")}</h2>
 
-                    <Col
+                    <Grid
                         style={{
                             display: "flex",
                             gap: 16,
@@ -62,8 +62,8 @@ const HomeFeed = ({ searchResults }) => {
                         }}
                     >
                         <HomeFeedList results={results} />
-                    </Col>
-                </Col>
+                    </Grid>
+                </Grid>
             )}
         </>
     );
diff --git a/src/components/Home/HomeHeader/HomeHeader.style.tsx b/src/components/Home/HomeHeader/HomeHeader.style.tsx
index 0ad69b099..c717fe2b6 100644
--- a/src/components/Home/HomeHeader/HomeHeader.style.tsx
+++ b/src/components/Home/HomeHeader/HomeHeader.style.tsx
@@ -16,7 +16,7 @@ const HomeHeaderStyle = styled(Col)`
         display: flex;
         flex-direction: column;
         width: 100%;
-        align-items: center;
+        align-items: start;
     }
 
     .home-header-title > h1 {
diff --git a/src/components/Home/HomeStats.tsx b/src/components/Home/HomeStats.tsx
index 93527409d..2ce054e30 100644
--- a/src/components/Home/HomeStats.tsx
+++ b/src/components/Home/HomeStats.tsx
@@ -2,23 +2,21 @@ import React from "react";
 import { useTranslation } from "next-i18next";
 import colors from "../../styles/colors";
 import { Stats } from "./Stats";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 
 const HomeStats = ({ stats }) => {
     const { t } = useTranslation();
 
     return (
-        <Col
-            xxl={12}
-            lg={16}
-            sm={18}
-            xs={24}
+        <Grid container
+            sm={9}
+            md={8}
+            xl={6}
             style={{
                 color: colors.white,
                 width: "100%",
                 justifyContent: "space-between",
                 display: "flex",
-                gap: "2vw",
             }}
         >
             <Stats
@@ -32,7 +30,7 @@ const HomeStats = ({ stats }) => {
                 title={t("home:statsClaimReviews")}
                 style={{ justifyContent: "flex-end" }}
             />
-        </Col>
+        </Grid>
     );
 };
 
diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx
index 46c4a1cb4..a44f25a80 100644
--- a/src/components/LoginButton.tsx
+++ b/src/components/LoginButton.tsx
@@ -1,4 +1,4 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import Button from "./Button";
@@ -7,7 +7,7 @@ const LoginButton = () => {
     const { t } = useTranslation();
 
     return (
-        <Col
+        <Grid   
             style={{
                 display: "flex",
                 justifyContent: "center",
@@ -15,7 +15,7 @@ const LoginButton = () => {
             }}
         >
             <Button href="/login">{t("claimReviewForm:loginButton")}</Button>
-        </Col>
+        </Grid>
     );
 };
 
diff --git a/src/components/adminArea/Drawer/HeaderTotpStatus.tsx b/src/components/adminArea/Drawer/HeaderTotpStatus.tsx
index ae08fd484..6b9511c56 100644
--- a/src/components/adminArea/Drawer/HeaderTotpStatus.tsx
+++ b/src/components/adminArea/Drawer/HeaderTotpStatus.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
 import colors from "../../../styles/colors";
 
-const HeaderTotpStatusStyle = styled(Col)`
+const HeaderTotpStatusStyle = styled(Grid)`
     ::before {
         content: "";
         display: inline-block;
diff --git a/src/components/adminArea/Drawer/HeaderUserStatus.tsx b/src/components/adminArea/Drawer/HeaderUserStatus.tsx
index 28895fef8..ee2646d11 100644
--- a/src/components/adminArea/Drawer/HeaderUserStatus.tsx
+++ b/src/components/adminArea/Drawer/HeaderUserStatus.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import { Status } from "../../../types/enums";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
 import colors from "../../../styles/colors";
 
-const HeaderStatusStyle = styled(Col)`
+const HeaderStatusStyle = styled(Grid)`
     ::before {
         content: "";
         display: inline-block;