Use codemod jss-to-styled

components/awtis/awtis-kat.js

@@ -15,27 +15,43 @@ import {
 } from '@material-ui/core'
 
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 
 import MizikLis from './mizik-lis'
 import AwtisBiyografi from './awtis-biyografi'
 
-const useStyles = makeStyles(theme => ({
+const PREFIX = 'awtis-kat'
-  root: {
+
+const classes = {
+  root: `${PREFIX}-root`,
+  media: `${PREFIX}-media`,
+  expand: `${PREFIX}-expand`,
+  expandOpen: `${PREFIX}-expandOpen`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
     maxWidth: 345
   },
-  media: {
+
+  [`& .${classes.media}`]: {
     height: 240,
     objectFit: 'contain'
   },
-  expand: {
+
+  [`& .${classes.expand}`]: {
     transform: 'rotate(0deg)',
     marginLeft: 'auto',
     transition: theme.transitions.create('transform', {
       duration: theme.transitions.duration.shortest
     })
   },
-  expandOpen: {
+
+  [`& .${classes.expandOpen}`]: {
     transform: 'rotate(180deg)'
   }
 }))
@@ -45,7 +61,7 @@ export default function AwtisKat({anAwtis}) {
   const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
 
   const {alias, biyografi, teks, foto} = anAwtis
-  const classes = useStyles()
+
   const [expanded, setExpanded] = useState(false)
 
   const handleExpandClick = () => {
@@ -57,7 +73,8 @@ export default function AwtisKat({anAwtis}) {
   }
 
   return (
-    <>
+    (
+      <Root>
         <Grid item xs={12} sm={6} lg={4}>
           <Card className={classes.root}>
             <CardActionArea onClick={handleClick}>
@@ -106,7 +123,8 @@ export default function AwtisKat({anAwtis}) {
             meteEsByografiOuve={meteEsByografiOuve}
           />
         )}
-    </>
+      </Root>
+    )
   )
 }
 

components/awtis/mizik-badj-meni.js

@@ -13,20 +13,31 @@ import {
   Badge
 } from '@material-ui/core'
 
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import MenuBookIcon from '@material-ui/icons/MenuBook'
 
-const useStyles = makeStyles(theme => ({
+const PREFIX = 'mizik-badj-meni'
-  root: {
+
+const classes = {
+  root: `${PREFIX}-root`,
+  paper: `${PREFIX}-paper`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     display: 'flex'
   },
-  paper: {
+
+  [`& .${classes.paper}`]: {
     marginRight: theme.spacing(2)
   }
 }))
 
 export default function MizikBadjMeni({teks}) {
-  const classes = useStyles()
   const [open, setOpen] = useState(false)
   const anchorRef = useRef(null)
   const router = useRouter()
@@ -64,7 +75,7 @@ export default function MizikBadjMeni({teks}) {
   }, [open])
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Button
         ref={anchorRef}
         aria-controls={open ? 'menu-list-grow' : undefined}
@@ -98,7 +109,7 @@ export default function MizikBadjMeni({teks}) {
           </Grow>
         )}
       </Popper>
-    </div>
+    </Root>
   )
 }
 

components/awtis/mizik-lis.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import {List, ListItem, ListItemText} from '@material-ui/core'
 import FiberNewOutlinedIcon from '@material-ui/icons/FiberNewOutlined'
 import LibraryMusicIcon from '@material-ui/icons/LibraryMusic'
@@ -9,8 +9,18 @@ import ExplicitIcon from '@material-ui/icons/Explicit'
 
 import {esBrandNew} from '../../lib/date'
 
-const useStyles = makeStyles(theme => ({
+const PREFIX = 'mizik-lis'
-  root: {
+
+const classes = {
+  root: `${PREFIX}-root`
+}
+
+const StyledList = styled(List)((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     width: '100%',
     maxWidth: 360,
     backgroundColor: theme.palette.background.paper
@@ -18,7 +28,6 @@ const useStyles = makeStyles(theme => ({
 }))
 
 export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi, meteSlugTeksChwazi}) {
-  const classes = useStyles()
   const router = useRouter()
 
   const handleClick = slug => {
@@ -40,7 +49,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
   }
 
   return (
-    <List component='nav' className={classes.root} aria-label='mizik'>
+    <StyledList component='nav' className={classes.root} aria-label='mizik'>
       {teks.map(({slug, tit, awtis, published_at, okiMizikID, eksplisit}) => (
         <ListItem
           key={slug}
@@ -61,7 +70,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
           )}
         </ListItem>
       ))}
-    </List>
+    </StyledList>
   )
 }
 

components/awtis/pajinasyon.js

@@ -1,11 +1,21 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import Pagination from '@material-ui/lab/Pagination'
 import {Grid} from '@material-ui/core'
 
-const useStyles = makeStyles(theme => ({
+const PREFIX = 'pajinasyon'
-  root: {
+
+const classes = {
+  root: `${PREFIX}-root`
+}
+
+const StyledGrid = styled(Grid)((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
     '& > *': {
       marginBottom: theme.spacing(2)
     }
@@ -14,7 +24,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function Pajinasyon({pajTotal, paj}) {
   const router = useRouter()
-  const classes = useStyles()
+
   const handleChange = (event, value) => {
     const href = `/awtis?paj&paj=${value}`
     const as = `/awtis/paj/${value}`
@@ -22,11 +32,11 @@ export default function Pajinasyon({pajTotal, paj}) {
   }
 
   return (
-    <Grid container justify='center'>
+    <StyledGrid container justify='center'>
       <div className={classes.root}>
         <Pagination size='small' page={paj} count={pajTotal} color='primary' onChange={handleChange} />
       </div>
-    </Grid>
+    </StyledGrid>
   )
 }
 

components/cgu/cgu-dialog.js

@@ -1,19 +1,25 @@
 import {useRef, useEffect} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {Button, Dialog, DialogActions, DialogContent, DialogTitle, makeStyles, Typography} from '@material-ui/core'
+import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@material-ui/core'
 import {useRouter} from 'next/router'
 import Cgu from '.'
 
-const CGU_DOWNLOAD_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK
+const PREFIX = 'cgu-dialog'
 
-const useStyles = makeStyles(() => ({
+const classes = {
-  dialog: {
+  dialog: `${PREFIX}-dialog`
+}
+
+const Root = styled('div')(() => ({
+  [`& .${classes.dialog}`]: {
     zIndex: 9999
   }
 }))
 
+const CGU_DOWNLOAD_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK
+
 export default function CGUDialog({open, setOpen}) {
-  const classes = useStyles()
   const router = useRouter()
 
   const handleClose = () => {
@@ -36,7 +42,7 @@ export default function CGUDialog({open, setOpen}) {
   }, [open])
 
   return (
-    <div>
+    <Root>
       <Dialog
         open={open}
         scroll='paper'
@@ -65,7 +71,7 @@ export default function CGUDialog({open, setOpen}) {
           </Button>
         </DialogActions>
       </Dialog>
-    </div>
+    </Root>
   )
 }
 

components/cgu/index.js

@@ -1,17 +1,22 @@
-import {List, ListItem, ListItemText, Link, makeStyles, Typography, ListItemIcon} from '@material-ui/core'
+import {List, ListItem, ListItemText, Link, Typography, ListItemIcon} from '@material-ui/core'
+import {styled} from '@mui/material/styles'
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'
 
-const useStyles = makeStyles({
+const PREFIX = 'index'
-  root: {
+
+const classes = {
+  root: `${PREFIX}-root`
+}
+
+const Root = styled('div')({
+  [`&.${classes.root}`]: {
     textAlign: 'justify'
   }
 })
 
 export default function Cgu() {
-  const classes = useStyles()
-
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Typography gutterBottom variant='h5' component='h2'>
         Définitions
       </Typography>
@@ -436,6 +441,6 @@ export default function Cgu() {
       <Typography gutterBottom variant='caption' >
         Dernières modifications le 15/06/2021
       </Typography>
-    </div>
+    </Root>
   )
 }

components/footer.js

@@ -1,25 +1,38 @@
 import {useState} from 'react'
-import {Container, Link, makeStyles, Typography} from '@material-ui/core'
+import {styled} from '@mui/material/styles'
+import {Container, Link, Typography} from '@material-ui/core'
 import CGUDialog from './cgu/cgu-dialog'
 
-const useStyles = makeStyles(theme => ({
+const PREFIX = 'footer'
-  footer: {
+
+const classes = {
+  footer: `${PREFIX}-footer`,
+  text: `${PREFIX}-text`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.footer}`]: {
     padding: theme.spacing(3, 2),
     marginTop: 'auto',
     backgroundColor:
       theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
   },
-  text: {
+
+  [`& .${classes.text}`]: {
     fontWeight: 'bold'
   }
 }))
 
 export default function Footer() {
-  const classes = useStyles()
   const [open, setOpen] = useState(false)
 
   return (
-    <>
+    (
+      <Root>
         <CGUDialog open={open} setOpen={setOpen} />
         <footer id='cgu' className={classes.footer}>
           <Container>
@@ -30,6 +43,7 @@ export default function Footer() {
             </Typography>
           </Container>
         </footer>
-    </>
+      </Root>
+    )
   )
 }

components/kat-kay-la.js

@@ -7,31 +7,39 @@ import {
   Typography,
   Grid
 } from '@material-ui/core'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 
-const useStyles = makeStyles({
+const PREFIX = 'kat-kay-la'
-  root: {
+
+const classes = {
+  root: `${PREFIX}-root`,
+  bullet: `${PREFIX}-bullet`,
+  title: `${PREFIX}-title`,
+  pos: `${PREFIX}-pos`
+}
+
+const StyledGrid = styled(Grid)({
+  [`& .${classes.root}`]: {
     minWidth: 275
   },
-  bullet: {
+  [`& .${classes.bullet}`]: {
     display: 'inline-block',
     margin: '0 2px',
     transform: 'scale(0.8)'
   },
-  title: {
+  [`& .${classes.title}`]: {
     fontSize: 14
   },
-  pos: {
+  [`& .${classes.pos}`]: {
     marginBottom: 12
   }
 })
 
 export default function KatKayLa({tit, soutit, kantite, route}) {
-  const classes = useStyles()
   const router = useRouter()
 
   return (
-    <Grid item xs={12} md={6}>
+    <StyledGrid item xs={12} md={6}>
       <Card className={classes.root} variant='outlined'>
         <CardActionArea onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}>
           <CardContent>
@@ -47,7 +55,7 @@ export default function KatKayLa({tit, soutit, kantite, route}) {
           </CardContent>
         </CardActionArea>
       </Card>
-    </Grid>
+    </StyledGrid>
   )
 }
 

components/komante/komante-list.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import {format} from 'date-fns'
 import {fr} from 'date-fns/locale'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 
 import {
   Typography,
@@ -12,22 +12,32 @@ import {
 
 import {formatJsonString} from '../../lib/utils/format'
 
-const useStyles = makeStyles(theme => ({
+const PREFIX = 'komante-list'
-  root: {
+
+const classes = {
+  root: `${PREFIX}-root`,
+  inline: `${PREFIX}-inline`
+}
+
+const StyledList = styled(List)((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     width: '100%',
     maxWidth: '36ch',
     backgroundColor: theme.palette.background.paper
   },
-  inline: {
+
+  [`& .${classes.inline}`]: {
     display: 'inline'
   }
 }))
 
 export default function KomanteList({komante}) {
-  const classes = useStyles()
-
   return (
-    <List className={classes.root}>
+    <StyledList className={classes.root}>
       {komante.map(({_id, username, kontni, sentAt}) => (
         <div key={_id}>
           <ListItemText
@@ -48,7 +58,7 @@ export default function KomanteList({komante}) {
           <Divider style={{marginBottom: '1em'}} />
         </div>
       ))}
-    </List>
+    </StyledList>
   )
 }
 

components/komante/vwe-komante.js

@@ -1,4 +1,5 @@
 import {useState, useEffect, useRef} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import {useSession} from 'next-auth/client'
 
@@ -11,9 +12,7 @@ import {
   Button,
   Typography,
   Tooltip,
-  Zoom,
+  Zoom
-  withStyles,
-  makeStyles
 } from '@material-ui/core'
 import AddCommentIcon from '@material-ui/icons/AddComment'
 import {useRouter} from 'next/router'
@@ -21,23 +20,31 @@ import Koneksyon from '../sesyon/koneksyon'
 import KomanteList from './komante-list'
 import EkriKomante from './ekri-komante'
 
-const useStyles = makeStyles(theme => ({
+const PREFIX = 'vwe-komante'
-  margin: {
+
+const classes = {
+  tooltip: `${PREFIX}-tooltip`,
+  margin: `${PREFIX}-margin`,
+  extendedIcon: `${PREFIX}-extendedIcon`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.margin}`]: {
     margin: theme.spacing(1)
   },
-  extendedIcon: {
+
+  [`& .${classes.extendedIcon}`]: {
     marginRight: theme.spacing(1)
   }
 }))
 
-const KomanteTooltip = withStyles(() => ({
+const KomanteTooltip = Tooltip
-  tooltip: {
-    fontSize: 18
-  }
-}))(Tooltip)
 
 export default function VweKomante({komante, teks}) {
-  const classes = useStyles()
   const [esOuve, meteEsOuve] = useState(false)
   const [esKoneksyonOuve, meteEsKoneksyonOuve] = useState(false)
   const [esKomenteOuve, meteEsKomanteOuve] = useState(false)
@@ -63,8 +70,16 @@ export default function VweKomante({komante, teks}) {
   }, [esOuve])
 
   return (
-    <>
+    (
-      <KomanteTooltip title='Komantè' placement='bottom' TransitionComponent={Zoom}>
+      <Root>
+        <KomanteTooltip
+          title='Komantè'
+          placement='bottom'
+          TransitionComponent={Zoom}
+          classes={{
+            tooltip: classes.tooltip
+          }}
+        >
           <IconButton className={classes.margin} color='primary' aria-label='commentaire' component='span' onClick={handleClick}>
             <AddCommentIcon />
           </IconButton>
@@ -122,7 +137,8 @@ export default function VweKomante({komante, teks}) {
             </>
           )}
         </Dialog>
-    </>
+      </Root>
+    )
   )
 }
 

components/navigasyon.js

@@ -2,7 +2,7 @@ import {useState} from 'react'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import AppBar from '@material-ui/core/AppBar'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
@@ -13,6 +13,25 @@ import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
 import Typography from '@material-ui/core/Typography'
 import Box from '@material-ui/core/Box'
 
+const PREFIX = 'navigasyon'
+
+const classes = {
+  root: `${PREFIX}-root`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
+    marginBottom: 50,
+    flexGrow: 1,
+    width: '100%',
+    backgroundColor: theme.palette.background.paper
+  }
+}))
+
 const tabRouteHref = [
   '/',
   '/teks',
@@ -31,7 +50,7 @@ function TabPanel(props) {
   const {children, value, index, ...other} = props
 
   return (
-    <div
+    <Root
       role='tabpanel'
       hidden={value !== index}
       id={`scrollable-force-tabpanel-${index}`}
@@ -43,7 +62,7 @@ function TabPanel(props) {
           <Typography component='div'>{children}</Typography>
         </Box>
       )}
-    </div>
+    </Root>
   )
 }
 
@@ -60,18 +79,9 @@ function a11yProps(index) {
   }
 }
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    marginBottom: 50,
-    flexGrow: 1,
-    width: '100%',
-    backgroundColor: theme.palette.background.paper
-  }
-}))
-
 export default function Navigasyon({selectedTab}) {
   const router = useRouter()
-  const classes = useStyles()
+
   const [value, setValue] = useState(0)
 
   const handleChange = (event, newValue) => {

components/rezo-menu.js

@@ -1,14 +1,38 @@
 import {useRef, useState} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
-import {Button, ListItemIcon, ListItemText, Menu, MenuItem, withStyles} from '@material-ui/core'
+import {Button, ListItemIcon, ListItemText, Menu, MenuItem} from '@material-ui/core'
 import PublicIcon from '@material-ui/icons/Public'
 
-const StyledMenu = withStyles({
+const PREFIX = 'rezo-menu'
-  paper: {
+
-    border: '1px solid #d3d4d5'
+const classes = {
+  paper: `${PREFIX}-paper`,
+  root: `${PREFIX}-root`
 }
-})(props => (
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.paper}`]: {
+    border: '1px solid #d3d4d5'
+  },
+
+  [`& .${classes.root}`]: {
+    '&:hover': {
+      backgroundColor: theme.palette.primary.main,
+      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+        color: theme.palette.common.white
+      }
+    }
+  }
+}))
+
+function StyledMenu(props) {
+  return (
     <Menu
       elevation={0}
       getContentAnchorEl={null}
@@ -22,18 +46,10 @@ const StyledMenu = withStyles({
       }}
       {...props}
     />
-))
+  )
+}
 
-const StyledMenuItem = withStyles(theme => ({
+const StyledMenuItem = MenuItem
-  root: {
-    '&:hover': {
-      backgroundColor: theme.palette.primary.main,
-      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
-        color: theme.palette.common.white
-      }
-    }
-  }
-}))(MenuItem)
 
 const siteDomain = process.env.NEXT_PUBLIC_PROD_DOMAIN || 'localhost'
 
@@ -57,7 +73,8 @@ export default function RezoMenu({data}) {
   }
 
   return (
-    <>
+    (
+      <Root>
         <Button
           ref={anchorRef}
           startIcon={<PublicIcon />}
@@ -75,10 +92,19 @@ export default function RezoMenu({data}) {
           id='customized-menu'
           anchorEl={anchorElement}
           open={Boolean(anchorElement)}
+          classes={{
+            paper: classes.paper
+          }}
           onClose={handleClose}
         >
           {data.map(({id, tit, icon, link}) => (
-          <StyledMenuItem key={id} onClick={() => handleClose(id, link)}>
+            <StyledMenuItem
+              key={id}
+              classes={{
+                root: classes.root
+              }}
+              onClick={() => handleClose(id, link)}
+            >
               <ListItemIcon>
                 {icon}
               </ListItemIcon>
@@ -86,7 +112,8 @@ export default function RezoMenu({data}) {
             </StyledMenuItem>
           ))}
         </StyledMenu>
-    </>
+      </Root>
+    )
   )
 }
 

components/sesyon/dekoneksyon.js

@@ -1,30 +1,33 @@
 import {useState} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
 import {signOut} from 'next-auth/client'
-import {withStyles, makeStyles, Tooltip, Fab, Zoom} from '@material-ui/core'
+import {Tooltip, Fab, Zoom} from '@material-ui/core'
 import ExitToAppIcon from '@material-ui/icons/ExitToApp'
 
 import Alet from '../alet'
 
-const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+const PREFIX = 'Dekoneksyon'
 
-const useStyles = makeStyles(() => ({
+const classes = {
-  dekoneksyon: {
+  tooltip: `${PREFIX}-tooltip`,
+  dekoneksyon: `${PREFIX}-dekoneksyon`
+}
+
+const Root = styled('div')(() => ({
+  [`& .${classes.dekoneksyon}`]: {
     position: props => props.position,
     top: props => props.top,
     left: props => props.left
   }
 }))
 
-const DekoneksonTooltip = withStyles(() => ({
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
-  tooltip: {
-    fontSize: 18
-  }
-}))(Tooltip)
 
-function Dekoneksyon({chimen, tooltipPlacement, ...props}) {
+const DekoneksonTooltip = Tooltip
-  const classes = useStyles(props)
+
+function Dekoneksyon({chimen, tooltipPlacement}) {
   const [esOuve, meteEsOuve] = useState(false)
 
   const handleDekonekte = event => {
@@ -33,9 +36,17 @@ function Dekoneksyon({chimen, tooltipPlacement, ...props}) {
   }
 
   return (
-    <>
+    (
+      <Root>
         <Link passHref href='/api/auth/signout'>
-        <DekoneksonTooltip title='Dékoneksyon' placement={tooltipPlacement} TransitionComponent={Zoom}>
+          <DekoneksonTooltip
+            title='Dékoneksyon'
+            placement={tooltipPlacement}
+            TransitionComponent={Zoom}
+            classes={{
+              tooltip: classes.tooltip
+            }}
+          >
             <Fab
               className={classes.dekoneksyon}
               color='secondary'
@@ -48,7 +59,8 @@ function Dekoneksyon({chimen, tooltipPlacement, ...props}) {
           </DekoneksonTooltip>
         </Link>
         <Alet esOuve={esOuve} meteEsOuve={meteEsOuve} handleKonfime={handleDekonekte} />
-    </>
+      </Root>
+    )
   )
 }
 

components/soumet/ajoute-tradiksyon.js

@@ -1,13 +1,37 @@
 import {useState} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {MenuItem, withStyles, Menu, Button} from '@material-ui/core'
+import {MenuItem, Menu, Button} from '@material-ui/core'
 import {uniq} from 'lodash'
 
-const StyledMenu = withStyles({
+const PREFIX = 'AjouteTradiksyon'
-  paper: {
+
-    border: '1px solid #d3d4d5'
+const classes = {
+  paper: `${PREFIX}-paper`,
+  root: `${PREFIX}-root`
 }
-})(props => (
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.paper}`]: {
+    border: '1px solid #d3d4d5'
+  },
+
+  [`& .${classes.root}`]: {
+    '&:focus': {
+      backgroundColor: theme.palette.primary.main,
+      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+        color: theme.palette.common.white
+      }
+    }
+  }
+}))
+
+function StyledMenu(props) {
+  return (
     <Menu
       elevation={0}
       getContentAnchorEl={null}
@@ -21,18 +45,10 @@ const StyledMenu = withStyles({
       }}
       {...props}
     />
-))
+  )
+}
 
-const StyledMenuItem = withStyles(theme => ({
+const StyledMenuItem = MenuItem
-  root: {
-    '&:focus': {
-      backgroundColor: theme.palette.primary.main,
-      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
-        color: theme.palette.common.white
-      }
-    }
-  }
-}))(MenuItem)
 
 function AjouteTradiksyon({chwaLang, setChwaLang}) {
   const [anchorElement, setAnchorElement] = useState(null)
@@ -48,7 +64,7 @@ function AjouteTradiksyon({chwaLang, setChwaLang}) {
   }
 
   return (
-    <div style={{textAlign: 'center', marginTop: 5}}>
+    <Root style={{textAlign: 'center', marginTop: 5}}>
       <Button
         aria-controls='lang-menu'
         variant='outlined'
@@ -62,13 +78,34 @@ function AjouteTradiksyon({chwaLang, setChwaLang}) {
         id='lang-menu'
         anchorEl={anchorElement}
         open={Boolean(anchorElement)}
+        classes={{
+          paper: classes.paper
+        }}
         onClose={handleClose}
       >
-        <StyledMenuItem id='fr' onClick={handleClose}>🇫🇷 Français</StyledMenuItem>
+        <StyledMenuItem
-        <StyledMenuItem id='en' onClick={handleClose}>🇬🇧 English</StyledMenuItem>
+          id='fr'
-        <StyledMenuItem id='es' onClick={handleClose}>🇪🇸 Español</StyledMenuItem>
+          classes={{
+            root: classes.root
+          }}
+          onClick={handleClose}
+        >🇫🇷 Français</StyledMenuItem>
+        <StyledMenuItem
+          id='en'
+          classes={{
+            root: classes.root
+          }}
+          onClick={handleClose}
+        >🇬🇧 English</StyledMenuItem>
+        <StyledMenuItem
+          id='es'
+          classes={{
+            root: classes.root
+          }}
+          onClick={handleClose}
+        >🇪🇸 Español</StyledMenuItem>
       </StyledMenu>
-    </div>
+    </Root>
   )
 }
 

components/soumet/ekri-teks.js

@@ -1,4 +1,5 @@
 import {useCallback, useEffect, useState} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import axios from 'axios'
 import {
@@ -16,14 +17,25 @@ import {
   Snackbar,
   TextField,
   Tooltip,
-  Typography,
+  Typography
-  withStyles
 } from '@material-ui/core'
 import MuiAlert from '@material-ui/lab/Alert'
 import CloseIcon from '@material-ui/icons/Close'
 
 import AjouteTradiksyon from './ajoute-tradiksyon'
 
+const PREFIX = 'EkriTeks'
+
+const classes = {
+  tooltip: `${PREFIX}-tooltip`
+}
+
+const StyledContainer = styled(Container)(() => ({
+  [`& .${classes.tooltip}`]: {
+    fontSize: 18
+  }
+}))
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
 
 const textLabels = {
@@ -48,11 +60,7 @@ function Alert(props) {
   return <MuiAlert elevation={6} variant='filled' {...props} />
 }
 
-const RemoveTooltip = withStyles(() => ({
+const RemoveTooltip = Tooltip
-  tooltip: {
-    fontSize: 18
-  }
-}))(Tooltip)
 
 function EkriTeks({session}) {
   const {jwt, user} = session
@@ -160,7 +168,7 @@ function EkriTeks({session}) {
   }, [error])
 
   return (
-    <Container maxWidth='sm'>
+    <StyledContainer maxWidth='sm'>
       <Box align='center' marginBottom={2}>
         <Typography display='inline' variant='h5' component='h1'>
           Soumèt an tèks
@@ -224,7 +232,13 @@ function EkriTeks({session}) {
               rows={8}
               endAdornment={
                 <InputAdornment position='end'>
-                  <RemoveTooltip title='Effacer la traduction' placement='left'>
+                  <RemoveTooltip
+                    title='Effacer la traduction'
+                    placement='left'
+                    classes={{
+                      tooltip: classes.tooltip
+                    }}
+                  >
                     <IconButton
                       color='secondary'
                       style={{bottom: 75}}
@@ -273,7 +287,7 @@ function EkriTeks({session}) {
           </Alert>
         </Snackbar>
       )}
-    </Container>
+    </StyledContainer>
   )
 }
 

components/switch-theme.js

@@ -1,17 +1,25 @@
 import PropTypes from 'prop-types'
+import {styled} from '@mui/material/styles'
 import WbSunnyIcon from '@material-ui/icons/WbSunny'
 import Brightness3Icon from '@material-ui/icons/Brightness3'
-import {Box, makeStyles} from '@material-ui/core'
+import {Box} from '@material-ui/core'
 
-const useStyles = makeStyles({
+const PREFIX = 'switch-theme'
-  switch: {
+
+const classes = {
+  switch: `${PREFIX}-switch`,
+  switchFixed: `${PREFIX}-switchFixed`
+}
+
+const StyledBox = styled(Box)({
+  [`& .${classes.switch}`]: {
     position: 'absolute',
     right: '1em',
-    top: '95px',
+    top: '200px',
     zIndex: 1,
     cursor: 'pointer'
   },
-  switchFixed: {
+  [`& .${classes.switchFixed}`]: {
     position: 'fixed',
     right: '1em',
     top: '95px',
@@ -21,20 +29,19 @@ const useStyles = makeStyles({
 })
 
 export default function SwitchTheme({switchFixed, darkMode, setDarkMode}) {
-  const classes = useStyles()
   const handleClick = () => {
     localStorage.setItem('oki-dark', !darkMode)
     setDarkMode(!darkMode)
   }
 
   return (
-    <Box className={switchFixed ? classes.switchFixed : classes.switch}>
+    <StyledBox className={switchFixed ? classes.switchFixed : classes.switch}>
       {darkMode ? (
         <WbSunnyIcon onClick={handleClick} />
       ) : (
         <Brightness3Icon onClick={handleClick} />
       )}
-    </Box>
+    </StyledBox>
   )
 }
 

components/teks/denye-teks.js

@@ -1,15 +1,22 @@
-import {Container, Grid, makeStyles} from '@material-ui/core'
+import {Container, Grid} from '@material-ui/core'
+
+import {styled} from '@mui/material/styles'
 
 import TeksKat from './teks-kat'
 
-const useStyles = makeStyles(() => ({
+const PREFIX = 'denye-teks'
-  container: {
+
+const classes = {
+  container: `${PREFIX}-container`
+}
+
+const Root = styled('div')(() => ({
+  [`&.${classes.container}`]: {
     marginTop: '3em'
   }
 }))
 
 export default function DenyeTeks(teks) {
-  const classes = useStyles()
   const teksKlasePaPibilikasyon = Object.values(teks).sort((a, b) => {
     const aDate = new Date(a.published_at)
     const bDate = new Date(b.published_at)
@@ -17,12 +24,12 @@ export default function DenyeTeks(teks) {
   }).slice(0, 6)
 
   return (
-    <div className={classes.container}>
+    <Root className={classes.container}>
       <Container>
         <Grid container spacing={3}>
           {teksKlasePaPibilikasyon.map(t => <TeksKat key={t._id} teks={t} />)}
         </Grid>
       </Container>
-    </div>
+    </Root>
   )
 }

components/teks/drawer-bar.js

@@ -1,4 +1,5 @@
 import {useState} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import union from 'lodash.union'
 import deburr from 'lodash.deburr'
@@ -7,23 +8,38 @@ import {
   Divider,
   FormControl,
   InputAdornment,
-  InputBase,
+  InputBase
-  makeStyles
 } from '@material-ui/core'
 
 import SearchIcon from '@material-ui/icons/Search'
 
 import MizikLis from '../awtis/mizik-lis'
 
-const useStyles = makeStyles(theme => ({
+const PREFIX = 'drawer-bar'
-  toolbar: theme.mixins.toolbar,
+
-  list: {
+const classes = {
+  toolbar: `${PREFIX}-toolbar`,
+  list: `${PREFIX}-list`,
+  form: `${PREFIX}-form`,
+  text: `${PREFIX}-text`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.toolbar}`]: theme.mixins.toolbar,
+
+  [`& .${classes.list}`]: {
     marginBottom: '6em'
   },
-  form: {
+
+  [`& .${classes.form}`]: {
     marginLeft: theme.spacing(1)
   },
-  text: {
+
+  [`& .${classes.text}`]: {
     marginBottom: '0.5em'
   }
 }))
@@ -46,7 +62,6 @@ const getMizikFiltered = (teks, filter) => {
 
 export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
   const slug = anTeks ? anTeks.slug : null
-  const classes = useStyles()
 
   const [search, setSearch] = useState('')
   const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
@@ -60,7 +75,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
   }
 
   return (
-    <div className='search'>
+    <Root className='search'>
       <FormControl className={classes.form}>
         <InputBase
           className={classes.toolbar}
@@ -84,7 +99,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
           meteSlugTeksChwazi={meteSlugTeksChwazi}
         />
       </div>
-    </div>
+    </Root>
   )
 }
 

components/teks/pataje.js

@@ -1,7 +1,7 @@
 import {useState} from 'react'
 import PropTypes from 'prop-types'
 
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import SpeedDial from '@material-ui/lab/SpeedDial'
 import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'
 import SpeedDialAction from '@material-ui/lab/SpeedDialAction'
@@ -10,24 +10,29 @@ import ShareIcon from '@material-ui/icons/Share'
 import TwitterIcon from '@material-ui/icons/Twitter'
 import {Backdrop} from '@material-ui/core'
 
-const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL
+const PREFIX = 'pataje'
-const TWITTER_HASHTAGS = process.env.NEXT_PUBLIC_TWITTER_HASHTAGS || 'OKi'
-const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'
 
-const useStyles = makeStyles(() => ({
+const classes = {
-  root: {
+  root: `${PREFIX}-root`
+}
+
+const Root = styled('div')(() => ({
+  [`&.${classes.root}`]: {
     height: 0,
     transform: 'translateZ(0px)'
   }
 }))
 
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL
+const TWITTER_HASHTAGS = process.env.NEXT_PUBLIC_TWITTER_HASHTAGS || 'OKi'
+const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'
+
 const actions = [
   {icon: <TwitterIcon />, name: 'Twitter', code: 'twitter'},
   {icon: <FileCopyIcon />, name: 'Copier le lien', code: 'copy'}
 ]
 
 export default function Pataje({teks, setError, setSuccess}) {
-  const classes = useStyles()
   const {tit, awtis, slug} = teks
   const [open, setOpen] = useState(false)
 
@@ -62,7 +67,7 @@ export default function Pataje({teks, setError, setSuccess}) {
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Backdrop open={open} />
       <SpeedDial
         FabProps={{size: 'small', margin: 'auto', color: 'default'}}
@@ -83,7 +88,7 @@ export default function Pataje({teks, setError, setSuccess}) {
           />
         ))}
       </SpeedDial>
-    </div>
+    </Root>
   )
 }
 

components/teks/teks-drawer.js

@@ -17,8 +17,7 @@ import {
   useMediaQuery,
   Snackbar,
   Tooltip,
-  Zoom,
+  Zoom
-  withStyles
 } from '@material-ui/core'
 
 import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
@@ -26,7 +25,7 @@ import ExplicitIcon from '@material-ui/icons/Explicit'
 
 import MenuIcon from '@material-ui/icons/Menu'
 
-import {makeStyles, useTheme} from '@material-ui/core/styles'
+import {useTheme, styled} from '@material-ui/core/styles'
 
 import MuiAlert from '@material-ui/lab/Alert'
 import {formatJsonString} from '../../lib/utils/format'
@@ -41,24 +40,45 @@ import OkiMizik from './oki-mizik'
 import Pataje from './pataje'
 import EntegreMizik from './entegre-mizik'
 
-function Alert(props) {
+const PREFIX = 'teks-drawer'
-  return <MuiAlert elevation={6} variant='filled' {...props} />
+
+const classes = {
+  tooltip: `${PREFIX}-tooltip`,
+  root: `${PREFIX}-root`,
+  drawer: `${PREFIX}-drawer`,
+  appBar: `${PREFIX}-appBar`,
+  menuButton: `${PREFIX}-menuButton`,
+  toolbar: `${PREFIX}-toolbar`,
+  drawerPaper: `${PREFIX}-drawerPaper`,
+  content: `${PREFIX}-content`,
+  list: `${PREFIX}-list`,
+  form: `${PREFIX}-form`,
+  text: `${PREFIX}-text`,
+  gridText: `${PREFIX}-gridText`,
+  grid: `${PREFIX}-grid`,
+  koute: `${PREFIX}-koute`,
+  vwe: `${PREFIX}-vwe`,
+  pataje: `${PREFIX}-pataje`
 }
 
-const drawerWidth = 240
+const Root = styled('div')((
-
+  {
-const useStyles = makeStyles(theme => ({
+    theme
-  root: {
+  }
+) => ({
+  [`&.${classes.root}`]: {
     display: 'flex'
   },
-  drawer: {
+
+  [`& .${classes.drawer}`]: {
     marginTop: '10em',
     [theme.breakpoints.up('sm')]: {
       width: drawerWidth,
       flexShrink: 0
     }
   },
-  appBar: {
+
+  [`& .${classes.appBar}`]: {
     borderTop: '2px solid #303030',
     marginTop: '4.71rem',
     [theme.breakpoints.up('sm')]: {
@@ -67,40 +87,50 @@ const useStyles = makeStyles(theme => ({
     },
     zIndex: 1
   },
-  menuButton: {
+
+  [`& .${classes.menuButton}`]: {
     [theme.breakpoints.up('sm')]: {
       display: 'none'
     }
   },
-  toolbar: theme.mixins.toolbar,
+
-  drawerPaper: {
+  [`& .${classes.toolbar}`]: theme.mixins.toolbar,
+
+  [`& .${classes.drawerPaper}`]: {
     borderTop: '2px solid #303030',
     marginTop: '4.71rem',
     width: drawerWidth
   },
-  content: {
+
+  [`& .${classes.content}`]: {
     flexGrow: 1,
     padding: theme.spacing(3)
   },
-  list: {
+
+  [`& .${classes.list}`]: {
     marginBottom: '6em'
   },
-  form: {
+
+  [`& .${classes.form}`]: {
     marginLeft: theme.spacing(1)
   },
-  text: {
+
+  [`& .${classes.text}`]: {
     marginBottom: '0.5em'
   },
-  gridText: {
+
+  [`& .${classes.gridText}`]: {
     border: '2px solid grey',
     borderRadius: '5px',
     marginTop: '2em',
     padding: '1em'
   },
-  grid: {
+
+  [`& .${classes.grid}`]: {
     marginTop: '1em'
   },
-  koute: {
+
+  [`& .${classes.koute}`]: {
     position: 'absolute',
     right: '40px',
     top: '8px',
@@ -108,7 +138,8 @@ const useStyles = makeStyles(theme => ({
       top: '10px'
     }
   },
-  vwe: {
+
+  [`& .${classes.vwe}`]: {
     position: 'absolute',
     right: '90px',
     top: '8px',
@@ -116,7 +147,8 @@ const useStyles = makeStyles(theme => ({
       top: '10px'
     }
   },
-  pataje: {
+
+  [`& .${classes.pataje}`]: {
     position: 'fixed',
     top: '85px',
     left: '110px',
@@ -128,6 +160,12 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
+function Alert(props) {
+  return <MuiAlert elevation={6} variant='filled' {...props} />
+}
+
+const drawerWidth = 240
+
 const langToArray = anTeks => {
   const langArray = []
 
@@ -168,13 +206,7 @@ const alignTeks = (langArray, isMobile) => {
   }
 }
 
-const ExplicitTooltip = withStyles(() => ({
+const ExplicitTooltip = Tooltip
-  tooltip: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    backgroundColor: 'rgba(245, 0, 87, 0.8)'
-  }
-}))(Tooltip)
 
 export default function TeksDrawer({teks, anTeks, komante}) {
   const [session] = useSession()
@@ -182,7 +214,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
 
   const isMobile = useMediaQuery('(max-width:800px)')
   const langArray = langToArray(anTeks)
-  const classes = useStyles()
+
   const theme = useTheme()
   const [esMobilOuve, meteEsMobilOuve] = useState(false)
   const [open, setOpen] = useState(false)
@@ -212,7 +244,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
   }, [error, success, setOpen])
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <CssBaseline />
       <AppBar position='fixed' className={classes.appBar}>
         <Toolbar>
@@ -294,7 +326,14 @@ export default function TeksDrawer({teks, anTeks, komante}) {
                 <Typography variant='h5'>
                   {anTeks.tit}
                   {anTeks.eksplisit && (
-                    <ExplicitTooltip title='Explicit Lyrics' placement='bottom' TransitionComponent={Zoom}>
+                    <ExplicitTooltip
+                      title='Explicit Lyrics'
+                      placement='bottom'
+                      TransitionComponent={Zoom}
+                      classes={{
+                        tooltip: classes.tooltip
+                      }}
+                    >
                       <ExplicitIcon style={{marginLeft: 10}} color='secondary' />
                     </ExplicitTooltip>
                   )}
@@ -375,7 +414,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
           <DenyeTeks {...teks} />
         )}
       </main>
-    </div>
+    </Root>
   )
 }
 

components/teks/teks-kat.js

@@ -11,20 +11,26 @@ import {
   Grid
 } from '@material-ui/core'
 import ExplicitIcon from '@material-ui/icons/Explicit'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 
-const useStyles = makeStyles({
+const PREFIX = 'teks-kat'
-  root: {
+
+const classes = {
+  root: `${PREFIX}-root`,
+  media: `${PREFIX}-media`
+}
+
+const StyledGrid = styled(Grid)({
+  [`& .${classes.root}`]: {
     maxWidth: 345
   },
-  media: {
+  [`& .${classes.media}`]: {
     height: 240,
     objectFit: 'contain'
   }
 })
 
 export default function TeksKat({teks}) {
-  const classes = useStyles()
   const router = useRouter()
   const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
   const {tit, awtis, lanne, kouveti, published_at, slug} = teks
@@ -35,7 +41,7 @@ export default function TeksKat({teks}) {
   }
 
   return (
-    <Grid item sm={12} md={6} lg={4}>
+    <StyledGrid item sm={12} md={6} lg={4}>
       <Card className={classes.root}>
         <CardActionArea onClick={() => handleClick(slug)}>
           <CardMedia
@@ -71,7 +77,7 @@ export default function TeksKat({teks}) {
           </CardContent>
         </CardActionArea>
       </Card>
-    </Grid>
+    </StyledGrid>
   )
 }
 

components/teks/vwe-koute-achte.js

@@ -17,11 +17,17 @@ import VideocamIcon from '@material-ui/icons/Videocam'
 import MusicNoteIcon from '@material-ui/icons/MusicNote'
 import AlbumIcon from '@material-ui/icons/Album'
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@material-ui/lab'
 
-const useStyles = makeStyles(() => ({
+const PREFIX = 'vwe-koute-achte'
-  root: {
+
+const classes = {
+  root: `${PREFIX}-root`
+}
+
+const Root = styled('div')(() => ({
+  [`&.${classes.root}`]: {
     height: 0,
     transform: 'translateZ(0px)'
   }
@@ -47,7 +53,6 @@ const vweyIcons = {
 }
 
 export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
-  const classes = useStyles()
   const [ouve, meteOuve] = useState(false)
   const {kouteyAchtey, lyen} = anTeks
 
@@ -76,7 +81,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <SpeedDial
         color='secondary'
         FabProps={{size: 'small', margin: 'auto', color: 'default'}}
@@ -105,7 +110,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
           />
         ))}
       </SpeedDial>
-    </div>
+    </Root>
   )
 }