Use codemod jss-to-styled

components/teks/teks-drawer.js

@@ -17,8 +17,7 @@ import {
   useMediaQuery,
   Snackbar,
   Tooltip,
-  Zoom,
-  withStyles
+  Zoom
 } 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) {
-  return <MuiAlert elevation={6} variant='filled' {...props} />
+const PREFIX = 'teks-drawer'
+
+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 useStyles = makeStyles(theme => ({
-  root: {
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`&.${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(() => ({
-  tooltip: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    backgroundColor: 'rgba(245, 0, 87, 0.8)'
-  }
-}))(Tooltip)
+const ExplicitTooltip = 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>
   )
 }