Fixing lint dashboard v2

package.json

@@ -52,7 +52,8 @@
     }
   },
   "resolutions": {
-    "react-is": "^17.0.1"
+    "react-is": "^17.0.1",
+    "@types/react": "18.3.3"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^12.1.6",

src/components/Base.tsx

@@ -92,7 +92,9 @@ export const Base = ({ children, rightNav, hideLeftNav = false, showSubHeader =
               <SubHeaders />
             </div>
           )}
-          <div className="app-content__card with-shadow">{children}</div>
+          <Box sx={{ padding: '0.5rem 1.2rem', margin: 0 }} className="app-content__card with-shadow">
+            {children}
+          </Box>
         </Grid>
 
         {rightNav && (

src/components/PageLayout.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Box } from '@mui/material';
+
+type PageLayoutProps = {
+  children: React.ReactNode;
+};
+
+export const PageLayout: React.FC<PageLayoutProps> = ({ children }) => {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        padding: {
+          xs: '0',
+          md: '0.5rem 1rem 1rem 1rem',
+        },
+      }}
+    >
+      {children}
+    </Box>
+  );
+};

src/components/PaginationNav/PaginationNav.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 
 import type { SelectChangeEvent } from '@mui/material';
-import { InputLabel, MenuItem, Pagination, Select } from '@mui/material';
-
-import styles from './PaginationNav.module.css';
+import { Box, InputLabel, MenuItem, Pagination, Select } from '@mui/material';
 
 interface PaginationNavProps {
   page: number;
@@ -15,8 +13,14 @@ interface PaginationNavProps {
 
 const PaginationNav = ({ page, itemsPerPage, totalItems, handlePage, handleItemsPerPage }: PaginationNavProps) => {
   return (
-    <div className={styles.paginationContainer}>
-      <div className={styles.itemsPerPageContainer}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <Box alignSelf="start" mb="1rem">
         <InputLabel id="activities-per-page-label" sx={{ fontSize: '.9rem', marginRight: '18px', display: 'inline' }}>
           Activités par page
         </InputLabel>
@@ -32,17 +36,9 @@ const PaginationNav = ({ page, itemsPerPage, totalItems, handlePage, handleItems
           <MenuItem value={10}>10</MenuItem>
           <MenuItem value={25}>25</MenuItem>
         </Select>
-      </div>
-      {totalItems > itemsPerPage && (
-        <Pagination
-          count={Math.ceil(totalItems / itemsPerPage)}
-          page={page}
-          onChange={handlePage}
-          variant="outlined"
-          sx={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', bottom: '0' }}
-        />
-      )}
-    </div>
+      </Box>
+      {totalItems > itemsPerPage && <Pagination count={Math.ceil(totalItems / itemsPerPage)} page={page} onChange={handlePage} variant="outlined" />}
+    </Box>
   );
 };
 export default PaginationNav;

src/components/activities/ActivityCard/AnthemCard.tsx

@@ -18,7 +18,7 @@ export const AnthemCard = ({ activity, isSelf, noButtons, isDraft, showEditButto
   >
     <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
       <h3>Paramétrage de l&apos;hymne du village idéal</h3>
-      <div style={{ margin: '0 0.5rem 1rem', height: `4rem`, textAlign: 'justify' }}>
+      <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
         <div className="text multine-with-ellipsis" style={{ maxHeight: `4rem` }}>
           <p>
             {activity.data.chorusLyrics.map((syllable) =>

src/components/activities/ActivityCard/DefiCard.tsx

@@ -69,7 +69,7 @@ export const DefiCard = ({ activity, isSelf, noButtons, isDraft, showEditButtons
             ? getLanguageTheme(activity.data)
             : null}
         </h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {isCooking(activity)
               ? `${activity.data.history}. ${activity.data.explanation}`

src/components/activities/ActivityCard/EnigmeCard.tsx

@@ -60,7 +60,7 @@ export const EnigmeCard = ({ activity, isSelf, noButtons, isDraft, showEditButto
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
         <h3 style={{ margin: '0 0.5rem 0.5rem' }}>{enigmeTitle}</h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {firstText}
           </div>

src/components/activities/ActivityCard/FreeContentCard.tsx

@@ -47,7 +47,7 @@ export const FreeContentCard = ({ activity, isSelf, noButtons, isDraft, showEdit
         </div>
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {activity.data.title}
           </div>

src/components/activities/ActivityCard/IndiceCard.tsx

@@ -53,7 +53,7 @@ export const IndiceCard = ({ activity, isSelf, noButtons, isDraft, showEditButto
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
         <h3 style={{ margin: '0 0.5rem 0.5rem' }}>{indiceType.title}</h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {firstText}
           </div>

src/components/activities/ActivityCard/MascotteCard.tsx

@@ -41,7 +41,7 @@ export const MascotteCard = ({ activity, isSelf, noButtons, isDraft, showEditBut
         <h3 style={{ margin: '0 0.5rem 0.5rem' }}>
           Notre mascotte <strong>{activity.data.mascotteName}</strong>
         </h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `4rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `4rem` }}>
             {firstText}
           </div>

src/components/activities/ActivityCard/PresentationCard.tsx

@@ -53,7 +53,7 @@ export const PresentationCard = ({ activity, isSelf, noButtons, isDraft, showEdi
         {activity.data.theme !== undefined && (
           <h3 style={{ margin: '0 0.5rem 0.5rem' }}>{PRESENTATION_THEMATIQUE[activity.data.theme as number].cardTitle}</h3>
         )}
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {firstText}
           </div>

src/components/activities/ActivityCard/ReportageCard.tsx

@@ -79,7 +79,7 @@ export const ReportageCard = ({ activity, isSelf, noButtons, isDraft, showEditBu
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
         <h3 style={{ margin: '0 0.5rem 0.5rem' }}>{reportageType.title}</h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${hasPreview ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${hasPreview ? 4 : 2}rem` }}>
             {firstText}
           </div>

src/components/activities/ActivityCard/StoryCard.tsx

@@ -49,7 +49,7 @@ export const StoryCard = ({ activity, isSelf, noButtons, isDraft, showEditButton
         </div>
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <h3>Une histoire du village idéal</h3>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 2 : 1}rem` }}>
             {firstText}

src/components/activities/ActivityCard/SymbolCard.tsx

@@ -53,7 +53,7 @@ export const SymbolCard = ({ activity, isSelf, noButtons, isDraft, showEditButto
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
         <h3 style={{ margin: '0 0.5rem 0.5rem' }}>{symbolType.title}</h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {firstText}
           </div>

src/components/activities/ActivityCard/VerseRecordCard.tsx

@@ -1,27 +1,31 @@
 import Link from 'next/link';
 import React from 'react';
 
-import { Button } from '@mui/material';
+import { Box, Button } from '@mui/material';
 
 import { CommentIcon } from './CommentIcon';
 import type { ActivityCardProps } from './activity-card.types';
 import { RedButton } from 'src/components/buttons/RedButton';
 import type { ClassAnthemActivity } from 'types/classAnthem.types';
 
 export const VerseRecordCard = ({ activity, isSelf, noButtons, isDraft, showEditButtons, onDelete }: ActivityCardProps<ClassAnthemActivity>) => (
-  <div
-    style={{
+  <Box
+    sx={{
       display: 'flex',
       alignItems: 'stretch',
       justifyContent: 'flex-start',
+      flexDirection: {
+        xs: 'column',
+        md: 'row',
+      },
     }}
   >
     <div style={{ width: '40%', flexShrink: 0, padding: '0.25rem' }}>
       <audio controls src={activity.data.verseFinalMixUrl} />
     </div>
     <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
       <h3>Un couplet de l&apos;hymne du village idéal</h3>
-      <div style={{ margin: '0 0.5rem 1rem', height: `4rem`, textAlign: 'justify' }}>
+      <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
         <div className="text multine-with-ellipsis" style={{ maxHeight: `4rem` }}>
           <p>
             {activity.data.verseLyrics.map((syllable, index) =>
@@ -81,5 +85,5 @@ export const VerseRecordCard = ({ activity, isSelf, noButtons, isDraft, showEdit
         </div>
       )}
     </div>
-  </div>
+  </Box>
 );

src/components/activities/ActivityCard/index.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import React from 'react';
 
+import { Box } from '@mui/material';
 import Paper from '@mui/material/Paper';
 
 import { titles, icons, REACTIONS } from '../utils';
@@ -130,21 +131,27 @@ export const ActivityCard = ({
             )}
           </div>
         </div>
-        {!showEditButtons && isEnigme(activity) && (
-          <>
-            <Timer style={{ alignSelf: 'center', height: '1.2rem', width: 'auto', marginRight: '0.25rem' }} />
-            <div style={{ alignSelf: 'center', marginRight: '0.5rem', lineHeight: '0.875rem' }}>
-              <span className="text text--small text--error">{timeLeft > 0 ? `Temps restant: ${timeLeft}j` : 'La réponse est disponible !'}</span>
-            </div>
-          </>
-        )}
         {activity.isPinned && <PinIcon style={{ fill: primaryColor, margin: '0 0.65rem', width: '2rem', height: 'auto', alignSelf: 'center' }} />}
         {ActivityIcon && !isReaction(activity) && (
           <ActivityIcon
             style={{ fill: primaryColor, color: primaryColor, margin: '0 0.65rem', width: '2rem', height: 'auto', alignSelf: 'center' }}
           />
         )}
       </div>
+      {!showEditButtons && isEnigme(activity) && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'end',
+          }}
+        >
+          <Timer style={{ alignSelf: 'center', height: '1.2rem', width: 'auto', marginRight: '0.25rem' }} />
+          <div style={{ alignSelf: 'center', marginRight: '0.5rem', lineHeight: '0.875rem' }}>
+            <span className="text text--small text--error">{timeLeft > 0 ? `Temps restant: ${timeLeft}j` : 'La réponse est disponible !'}</span>
+          </div>
+        </Box>
+      )}
       <div className="activity-card__content">
         <UsedCard
           // eslint-disable-next-line

src/components/activities/ActivityComments/AddComment.tsx

@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import React from 'react';
 
-import { Button, CircularProgress, Tooltip } from '@mui/material';
+import { Box, Button, CircularProgress, Tooltip } from '@mui/material';
 
 import { AvatarImg } from 'src/components/Avatar';
 import { UserContext } from 'src/contexts/userContext';
@@ -50,12 +50,35 @@ export const AddComment = ({ activityId, activityType, activityPhase }: AddComme
 
   return (
     <>
-      <div className="activity__comment-container">
+      <Box
+        sx={{
+          flexDirection: {
+            xs: 'column',
+            md: 'row',
+          },
+        }}
+        className="activity__comment-container"
+      >
         <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
-          <span style={{ marginLeft: '2.5rem', fontWeight: 600 }}>Publiez directement un commentaire</span>
-          <div style={{ display: 'flex' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: {
+                xs: 'column',
+                sm: 'row',
+              },
+            }}
+          >
             <AvatarImg user={user} size="small" style={{ margin: '0.25rem' }} noLink />
-            <div style={{ flex: 1, marginLeft: '0.25rem', position: 'relative', minWidth: 0, maxWidth: 539 }}>
+            <div style={{ flex: 1, marginLeft: '0.25rem', position: 'relative', minWidth: 0 }}>
+              <Box
+                component="span"
+                sx={{
+                  fontWeight: 600,
+                }}
+              >
+                Publiez directement un commentaire
+              </Box>
               <TextEditor
                 maxLen={400}
                 value={newComment}
@@ -72,13 +95,29 @@ export const AddComment = ({ activityId, activityType, activityPhase }: AddComme
                 {isObservator ? (
                   <Tooltip title="Action non autorisée" arrow>
                     <span>
-                      <Button variant="outlined" color="primary" onClick={comment} disabled={isObservator}>
+                      <Button
+                        sx={{
+                          width: 'inherit',
+                        }}
+                        variant="outlined"
+                        color="primary"
+                        onClick={comment}
+                        disabled={isObservator}
+                      >
                         Commenter
                       </Button>
                     </span>
                   </Tooltip>
                 ) : (
-                  <Button variant="outlined" color="primary" onClick={comment} disabled={isObservator}>
+                  <Button
+                    sx={{
+                      width: 'inherit',
+                    }}
+                    variant="outlined"
+                    color="primary"
+                    onClick={comment}
+                    disabled={isObservator}
+                  >
                     Commenter
                   </Button>
                 )}
@@ -89,10 +128,17 @@ export const AddComment = ({ activityId, activityType, activityPhase }: AddComme
                 <CircularProgress color="primary" />
               </div>
             )}
-          </div>
+          </Box>
         </div>
         {activityPhase >= 2 && activityType !== ActivityType.REACTION && (
-          <div style={{ marginLeft: '1rem' }}>
+          <Box
+            sx={{
+              marginLeft: {
+                xs: '0',
+                md: '1rem',
+              },
+            }}
+          >
             {activityPhase >= 3 && (activityType === ActivityType.STORY || activityType === ActivityType.RE_INVENT_STORY) ? (
               <p style={{ fontWeight: 600 }}>Ou bien ré-écrivez l&apos;histoire !</p>
             ) : (
@@ -153,9 +199,9 @@ export const AddComment = ({ activityId, activityType, activityPhase }: AddComme
                 )}
               </>
             )}
-          </div>
+          </Box>
         )}
-      </div>
+      </Box>
     </>
   );
 };