migrate home header page

Author: LuizFNJ

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/KanbanToolbar.tsx

@@ -1,8 +1,7 @@
-import { Grid } from "@mui/material";
 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();

src/components/Kanban/KanbanView.tsx

@@ -36,7 +36,7 @@ const KanbanView = ({ reviewTaskType }) => {
                 filterUserTasks={filterUserTasks}
                 setFilterUserTasks={setFilterUserTasks}
             />
-            <Grid container xs={11.5} justifyContent="center" className="kanban-board">
+            <Grid container item xs={11.5} justifyContent="center" className="kanban-board">
                 {states.map((state) => (
                     <KanbanGrid
                         key={state}