From 68fe1432eed19186908832db512b361f1afd8652 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Famibelle-Pronzola?= <c.pronzola@tuta.io>
Date: Sat, 22 Jul 2023 23:39:16 +0400
Subject: [PATCH] Use media queries css to fix Teks positions

---
 components/teks/denye-teks.js | 18 +++++++++++-------
 components/teks/teks.js       | 17 ++++++++++++-----
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/components/teks/denye-teks.js b/components/teks/denye-teks.js
index c54509e..fa35af3 100644
--- a/components/teks/denye-teks.js
+++ b/components/teks/denye-teks.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import Container from '@mui/material/Container'
 import Grid from '@mui/material/Unstable_Grid2'
 import Typography from '@mui/material/Typography'
-import useMediaQuery from '@mui/material/useMediaQuery'
 
 import {styled} from '@mui/material/styles'
 
@@ -16,19 +15,24 @@ const classes = {
   container: `${PREFIX}-container`
 }
 
-const Root = styled('div')(props => ({
+const Root = styled('div')(() => ({
   [`&.${classes.container}`]: {
     marginTop: '4em',
     marginBottom: '2em',
-    marginLeft: props.isMobile ? '' : '240px',
-  }
+  },
+
+  '@media (max-width: 600px)': {
+    marginLeft: '0',
+  },
+
+  '@media (min-width: 600px)': {
+    marginLeft: '240px',
+  },
 }))
 
 export default function DenyeTeks({denyeTeks}) {
-  const isMobile = useMediaQuery('(max-width:600px)')
-
   return (
-    <Root isMobile={isMobile} className={classes.container}>
+    <Root className={classes.container}>
       <Container align='center'>
         {denyeTeks.length === 0 && (
           <Container sx={{marginTop: 2}} align='center'>
diff --git a/components/teks/teks.js b/components/teks/teks.js
index f6d8a97..66366ac 100644
--- a/components/teks/teks.js
+++ b/components/teks/teks.js
@@ -30,10 +30,9 @@ const classes = {
   pataje: `${PREFIX}-pataje`
 }
 
-const Root = styled('div')(props => ({
+const Root = styled('div')(() => ({
   [`&.${classes.container}`]: {
     marginTop: '3em',
-    marginLeft: props.isMobile ? '' : '240px',
   },
 
   [`& .${classes.gridText}`]: {
@@ -46,7 +45,15 @@ const Root = styled('div')(props => ({
   [`& .${classes.pataje}`]: {
     position: 'absolute',
     zIndex: 9999
-  }
+  },
+
+  '@media (max-width: 600px)': {
+    marginLeft: '0',
+  },
+
+  '@media (min-width: 600px)': {
+    marginLeft: '240px',
+  },
 }))
 
 const langToArray = parole => {
@@ -114,7 +121,7 @@ export default function Teks({parole}) {
   }, [])
 
   return (
-    <Root isMobile={isMobile} className={classes.container}>
+    <Root className={classes.container}>
       <Box sx={{textAlign: 'center', marginTop: 1}}>
         <Typography variant='h4' component='div' display='block' marginBottom={2}>
           <Typography gutterBottom variant='h6' component='div'>
@@ -158,7 +165,7 @@ export default function Teks({parole}) {
           <DiferansDialog difference={parole.difference} />
         )}
       </Box>
-      <Grid container justifyContent='start' spacing={1}>
+      <Grid container justifyContent='center' spacing={1}>
         <Grid xs={12} md={langArray.length > 0 ? 6 : null}>
           <Box className={classes.gridText}>
             <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>