tournesol-app · GresilleSiffle · Apr 11, 2025 · Apr 11, 2025 · Apr 11, 2025 · Apr 11, 2025
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,9 +6,9 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.17.1",
-    "@mui/material": "^5.17.1",
-    "@mui/styles": "^5.17.1",
+    "@mui/icons-material": "^6.4.11",
+    "@mui/material": "^6.4.11",
+    "@mui/styles": "^6.4.11",
     "@react-hook/resize-observer": "^1.2.5",
     "@reduxjs/toolkit": "^1.7.1",
     "@types/react": "^17",

diff --git a/frontend/src/app/PollRoutes.tsx b/frontend/src/app/PollRoutes.tsx
@@ -49,7 +49,12 @@ const PollRoutes = ({ pollName }: Props) => {
 
   if (pollName !== currentPollName || !isReady) {
     return (
-      <Box m={4} textAlign="center">
+      <Box
+        sx={{
+          m: 4,
+          textAlign: 'center',
+        }}
+      >
         <CircularProgress color="secondary" size={50} />
       </Box>
     );

diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
@@ -11,14 +11,16 @@ const CustomCard = ({ children, sx, ...props }: Props) => {
   return (
     <Card
       {...props}
-      sx={{
-        background: '#FFFFFF',
-        border: '1px solid #DCD8CB',
-        boxShadow:
-          '0px 0px 8px rgba(0, 0, 0, 0.02), 0px 2px 4px rgba(0, 0, 0, 0.05)',
-        borderRadius: '4px',
-        ...(sx || {}),
-      }}
+      sx={[
+        {
+          background: '#FFFFFF',
+          border: '1px solid #DCD8CB',
+          boxShadow:
+            '0px 0px 8px rgba(0, 0, 0, 0.02), 0px 2px 4px rgba(0, 0, 0, 0.05)',
+          borderRadius: '4px',
+        },
+        sx || {},
+      ]}
     >
       {children}
     </Card>

diff --git a/frontend/src/components/CollapseButton.tsx b/frontend/src/components/CollapseButton.tsx
@@ -36,14 +36,22 @@ const CollapseButton = ({
         aria-expanded={expanded}
         aria-label="show more"
         onClick={onClick}
-        sx={{
-          padding: '0 8px',
-          fontSize: variant === 'mainOptions' ? '1.1rem' : undefined,
-          color:
-            expanded || variant == 'mainOptions'
-              ? theme.palette.secondary.main
-              : theme.palette.action.active,
-        }}
+        sx={[
+          {
+            padding: '0 8px',
+            color:
+              expanded || variant == 'mainOptions'
+                ? theme.palette.secondary.main
+                : theme.palette.action.active,
+          },
+          variant === 'mainOptions'
+            ? {
+                fontSize: '1.1rem',
+              }
+            : {
+                fontSize: null,
+              },
+        ]}
       >
         {children}
       </Button>

diff --git a/frontend/src/components/ContentBox.tsx b/frontend/src/components/ContentBox.tsx
@@ -27,11 +27,13 @@ const ContentBox = ({
 
   return (
     <Box
-      px={[noMinPaddingX ? 0 : 2, 2, 3]}
-      py={2}
-      // Push the global footer away, to avoid displaying it in the middle
-      // of the screen.
-      minHeight={`calc(100vh - ${topBarHeight}px)`}
+      sx={{
+        px: [noMinPaddingX ? 0 : 2, 2, 3],
+        py: 2,
+        // Push the global footer away, to avoid displaying it in the middle
+        // of the screen.
+        minHeight: `calc(100vh - ${topBarHeight}px)`,
+      }}
     >
       <Container maxWidth={maxWidth} disableGutters>
         {children}

diff --git a/frontend/src/components/ContentHeader.tsx b/frontend/src/components/ContentHeader.tsx
@@ -21,8 +21,20 @@ const ContentHeader = ({
   chipLabel?: string;
 }) => {
   return (
-    <Box px={[2, 4]} pt={2} color="text.secondary">
-      <Grid container spacing={1} justifyContent="space-between">
+    <Box
+      sx={{
+        px: [2, 4],
+        pt: 2,
+        color: 'text.secondary',
+      }}
+    >
+      <Grid
+        container
+        spacing={1}
+        sx={{
+          justifyContent: 'space-between',
+        }}
+      >
         <Grid item>
           <Typography
             variant="h4"
@@ -53,7 +65,15 @@ const ContentHeader = ({
           </>
         )}
       </Grid>
-      {subtitle && <Typography mt={1}>{subtitle}</Typography>}
+      {subtitle && (
+        <Typography
+          sx={{
+            mt: 1,
+          }}
+        >
+          {subtitle}
+        </Typography>
+      )}
     </Box>
   );
 };

diff --git a/frontend/src/components/CriteriaIcon.tsx b/frontend/src/components/CriteriaIcon.tsx
@@ -35,7 +35,13 @@ const CriteriaIcon = ({
     >
       <Tooltip title={tooltipTitle}>
         {emoji ? (
-          <Box fontSize={emojiSize}>{emoji}</Box>
+          <Box
+            sx={{
+              fontSize: emojiSize,
+            }}
+          >
+            {emoji}
+          </Box>
         ) : (
           <img src={imagePath} width={imgWidth} alt={criteriaLabel} />
         )}

diff --git a/frontend/src/components/DialogBox.tsx b/frontend/src/components/DialogBox.tsx
@@ -38,9 +38,20 @@ const DialogBox = ({
       >
         {title}
       </DialogTitle>
-      <Box py={2} px={3}>
+      <Box
+        sx={{
+          py: 2,
+          px: 3,
+        }}
+      >
         <Box>{content}</Box>
-        <Box display="flex" justifyContent="flex-end" gap={1}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 1,
+          }}
+        >
           {additionalActionButton}
           <Button variant="contained" onClick={handleClose}>
             {t('dialogBox.continue')}

diff --git a/frontend/src/components/LanguageSelector.tsx b/frontend/src/components/LanguageSelector.tsx
@@ -18,7 +18,11 @@ const LanguageSelector = ({ languageName = true }: LanguageSelectorProps) => {
   const currentLanguage = i18n.resolvedLanguage || i18n.language;
 
   return (
-    <Box color="neutral.main">
+    <Box
+      sx={{
+        color: 'neutral.main',
+      }}
+    >
       <MenuButton
         startIcon={<Language />}
         sx={{
@@ -60,10 +64,12 @@ const LanguageSelector = ({ languageName = true }: LanguageSelectorProps) => {
       >
         {languageName && (
           <Box
-            flexGrow={1}
-            textAlign="left"
-            fontWeight="bold"
-            sx={{ textTransform: 'capitalize' }}
+            sx={{
+              flexGrow: 1,
+              textAlign: 'left',
+              fontWeight: 'bold',
+              textTransform: 'capitalize',
+            }}
           >
             {codeToLanguage[currentLanguage]?.name ?? currentLanguage}
           </Box>

diff --git a/frontend/src/components/LegalDocument.tsx b/frontend/src/components/LegalDocument.tsx
@@ -17,10 +17,23 @@ const ContentBoxLegalDocument = ({
 }: LegalDocumentProps) => {
   return (
     <ContentBox maxWidth="md">
-      <Typography variant="h3" textAlign="center" mt={2} mb={4}>
+      <Typography
+        variant="h3"
+        sx={{
+          textAlign: 'center',
+          mt: 2,
+          mb: 4,
+        }}
+      >
         {mainTitle}
       </Typography>
-      <Box display="flex" flexDirection="column" gap={4}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 4,
+        }}
+      >
         {children}
       </Box>
     </ContentBox>

diff --git a/frontend/src/components/LoaderWrapper.tsx b/frontend/src/components/LoaderWrapper.tsx
@@ -22,14 +22,21 @@ const LoaderWrapper = ({
   return (
     <>
       {isLoading && circularProgress && (
-        <Box position="relative" width="100%">
+        <Box
+          sx={{
+            position: 'relative',
+            width: '100%',
+          }}
+        >
           <Box
-            position="absolute"
-            display="flex"
-            width="100%"
-            minHeight="100px"
-            alignItems="center"
-            justifyContent="center"
+            sx={{
+              position: 'absolute',
+              display: 'flex',
+              width: '100%',
+              minHeight: '100px',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
           >
             <CircularProgress size={50} />
           </Box>

diff --git a/frontend/src/components/MenuButton.tsx b/frontend/src/components/MenuButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Menu } from '@mui/material';
+import { Button, Menu, Theme } from '@mui/material';
 import { ArrowDropDown } from '@mui/icons-material';
 
 interface Props {
@@ -40,14 +40,16 @@ const MenuButton = ({
         open={Boolean(anchorEl)}
         anchorEl={anchorEl}
         onClose={closeMenu}
-        MenuListProps={{
-          onClick: () => closeMenu(),
-          sx: {
-            backgroundColor: (t) => t.palette.background.menu,
-            '& .MuiListItemIcon-root': { color: '#CDCABC' },
+        {...menuProps}
+        slotProps={{
+          list: {
+            onClick: () => closeMenu(),
+            sx: {
+              backgroundColor: (t: Theme) => t.palette.background.menu,
+              '& .MuiListItemIcon-root': { color: '#CDCABC' },
+            },
           },
         }}
-        {...menuProps}
       >
         {menuContent}
       </Menu>

diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
@@ -81,7 +81,13 @@ const Pagination = ({
         flexWrap: 'wrap',
       }}
     >
-      <Box width="100%" display="flex" justifyContent="center">
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
         <Typography variant="body2">
           <Trans t={t} i18nKey="pagination.showingCounts" count={count}>
             Showing {{ firstElementIdx }} - {{ lastElementIdx }} of {{ count }}
@@ -104,12 +110,14 @@ const Pagination = ({
             }}
           />
           <Box
-            width="100%"
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            flexWrap="wrap"
-            gap={1}
+            sx={{
+              width: '100%',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+              gap: 1,
+            }}
           >
             <Button
               id="pagination_1_prev"

diff --git a/frontend/src/components/SettingsSection.tsx b/frontend/src/components/SettingsSection.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, Divider, Grid, Typography } from '@mui/material';
+import { Box, Divider, Grid2, Typography } from '@mui/material';
 
 const SettingsSection = ({
   title,
@@ -25,17 +25,19 @@ const SettingsSection = ({
     );
 
   return (
-    <Grid item container>
-      <Grid item xs={12}>
-        <Box marginBottom={2}>
+    <Grid2 container>
+      <Grid2 size={{ xs: 12 }}>
+        <Box
+          sx={{
+            marginBottom: 2,
+          }}
+        >
           {sectionTitle}
           <Divider />
         </Box>
-      </Grid>
-      <Grid item {...rest}>
-        {children}
-      </Grid>
-    </Grid>
+      </Grid2>
+      <Grid2 size={rest}>{children}</Grid2>
+    </Grid2>
   );
 };
 

diff --git a/frontend/src/components/TitledPaper.tsx b/frontend/src/components/TitledPaper.tsx
@@ -24,10 +24,10 @@ const TitledPaper = ({
     <Paper sx={sx}>
       <Box
         id={titleId}
-        p={2}
-        color="#fff"
-        bgcolor="background.emphatic"
         sx={{
+          p: 2,
+          color: '#fff',
+          bgcolor: 'background.emphatic',
           borderTopLeftRadius: 'inherit',
           borderTopRightRadius: 'inherit',
         }}
@@ -38,7 +38,13 @@ const TitledPaper = ({
           title
         )}
       </Box>
-      <Box p={contentBoxPadding}>{children}</Box>
+      <Box
+        sx={{
+          p: contentBoxPadding,
+        }}
+      >
+        {children}
+      </Box>
     </Paper>
   );
 };