Reorganize Teks page

components/teks/diferans-dialog.js

@@ -35,7 +35,7 @@ export default function DiferansDialog({difference}) {
   }
 
   return (
-    <Box sx={{textAlign: 'center'}}>
+    <Box sx={{textAlign: 'center', marginTop: 2}}>
       <Button variant='outlined' onClick={handleClickOpen}>
         Voir la liste des modifications
       </Button>

components/teks/teks.js

@@ -132,7 +132,7 @@ export default function Teks({parole, paroleId, commentaires, open, success, err
         <Pataje parole={parole} setError={setError} setSuccess={setSuccess} />
       </div>
       <Box sx={{textAlign: 'center'}}>
-        <Typography variant='h4' component='div' display='block'>
+        <Typography variant='h4' component='div' display='block' marginBottom={2}>
           <Typography gutterBottom variant='h6' component='div'>
             {aliases}
           </Typography>
@@ -151,12 +151,8 @@ export default function Teks({parole, paroleId, commentaires, open, success, err
               </ExplicitTooltip>
             )}
           </Typography>
-          <Grid container alignItems='center' justifyContent='center'>
-            {commentaires && (
-              <VweKomante commentaires={commentaires} parole={parole} paroleId={paroleId} />
-            )}
-          </Grid>
         </Typography>
+
         {parole?.user?.data && (
           <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
             <i>parole soumise par {parole.user.data.attributes.username}</i>
@@ -167,20 +163,18 @@ export default function Teks({parole, paroleId, commentaires, open, success, err
             <i>parole soumise par {parole.userAdmin.data.attributes.firstname}</i>
           </Typography>
         )}
+        {(parole.okiMizikID || parole.streamAudio.length > 0) && (
+          <Box sx={{textAlign: 'center'}}>
+            <EntegreMizik parole={parole} isMobile={isMobile} />
+          </Box>
+        )}
+        {parole.okiMizikID && (
+          <OkiMizik id={parole.okiMizikID} parole={parole} />
+        )}
+        {parole?.difference?.length > 0 && (
+          <DiferansDialog difference={parole.difference} />
+        )}
       </Box>
-      {(parole.okiMizikID || parole.streamAudio.length > 0) && (
-        <Box sx={{textAlign: 'center'}}>
-          <EntegreMizik parole={parole} isMobile={isMobile} />
-        </Box>
-      )}
-      {parole.okiMizikID && (
-        <OkiMizik id={parole.okiMizikID} parole={parole} />
-      )}
-
-      {parole?.difference?.length > 0 && (
-        <DiferansDialog difference={parole.difference} />
-      )}
-
       <Grid container justifyContent='start' spacing={1}>
         <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
           <div className={classes.gridText}>
@@ -243,6 +237,11 @@ export default function Teks({parole, paroleId, commentaires, open, success, err
           </Alert>
         </Snackbar>
       )}
+      <Grid container alignItems='center' justifyContent='center'>
+        {commentaires && (
+          <VweKomante commentaires={commentaires} parole={parole} paroleId={paroleId} />
+        )}
+      </Grid>
     </Root>
   )
 }