Upgrade to grid v2

kubawajs · Oct 16, 2024 · 1e0746d · 1e0746d
1 parent 6e7365e
commit 1e0746d
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 26 deletions.
diff --git a/src/nursery-nav/src/components/Filters/FiltersBar.tsx b/src/nursery-nav/src/components/Filters/FiltersBar.tsx
@@ -33,7 +33,7 @@ export default function FiltersBar({ defaultVoivodeship, defaultCity, citiesResp
             <Box sx={{ display: { xs: 'none', md: 'block' } }}>
                 <Stack
                     direction={'column'}
-                    sx={{ bgcolor: 'primary.light', alignItems: 'center' }}
+                    sx={{ bgcolor: 'white', alignItems: 'center' }}
                 >
                     <Filters defaultVoivodeship={defaultVoivodeship} defaultCity={defaultCity} citiesResponse={citiesResponse} />
                 </Stack>

diff --git a/src/nursery-nav/src/components/Layout/Layout.tsx b/src/nursery-nav/src/components/Layout/Layout.tsx
@@ -3,7 +3,7 @@ import { theme } from "../../shared/theme";
 import React from "react";
 import Navigation from "../Navigation/Navigation";
 import { Outlet } from "react-router-dom";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { HelmetProvider } from "react-helmet-async";
 import ContactUs from "../ContactUs/ContactUs";
 
@@ -20,9 +20,9 @@ export default function Layout() {
             <ThemeProvider theme={theme}>
                 <HelmetProvider>
                     <Navigation />
-                    <Grid container>
+                    <Grid2 container>
                         <Outlet />
-                    </Grid>
+                    </Grid2>
                     <ContactUs />
                 </HelmetProvider>
             </ThemeProvider>

diff --git a/src/nursery-nav/src/pages/ComparisonPage.tsx b/src/nursery-nav/src/pages/ComparisonPage.tsx
@@ -1,5 +1,5 @@
 import { useSearchParams } from "react-router-dom";
-import { Box, Container, Grid, Stack, Typography } from "@mui/material";
+import { Box, Container, Grid2, Stack, Typography } from "@mui/material";
 
 import Comparison from "../components/Comparison/Comparison";
 import Metadata from "../components/Metadata/Metadata";
@@ -20,7 +20,7 @@ export default function ComparisonPage() {
     return (
         <>
             <Metadata title={title} description={description} image={image} url={title} />
-            <Grid item xs={12}>
+            <Grid2 size={{ xs: 12 }}>
                 {displayError &&
                     <Container fixed>
                         <Stack direction="column" justifyContent="center" alignItems="center" height="80vh">
@@ -37,7 +37,7 @@ export default function ComparisonPage() {
                         <Comparison ids={institutionIds} />
                     </>
                 }
-            </Grid>
+            </Grid2>
         </>
     );
 }
diff --git a/src/nursery-nav/src/pages/InstitutionDetailsPage.tsx b/src/nursery-nav/src/pages/InstitutionDetailsPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { CircularProgress, Grid } from "@mui/material";
+import { CircularProgress, Grid2 } from "@mui/material";
 
 import MapComponent from "../components/MapComponent/MapComponent";
 import Metadata from "../components/Metadata/Metadata";
@@ -48,12 +48,12 @@ export default function InstitutionDetailsPage() {
     return (
         <>
             <Metadata title={title} description={description} image={image} url={title} />
-            <Grid item xs={12} md={6}>
+            <Grid2 size={{ xs: 12, md: 6 }}>
                 {selectedInstitution && <InstitutionDetails {...selectedInstitution} />}
-            </Grid>
-            <Grid item display={{ xs: "none", md: "block" }} md={6}>
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 6 }} display={{ xs: "none", md: "block" }}>
                 {(isLoading && !isMapLoaded) ? <CircularProgress /> : <MapComponent locations={locations} setIsMapLoaded={setIsMapLoaded} />}
-            </Grid>
+            </Grid2>
         </>
     );
 }
diff --git a/src/nursery-nav/src/pages/ListPage.tsx b/src/nursery-nav/src/pages/ListPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { Grid, CircularProgress, Box, debounce } from "@mui/material";
+import { Grid2, CircularProgress, Box, debounce } from "@mui/material";
 
 import ListComponent from "../components/ListComponent/ListComponent";
 import MapComponent from "../components/MapComponent/MapComponent";
@@ -55,22 +55,22 @@ export default function ListPage() {
     return (
         <>
             <Metadata title={title} description={description} image={image} url={window.location.href} />
-            <Grid item xs={12} zIndex={19}>
+            <Grid2 size={{ xs: 12 }} zIndex={19}>
                 <FiltersBar defaultVoivodeship={voivodeship} defaultCity={city} citiesResponse={cities} />
-            </Grid>
-            <Grid item xs={12} md={6}>
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 6 }}>
                 <ListComponent defaultVoivodeship={voivodeship} defaultCity={city} />
-            </Grid>
+            </Grid2>
             {!isMobile && (
-                <Grid item xs={12} md={6} sx={{ display: { xs: "none", md: "block" } }}>
+                <Grid2 size={{ xs: 12, md: 6 }} sx={{ display: { xs: "none", md: "block" } }}>
                     {(isLoading && !isMapLoaded) ? (
                         <Box alignItems="center" justifyContent={"center"} display="flex" height="100%" width="100%">
                             <CircularProgress />
                         </Box>
                     ) : (
                         <MapComponent locations={locations} setIsMapLoaded={setIsMapLoaded} />
                     )}
-                </Grid>
+                </Grid2>
             )}
         </>
     );

diff --git a/src/nursery-nav/src/pages/MapPage.tsx b/src/nursery-nav/src/pages/MapPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { CircularProgress, Grid } from "@mui/material";
+import { CircularProgress, Grid2 } from "@mui/material";
 
 import FiltersBar from "../components/Filters/FiltersBar";
 import MapComponent from "../components/MapComponent/MapComponent";
@@ -40,19 +40,19 @@ export default function MapPage() {
     return (
         <>
             <Metadata title={title} description={description} image={image} url={window.location.href} />
-            <Grid item xs={12} zIndex={19}>
+            <Grid2 size={{ xs: 12 }} zIndex={19}>
                 <FiltersBar defaultVoivodeship={voivodeship} defaultCity={city} />
-            </Grid>
-            <Grid item xs={12} md={6} sx={{ display: { xs: 'none', md: 'block' } }}>
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 6 }} sx={{ display: { xs: 'none', md: 'block' } }}>
                 <ListComponent defaultVoivodeship={voivodeship} defaultCity={city} />
-            </Grid>
-            <Grid item xs={12} md={6}>
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 6 }}>
                 {(isLoading && !isMapLoaded) ?
                     <CircularProgress />
                     :
                     <MapComponent locations={locations} setIsMapLoaded={setIsMapLoaded} />
                 }
-            </Grid>
+            </Grid2>
         </>
     );
 }