Improve style in Teks component

components/teks/teks.js

@@ -13,17 +13,14 @@ import ExplicitIcon from '@mui/icons-material/Explicit'
 
 import {formatJsonString, getAlias} from '../../lib/utils/format'
 
-import VweKomante from '../komante/vwe-komante'
-
 import EntegreMizik from './entegre-mizik'
 import OkiMizik from './oki-mizik'
-import Pataje from './pataje'
 import DiferansDialog from './diferans-dialog'
 
 const PREFIX = 'teks'
 
 const classes = {
-  root: `${PREFIX}-root`,
+  container: `${PREFIX}-container`,
   tooltip: `${PREFIX}-tooltip`,
   text: `${PREFIX}-text`,
   gridText: `${PREFIX}-gridText`,
@@ -33,13 +30,10 @@ const classes = {
   pataje: `${PREFIX}-pataje`
 }
 
-const Root = styled('div')((
+const Root = styled('div')(props => ({
-  {
+  [`&.${classes.container}`]: {
-    theme
+    marginTop: '3em',
-  }
+    marginLeft: props.isMobile ? '' : '240px',
-) => ({
-  [`& .${classes.text}`]: {
-    marginBottom: '0.5em'
   },
 
   [`& .${classes.gridText}`]: {
@@ -49,19 +43,9 @@ const Root = styled('div')((
     padding: '1em'
   },
 
-  [`& .${classes.grid}`]: {
-    marginTop: '1em'
-  },
-
   [`& .${classes.pataje}`]: {
-    position: 'fixed',
+    position: 'absolute',
-    top: '59px',
+    zIndex: 9999
-    left: '110px',
-    zIndex: 2,
-    [theme.breakpoints.up('sm')]: {
-      top: '62px',
-      left: '340px'
-    }
   }
 }))
 
@@ -113,23 +97,25 @@ const alignTeks = (langArray, isMobile) => {
   }
 }
 
-const Alert = forwardRef(function Alert(props, ref) {
-  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
-})
-
 const ExplicitTooltip = Tooltip
 
-export default function Teks({parole, paroleId, commentaires, open, success, error, setSuccess, setError, handleClose}) {
+export default function Teks({parole}) {
-  const isMobile = useMediaQuery('(max-width:800px)')
+  const isMobile = useMediaQuery('(max-width:600px)')
   const langArray = langToArray(parole)
   const aliases = getAlias(parole.artistes, parole.prioriteArtistes)
 
+  useEffect(() => {
+    const isBrowser = () => typeof window !== 'undefined'
+    if (!isBrowser()) {
+      return
+    }
+
+    window.scrollTo({top: 0, behavior: 'smooth'})
+  }, [])
+
   return (
-    <Root>
+    <Root isMobile={isMobile} className={classes.container}>
-      <div className={classes.pataje}>
+      <Box sx={{textAlign: 'center', marginTop: 1}}>
-        <Pataje parole={parole} setError={setError} setSuccess={setSuccess} />
-      </div>
-      <Box sx={{textAlign: 'center'}}>
         <Typography variant='h4' component='div' display='block' marginBottom={2}>
           <Typography gutterBottom variant='h6' component='div'>
             {aliases}
@@ -140,7 +126,6 @@ export default function Teks({parole, paroleId, commentaires, open, success, err
               <ExplicitTooltip
                 title='Explicit Lyrics'
                 placement='bottom'
-                TransitionComponent={Zoom}
                 classes={{
                   tooltip: classes.tooltip
                 }}
@@ -174,20 +159,20 @@ export default function Teks({parole, paroleId, commentaires, open, success, err
         )}
       </Box>
       <Grid container justifyContent='start' spacing={1}>
-        <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
+        <Grid xs={12} md={langArray.length > 0 ? 6 : null}>
-          <div className={classes.gridText}>
+          <Box className={classes.gridText}>
-            <Typography align='center' className={classes.text} variant='h4'>
+            <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
               Transcription
             </Typography>
             <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
               {formatJsonString(parole.transcription)}
             </Typography>
-          </div>
+          </Box>
         </Grid>
         {langArray.map(({title, flag, lang}) => (
-          <Grid key={title} item xs={12} md={6}>
+          <Grid key={title} xs={12} md={6}>
-            <div className={classes.gridText}>
+            <Box className={classes.gridText}>
-              <Typography align='center' className={classes.text} variant='h4'>
+              <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
                 {flag === 'fr' && (
                   <span>
                     🇫🇷
@@ -217,47 +202,14 @@ export default function Teks({parole, paroleId, commentaires, open, success, err
               <Typography paragraph align='justify' component='span'>
                 {formatJsonString(lang)}
               </Typography>
-            </div>
+            </Box>
           </Grid>
         ))}
       </Grid>
-      {success && (
-        <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
-          <Alert severity='success' onClose={handleClose}>
-            <strong>{success}</strong>
-          </Alert>
-        </Snackbar>
-      )}
-      {error && (
-        <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
-          <Alert severity='error' onClose={handleClose}>
-            <strong>Une erreur s’est produite</strong> : <i>{error.message}</i>
-          </Alert>
-        </Snackbar>
-      )}
-      <Grid container alignItems='center' justifyContent='center'>
-        {commentaires && (
-          <VweKomante commentaires={commentaires} parole={parole} paroleId={paroleId} />
-        )}
-      </Grid>
     </Root>
   )
 }
 
 Teks.propTypes = {
   parole: PropTypes.object.isRequired,
-  paroleId: PropTypes.number.isRequired,
-  commentaires: PropTypes.array,
-  open: PropTypes.bool.isRequired,
-  success: PropTypes.string,
-  error: PropTypes.string,
-  setSuccess: PropTypes.func.isRequired,
-  setError: PropTypes.func.isRequired,
-  handleClose: PropTypes.func.isRequired
-}
-
-Teks.defaultProps = {
-  commentaires: null,
-  success: '',
-  error: ''
 }