Migrate kanban and home header page to mui material

src/components/Home/HomeHeader/HomeHeader.style.tsx

@@ -1,9 +1,9 @@
 import styled from "styled-components";
 import { queries } from "../../../styles/mediaQueries";
 import colors from "../../../styles/colors";
-import { Col } from "antd";
+import Grid from "@mui/material/Grid";
 
-const HomeHeaderStyle = styled(Col)`
+const HomeHeaderStyle = styled(Grid)`
     display: flex;
     background-color: ${colors.blackTertiary};
     align-items: center;

src/components/Home/HomeHeader/HomeHeader.tsx

@@ -1,4 +1,4 @@
-import { Col } from "antd";
+import Grid from "@mui/material/Grid";
 import React from "react";
 import CTASection from "../CTA/CTASection";
 import HomeHeaderStyle from "./HomeHeader.style";
@@ -8,17 +8,17 @@ import HomeHeaderSearch from "./HomeHeaderSearch";
 
 const HomeHeader = ({ stats }) => {
     return (
-        <HomeHeaderStyle>
-            <Col
-                xxl={12}
-                lg={16}
-                sm={18}
-                xs={24}
+        <HomeHeaderStyle container>
+            <Grid item
+                xl={6}
+                lg={8}
+                sm={9}
+                xs={12}
                 className="home-header-content"
             >
                 <HomeHeaderTitle />
                 <CTASection />
-            </Col>
+            </Grid>
             <HomeStats stats={stats} />
 
             <HomeHeaderSearch />

src/components/Home/HomeHeader/HomeHeaderSearch.style.tsx

@@ -1,9 +1,9 @@
-import { Col } from "antd";
+import Grid from "@mui/material/Grid";
 import styled from "styled-components";
 import { queries } from "../../../styles/mediaQueries";
 import colors from "../../../styles/colors";
 
-const HomeHeaderSearchStyled = styled(Col)`
+const HomeHeaderSearchStyled = styled(Grid)`
     display: flex;
     flex-direction: column;
     justify-content: center;

src/components/Home/HomeHeader/HomeHeaderSearch.tsx

@@ -41,7 +41,7 @@ const HomeHeaderSearch = () => {
     };
 
     return (
-        <HomeHeaderSearchStyled xxl={12} lg={16} sm={18} xs={24}>
+        <HomeHeaderSearchStyled container item xl={6} lg={8} sm={9} xs={12}>
             <h2 className="title">{t("home:homeHeaderSearchTitle")}</h2>
 
             <InputSearch

src/components/Home/HomeHeader/HomeHeaderTitle.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { Col } from "antd";
+import Grid from "@mui/material/Grid";
 import { useTranslation } from "next-i18next";
 
 const HomeHeaderTitle = () => {
     const { t } = useTranslation();
     return (
-        <Col className="home-header-title">
+        <Grid item className="home-header-title">
             <h1>{t("home:title")}</h1>
-        </Col>
+        </Grid>
     );
 };
 

src/components/Kanban/EmptyKanbanCol.tsx → src/components/Kanban/EmptyKanbanGrid.tsx

@@ -1,8 +1,8 @@
-import { Divider } from "antd";
+import { Divider } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React from "react";
 
-const EmptyKanbanCol = ({ title }) => {
+const EmptyKanbanGrid = ({ title }) => {
     const { t } = useTranslation();
     return (
         <div
@@ -16,9 +16,9 @@ const EmptyKanbanCol = ({ title }) => {
             <span style={{ fontSize: 24 }}>{title}</span>
 
             <span>{t("list:totalItems", { total: 0 })}</span>
-            <Divider style={{ marginTop: 12 }} />
+            <Divider flexItem variant="middle" style={{ marginTop: 12 }} />
         </div>
     );
 };
 
-export default EmptyKanbanCol;
+export default EmptyKanbanGrid;

src/components/Kanban/KanbanCol.tsx → src/components/Kanban/KanbanGrid.tsx

@@ -6,7 +6,7 @@ import { ReviewTaskStates } from "../../machines/reviewTask/enums";
 import KanbanSkeleton from "../Skeleton/KanbanSkeleton";
 import colors from "../../styles/colors";
 import BaseList from "../List/BaseList";
-import EmptyKanbanCol from "./EmptyKanbanCol";
+import EmptyKanbanGrid from "./EmptyKanbanGrid";
 import KanbanCard from "./KanbanCard";
 import styled from "styled-components";
 
@@ -32,7 +32,7 @@ interface KanbanColProps {
     };
 }
 
-const KanbanCol = ({
+const KanbanGrid = ({
     nameSpace,
     state,
     filterUser,
@@ -58,7 +58,7 @@ const KanbanCol = ({
                     />
                 )}
                 emptyFallback={
-                    <EmptyKanbanCol title={t(`reviewTask:${state}`)} />
+                    <EmptyKanbanGrid title={t(`reviewTask:${state}`)} />
                 }
                 showDividers={false}
                 skeleton={<KanbanSkeleton />}
@@ -68,4 +68,4 @@ const KanbanCol = ({
     );
 };
 
-export default KanbanCol;
+export default KanbanGrid;

src/components/Kanban/KanbanToolbar.tsx

@@ -1,8 +1,7 @@
-import { Col } from "antd";
 import React from "react";
 import { useTranslation } from "next-i18next";
 
-import { FormControlLabel, Switch } from "@mui/material";
+import { FormControlLabel, Switch, Grid } from "@mui/material";
 
 const KanbanToolbar = ({ filterUserTasks, setFilterUserTasks }) => {
     const { t } = useTranslation();
@@ -18,7 +17,7 @@ const KanbanToolbar = ({ filterUserTasks, setFilterUserTasks }) => {
     };
 
     return (
-        <Col span={24} className="kanban-toolbar">
+        <Grid item xs={12} className="kanban-toolbar">
             {Object.keys(filterUserTasks).map((task) => (
                 <FormControlLabel
                     key={task}
@@ -35,7 +34,7 @@ const KanbanToolbar = ({ filterUserTasks, setFilterUserTasks }) => {
                     )}
                 />
             ))}
-        </Col>
+        </Grid>
     );
 };
 

src/components/Kanban/KanbanView.tsx

@@ -1,5 +1,5 @@
-import { Col } from "antd";
-import React, { useMemo, useState } from "react";
+import { Grid } from "@mui/material";
+import React, { useState } from "react";
 
 import {
     KanbanClaimState,
@@ -8,7 +8,7 @@ import {
     ReviewTaskStates,
     ReviewTaskTypeEnum,
 } from "../../machines/reviewTask/enums";
-import KanbanCol from "./KanbanCol";
+import KanbanGrid from "./KanbanGrid";
 import { useAtom } from "jotai";
 import { currentNameSpace } from "../../atoms/namespace";
 import KanbanViewStyled from "./KanbanView.style";
@@ -36,17 +36,17 @@ const KanbanView = ({ reviewTaskType }) => {
                 filterUserTasks={filterUserTasks}
                 setFilterUserTasks={setFilterUserTasks}
             />
-            <Col span={23} className="kanban-board">
+            <Grid container item xs={11.5} justifyContent="center" className="kanban-board">
                 {states.map((state) => (
-                    <KanbanCol
+                    <KanbanGrid
                         key={state}
                         nameSpace={nameSpace}
                         state={ReviewTaskStates[state]}
                         filterUser={filterUserTasks}
                         reviewTaskType={reviewTaskType}
                     />
                 ))}
-            </Col>
+            </Grid>
         </KanbanViewStyled>
     );
 };