feat(#vil-497): symbole

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/pages/contenu-libre/1.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { isFreeContent } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentEditor } from 'src/components/activities/content';
@@ -43,7 +44,7 @@ const ContenuLibre = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/contenu-libre" />}
         <Steps
           steps={['Contenu', 'Forme', 'Pré-visualiser']}
@@ -59,7 +60,7 @@ const ContenuLibre = () => {
           <ContentEditor content={activity.content} updateContent={updateContent} addContent={addContent} deleteContent={deleteContent} />
           <StepsButton next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };

src/pages/contenu-libre/2.tsx

@@ -9,6 +9,7 @@ import { getImage } from 'src/activity-types/freeContent.constants';
 import type { FreeContentData } from 'src/activity-types/freeContent.types';
 import { Base } from 'src/components/Base';
 import { Modal } from 'src/components/Modal';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ActivityCard } from 'src/components/activities/ActivityCard';
@@ -69,7 +70,7 @@ const ContenuLibre = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Contenu', 'Forme', 'Pré-visualiser']}
           urls={['/contenu-libre/1?edit', '/contenu-libre/2', '/contenu-libre/3']}
@@ -166,7 +167,7 @@ const ContenuLibre = () => {
           <ActivityCard activity={activity} user={user} noButtons />
           <StepsButton prev="/contenu-libre/1" next={onNext} />
         </div>
-      </div>
+      </PageLayout>
 
       {/* All Images modal */}
       <Modal

src/pages/contenu-libre/3.tsx

@@ -10,6 +10,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import { isFreeContent } from 'src/activity-types/anyActivity';
 import type { FreeContentData } from 'src/activity-types/freeContent.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ActivityCard } from 'src/components/activities/ActivityCard';
@@ -65,7 +66,7 @@ const ContenuLibre = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Contenu', 'Forme', 'Prévisualiser']}
           urls={['/contenu-libre/1?edit', '/contenu-libre/2', '/contenu-libre/3']}
@@ -125,7 +126,7 @@ const ContenuLibre = () => {
 
           <StepsButton prev="/contenu-libre/2" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>

src/pages/contenu-libre/index.tsx

@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ActivityContext } from 'src/contexts/activityContext';
 import { UserContext } from 'src/contexts/userContext';
@@ -30,7 +31,7 @@ const ContenuLibre = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div className="width-900">
           <h1 style={{ marginTop: '0.5rem' }}>Publication de contenu libre</h1>
           <p className="text">
@@ -39,7 +40,7 @@ const ContenuLibre = () => {
           </p>
           <StepsButton next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };

src/pages/contenu-libre/success.tsx

@@ -4,13 +4,14 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 
 const FreeContentSuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text">Votre publication a bien été publiée !</p>
           <PelicoSouriant style={{ width: '60%', height: 'auto', margin: '0 20%' }} />
@@ -22,7 +23,7 @@ const FreeContentSuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };

src/pages/ma-classe.tsx

@@ -4,6 +4,7 @@ import { useQueryClient } from 'react-query';
 import { isMascotte } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
 import { Modal } from 'src/components/Modal';
+import { PageLayout } from 'src/components/PageLayout';
 import { ActivityCard } from 'src/components/activities/ActivityCard';
 import { MascotteTemplate } from 'src/components/activities/content/MascotteTemplate';
 import { ActivityContext } from 'src/contexts/activityContext';
@@ -91,7 +92,7 @@ const MaClasse = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div className="width-900">
           <h1 style={{ marginTop: '0.5rem', marginBottom: '1rem' }}>Notre mascotte</h1>
           {mascotteActivity && user ? (
@@ -147,7 +148,7 @@ const MaClasse = () => {
             )
           )}
         </div>
-      </div>
+      </PageLayout>
       <Modal
         open={deleteIndex.index !== -1}
         error

src/pages/symbole/1.tsx

@@ -6,6 +6,7 @@ import { TextField } from '@mui/material';
 import { getSymbol } from 'src/activity-types/symbol.constants';
 import type { SymbolData } from 'src/activity-types/symbol.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { Activities } from 'src/components/activities/List';
@@ -60,7 +61,7 @@ const SymbolStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/symbole" />}
         <Steps
           steps={[getSymbol(activity.subType, data).step1 || 'Symbole', 'Créer le symbole', 'Prévisualiser']}
@@ -109,7 +110,7 @@ const SymbolStep1 = () => {
             </div>
           )}
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };

src/pages/symbole/2.tsx

@@ -5,6 +5,7 @@ import { isSymbol } from 'src/activity-types/anyActivity';
 import { getSymbol } from 'src/activity-types/symbol.constants';
 import type { SymbolData } from 'src/activity-types/symbol.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentEditor } from 'src/components/activities/content';
@@ -45,7 +46,7 @@ const SymbolStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[getSymbol(activity.subType, data).step1, 'Créer le symbole', 'Prévisualiser']}
           urls={['/symbole/1?edit', '/symbole/2', '/symbole/3']}
@@ -63,7 +64,7 @@ const SymbolStep2 = () => {
           <ContentEditor content={activity.content} updateContent={updateContent} addContent={addContent} deleteContent={deleteContent} />
           <StepsButton prev="/symbole/1?edit" next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };

src/pages/symbole/3.tsx

@@ -12,6 +12,7 @@ import { isSymbol } from 'src/activity-types/anyActivity';
 import { getSymbol } from 'src/activity-types/symbol.constants';
 import type { SymbolData } from 'src/activity-types/symbol.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentView } from 'src/components/activities/content/ContentView';
@@ -65,7 +66,7 @@ const SymbolStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[getSymbol(activity.subType, data).step1, 'Créer le symbole', 'Prévisualiser']}
           urls={['/symbole/1?edit', '/symbole/2', '/symbole/3']}
@@ -142,7 +143,7 @@ const SymbolStep3 = () => {
 
           <StepsButton prev="/symbole/2" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>

src/pages/symbole/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { ActivityChoice } from 'src/components/activities/ActivityChoice';
 import AnimalNationalIcon from 'src/svg/symbole/animal-national.svg';
 import DeviseIcon from 'src/svg/symbole/devise.svg';
@@ -80,7 +81,7 @@ const symbols = [
 const Symbol = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div className="width-900">
           <h1 style={{ marginTop: '0.5rem' }}>Quel symbole allez-vous présenter ?</h1>
           <p className="text">
@@ -92,7 +93,7 @@ const Symbol = () => {
           </p>
           <ActivityChoice activities={symbols} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };

src/pages/symbole/success.tsx

@@ -4,13 +4,14 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 
 const IndiceSuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text">Votre symbole a bien été publié !</p>
           <PelicoSouriant style={{ width: '60%', height: 'auto', margin: '0 20%' }} />
@@ -22,7 +23,7 @@ const IndiceSuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };