Move teks titre

components/teks/teks-drawer.js

@@ -45,7 +45,6 @@ const useStyles = makeStyles(theme => ({
     }
   },
   menuButton: {
-    marginRight: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
       display: 'none'
     }
@@ -69,9 +68,6 @@ const useStyles = makeStyles(theme => ({
   text: {
     marginBottom: '0.5em'
   },
-  button: {
-    marginRight: '0.5em'
-  },
   gridText: {
     border: '1px dashed grey',
     borderRadius: '5px',
@@ -136,9 +132,6 @@ export default function TeksDrawer({miziks, mizik}) {
                   <KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
                 </IconButton>
               </Link>
-              <Typography noWrap variant='h6'>
-                {teks.titre}
-              </Typography>
               {teks.liens && teks.liens.length > 0 && (
                 <div className={classes.vwe}>
                   <VweKouteAchte isVideo teks={teks} />
@@ -189,26 +182,31 @@ export default function TeksDrawer({miziks, mizik}) {
       </nav>
       <main className={classes.content}>
         {teks ? (
-          <Grid container className={classes.grid} spacing={3}>
+          <>
-            <Grid item md className={classes.gridText}>
+            <Typography noWrap align='center' style={{marginTop: '1em'}} variant='h6'>
-              <Typography align='center' className={classes.text} variant='h4'>
+              {teks.titre}
-                Transcription
+            </Typography>
-              </Typography>
+            <Grid container className={classes.grid} spacing={3}>
-              <Typography paragraph align='justify' component='span'>
-                {formatJsonString(teks.transcription)}
-              </Typography>
-            </Grid>
-            {teks.traductions && (
               <Grid item md className={classes.gridText}>
                 <Typography align='center' className={classes.text} variant='h4'>
-                  Traduction
+                  Transcription
                 </Typography>
                 <Typography paragraph align='justify' component='span'>
-                  {formatJsonString(teks.traductions.francais)}
+                  {formatJsonString(teks.transcription)}
                 </Typography>
               </Grid>
-            )}
+              {teks.traductions && (
-          </Grid>
+                <Grid item md className={classes.gridText}>
+                  <Typography align='center' className={classes.text} variant='h4'>
+                    Traduction
+                  </Typography>
+                  <Typography paragraph align='justify' component='span'>
+                    {formatJsonString(teks.traductions.francais)}
+                  </Typography>
+                </Grid>
+              )}
+            </Grid>
+          </>
         ) : (
           <DenyeTeks {...miziks} />
         )}