migrated to mui `Grid2`

frontend/src/pages/HistoricalCalendarPrices.tsx

@@ -11,7 +11,7 @@ import {
 import { Scatter } from "react-chartjs-2";
 import {
   Container,
-  Grid,
+  Grid2,
   Typography,
   Paper,
   Popper,
@@ -63,8 +63,8 @@ export function HistoricalCalendarPrices() {
 
   return (
     <Container maxWidth="lg">
-      <Grid container spacing={4}>
+      <Grid2 container spacing={4} columns={12}>
-        <Grid item xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           <Typography variant="h4" gutterBottom>
             <EditableUnderlying /> :
             <EditableDaysBetweenFrontAndBackExpiration />
@@ -93,8 +93,8 @@ export function HistoricalCalendarPrices() {
               </Paper>
             </Popper>
           </ClickAwayListener>
-        </Grid>
+        </Grid2>
-        <Grid item xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           <Paper elevation={3} sx={{ p: 3, minHeight: "28em", height: "100%" }}>
             {underlying.value !== null &&
             stockPriceChartData.value.length > 0 ? (
@@ -158,8 +158,8 @@ export function HistoricalCalendarPrices() {
               <Typography>Loading Chart...</Typography>
             )}
           </Paper>
-        </Grid>
+        </Grid2>
-        <Grid item xs={12} md={6}>
+        <Grid2 size={{ xs: 12, md: 6 }}>
           <Paper elevation={3} sx={{ p: 3, minHeight: "28em" }}>
             {underlying.value !== null &&
             similarCalendarPriceChartData.value.length > 0 ? (
@@ -219,8 +219,8 @@ export function HistoricalCalendarPrices() {
               <Typography>Loading Chart...</Typography>
             )}
           </Paper>
-        </Grid>
+        </Grid2>
-        <Grid item xs={12} md={6}>
+        <Grid2 size={{ xs: 12, md: 6 }}>
           <Paper elevation={3} sx={{ p: 3, minHeight: "28em" }}>
             {underlying.value !== null &&
             similarCalendarPriceChartData.value.length > 0 ? (
@@ -293,8 +293,8 @@ export function HistoricalCalendarPrices() {
               <Typography>Loading Chart...</Typography>
             )}
           </Paper>
-        </Grid>
+        </Grid2>
-      </Grid>
+      </Grid2>
     </Container>
   );
 }