From 1afa1e5ba8804ba5c5a0a939e9a3eb90b0bb0b8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Wed, 19 Jan 2022 06:35:04 +0400 Subject: [PATCH] Use codemod jss-to-styled --- components/awtis/awtis-kat.js | 130 ++++++++++++--------- components/awtis/mizik-badj-meni.js | 25 ++-- components/awtis/mizik-lis.js | 21 +++- components/awtis/pajinasyon.js | 22 +++- components/cgu/cgu-dialog.js | 20 ++-- components/cgu/index.js | 19 +-- components/footer.js | 48 +++++--- components/kat-kay-la.js | 26 +++-- components/komante/komante-list.js | 26 +++-- components/komante/vwe-komante.js | 154 ++++++++++++++----------- components/navigasyon.js | 36 +++--- components/rezo-menu.js | 133 ++++++++++++--------- components/sesyon/dekoneksyon.js | 64 +++++----- components/soumet/ajoute-tradiksyon.js | 93 ++++++++++----- components/soumet/ekri-teks.js | 34 ++++-- components/switch-theme.js | 23 ++-- components/teks/denye-teks.js | 19 ++- components/teks/drawer-bar.js | 35 ++++-- components/teks/pataje.js | 23 ++-- components/teks/teks-drawer.js | 107 +++++++++++------ components/teks/teks-kat.js | 20 ++-- components/teks/vwe-koute-achte.js | 17 ++- 22 files changed, 693 insertions(+), 402 deletions(-) diff --git a/components/awtis/awtis-kat.js b/components/awtis/awtis-kat.js index ad16ed8..a7c2e8a 100644 --- a/components/awtis/awtis-kat.js +++ b/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 => ({ - root: { +const PREFIX = 'awtis-kat' + +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,56 +73,58 @@ export default function AwtisKat({anAwtis}) { } return ( - <> - - - - 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`} - title={alias} - /> - - - {alias} - - - {anAwtis.teks.length} tèks - - - + ( + + + + + 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`} + title={alias} + /> + + + {alias} + + + {anAwtis.teks.length} tèks + + + - - - - - - - - - - - - - {esByografiOuve && ( - - )} - + + + + + + + + + + + + + {esByografiOuve && ( + + )} + + ) ) } diff --git a/components/awtis/mizik-badj-meni.js b/components/awtis/mizik-badj-meni.js index fcd8efa..ea0214a 100644 --- a/components/awtis/mizik-badj-meni.js +++ b/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 => ({ - root: { +const PREFIX = 'mizik-badj-meni' + +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 ( -
+
+ ) } diff --git a/components/awtis/mizik-lis.js b/components/awtis/mizik-lis.js index a44ee89..4409089 100644 --- a/components/awtis/mizik-lis.js +++ b/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 => ({ - root: { +const PREFIX = 'mizik-lis' + +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 ( - + {teks.map(({slug, tit, awtis, published_at, okiMizikID, eksplisit}) => ( ))} - + ) } diff --git a/components/awtis/pajinasyon.js b/components/awtis/pajinasyon.js index ddd6a44..d031284 100644 --- a/components/awtis/pajinasyon.js +++ b/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 => ({ - root: { +const PREFIX = 'pajinasyon' + +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 ( - +
- + ) } diff --git a/components/cgu/cgu-dialog.js b/components/cgu/cgu-dialog.js index 9ac87b9..c08bb34 100644 --- a/components/cgu/cgu-dialog.js +++ b/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(() => ({ - dialog: { +const classes = { + 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 ( -
+ -
+ ) } diff --git a/components/cgu/index.js b/components/cgu/index.js index 8cb6971..ed75789 100644 --- a/components/cgu/index.js +++ b/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({ - root: { +const PREFIX = 'index' + +const classes = { + root: `${PREFIX}-root` +} + +const Root = styled('div')({ + [`&.${classes.root}`]: { textAlign: 'justify' } }) export default function Cgu() { - const classes = useStyles() - return ( -
+ Définitions @@ -436,6 +441,6 @@ export default function Cgu() { Dernières modifications le 15/06/2021 -
+ ) } diff --git a/components/footer.js b/components/footer.js index 6ea1716..30a5739 100644 --- a/components/footer.js +++ b/components/footer.js @@ -1,35 +1,49 @@ 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 => ({ - footer: { +const PREFIX = '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 ( - <> - -
- - - setOpen(true)}> - Voir les CGU et la politique de confidentialité - - - -
- + ( + + +
+ + + setOpen(true)}> + Voir les CGU et la politique de confidentialité + + + +
+ + ) ) } diff --git a/components/kat-kay-la.js b/components/kat-kay-la.js index 71e742e..f5dc040 100644 --- a/components/kat-kay-la.js +++ b/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({ - root: { +const PREFIX = 'kat-kay-la' + +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 ( - + router.push(route).then(() => window.scrollTo(0, 0))}> @@ -47,7 +55,7 @@ export default function KatKayLa({tit, soutit, kantite, route}) { - + ) } diff --git a/components/komante/komante-list.js b/components/komante/komante-list.js index 1247eac..cfb0b42 100644 --- a/components/komante/komante-list.js +++ b/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 => ({ - root: { +const PREFIX = 'komante-list' + +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 ( - + {komante.map(({_id, username, kontni, sentAt}) => (
))} - + ) } diff --git a/components/komante/vwe-komante.js b/components/komante/vwe-komante.js index 40dc25f..f8d4025 100644 --- a/components/komante/vwe-komante.js +++ b/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, - withStyles, - makeStyles + Zoom } 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 => ({ - margin: { +const PREFIX = 'vwe-komante' + +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(() => ({ - tooltip: { - fontSize: 18 - } -}))(Tooltip) +const KomanteTooltip = 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,66 +70,75 @@ export default function VweKomante({komante, teks}) { }, [esOuve]) return ( - <> - - - - - - - Kòmantè - - - {komante.length > 0 ? ( - - ) : ( - - Aucun - + ( + + + + + + + + Kòmantè + + + {komante.length > 0 ? ( + + ) : ( + + Aucun + + )} + + + + {session && session.user && !esKomenteOuve && ( + )} - - - - {session && session.user && !esKomenteOuve && ( - - )} - {!session && !esKoneksyonOuve && ( - - )} + {!session && !esKoneksyonOuve && ( + + )} + {!session && esKoneksyonOuve && ( + + )} + {!session && esKoneksyonOuve && ( - - )} - - {!session && esKoneksyonOuve && ( - - )} - {session && session.user && esKomenteOuve && ( - <> - - - - )} - - + )} + {session && session.user && esKomenteOuve && ( + <> + + + + )} + + + ) ) } diff --git a/components/navigasyon.js b/components/navigasyon.js index 8d260e4..588343c 100644 --- a/components/navigasyon.js +++ b/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 ( - + ) } @@ -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) => { diff --git a/components/rezo-menu.js b/components/rezo-menu.js index bbdeee6..606b1f2 100644 --- a/components/rezo-menu.js +++ b/components/rezo-menu.js @@ -1,31 +1,27 @@ 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({ - paper: { - border: '1px solid #d3d4d5' - } -})(props => ( - -)) +const PREFIX = 'rezo-menu' -const StyledMenuItem = withStyles(theme => ({ - root: { +const classes = { + paper: `${PREFIX}-paper`, + root: `${PREFIX}-root` +} + +const Root = styled('div')(( + { + theme + } +) => ({ + [`& .${classes.paper}`]: { + border: '1px solid #d3d4d5' + }, + + [`& .${classes.root}`]: { '&:hover': { backgroundColor: theme.palette.primary.main, '& .MuiListItemIcon-root, & .MuiListItemText-primary': { @@ -33,7 +29,27 @@ const StyledMenuItem = withStyles(theme => ({ } } } -}))(MenuItem) +})) + +function StyledMenu(props) { + return ( + + ) +} + +const StyledMenuItem = MenuItem const siteDomain = process.env.NEXT_PUBLIC_PROD_DOMAIN || 'localhost' @@ -57,36 +73,47 @@ export default function RezoMenu({data}) { } return ( - <> - - - {data.map(({id, tit, icon, link}) => ( - handleClose(id, link)}> - - {icon} - - - - ))} - - + ( + + + + {data.map(({id, tit, icon, link}) => ( + handleClose(id, link)} + > + + {icon} + + + + ))} + + + ) ) } diff --git a/components/sesyon/dekoneksyon.js b/components/sesyon/dekoneksyon.js index 4828a64..2a8430a 100644 --- a/components/sesyon/dekoneksyon.js +++ b/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(() => ({ - dekoneksyon: { +const classes = { + 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(() => ({ - tooltip: { - fontSize: 18 - } -}))(Tooltip) +const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000' -function Dekoneksyon({chimen, tooltipPlacement, ...props}) { - const classes = useStyles(props) +const DekoneksonTooltip = Tooltip + +function Dekoneksyon({chimen, tooltipPlacement}) { const [esOuve, meteEsOuve] = useState(false) const handleDekonekte = event => { @@ -33,22 +36,31 @@ function Dekoneksyon({chimen, tooltipPlacement, ...props}) { } return ( - <> - - - meteEsOuve(true)} + ( + + + - - - - - - + meteEsOuve(true)} + > + + + + + + + ) ) } diff --git a/components/soumet/ajoute-tradiksyon.js b/components/soumet/ajoute-tradiksyon.js index d03ba44..0c5e7a2 100644 --- a/components/soumet/ajoute-tradiksyon.js +++ b/components/soumet/ajoute-tradiksyon.js @@ -1,30 +1,26 @@ 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({ - paper: { - border: '1px solid #d3d4d5' - } -})(props => ( - -)) +const PREFIX = 'AjouteTradiksyon' -const StyledMenuItem = withStyles(theme => ({ - root: { +const classes = { + paper: `${PREFIX}-paper`, + root: `${PREFIX}-root` +} + +const Root = styled('div')(( + { + theme + } +) => ({ + [`& .${classes.paper}`]: { + border: '1px solid #d3d4d5' + }, + + [`& .${classes.root}`]: { '&:focus': { backgroundColor: theme.palette.primary.main, '& .MuiListItemIcon-root, & .MuiListItemText-primary': { @@ -32,7 +28,27 @@ const StyledMenuItem = withStyles(theme => ({ } } } -}))(MenuItem) +})) + +function StyledMenu(props) { + return ( + + ) +} + +const StyledMenuItem = MenuItem function AjouteTradiksyon({chwaLang, setChwaLang}) { const [anchorElement, setAnchorElement] = useState(null) @@ -48,7 +64,7 @@ function AjouteTradiksyon({chwaLang, setChwaLang}) { } return ( -
+
+ ) } diff --git a/components/soumet/ekri-teks.js b/components/soumet/ekri-teks.js index 80547e9..91892ad 100644 --- a/components/soumet/ekri-teks.js +++ b/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, - withStyles + Typography } 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 } -const RemoveTooltip = withStyles(() => ({ - tooltip: { - fontSize: 18 - } -}))(Tooltip) +const RemoveTooltip = Tooltip function EkriTeks({session}) { const {jwt, user} = session @@ -160,7 +168,7 @@ function EkriTeks({session}) { }, [error]) return ( - + Soumèt an tèks @@ -224,7 +232,13 @@ function EkriTeks({session}) { rows={8} endAdornment={ - + )} - + ) } diff --git a/components/switch-theme.js b/components/switch-theme.js index beab74f..d00aaef 100644 --- a/components/switch-theme.js +++ b/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({ - switch: { +const PREFIX = 'switch-theme' + +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 ( - + {darkMode ? ( ) : ( )} - + ) } diff --git a/components/teks/denye-teks.js b/components/teks/denye-teks.js index 9bb81fe..89d4ecb 100644 --- a/components/teks/denye-teks.js +++ b/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(() => ({ - container: { +const PREFIX = 'denye-teks' + +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 ( -
+ {teksKlasePaPibilikasyon.map(t => )} -
+ ) } diff --git a/components/teks/drawer-bar.js b/components/teks/drawer-bar.js index 15cbbd7..34265a3 100644 --- a/components/teks/drawer-bar.js +++ b/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, - makeStyles + InputBase } from '@material-ui/core' import SearchIcon from '@material-ui/icons/Search' import MizikLis from '../awtis/mizik-lis' -const useStyles = makeStyles(theme => ({ - toolbar: theme.mixins.toolbar, - list: { +const PREFIX = 'drawer-bar' + +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 ( -
+
- + ) } diff --git a/components/teks/pataje.js b/components/teks/pataje.js index 81abbc9..a7cbf16 100644 --- a/components/teks/pataje.js +++ b/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 TWITTER_HASHTAGS = process.env.NEXT_PUBLIC_TWITTER_HASHTAGS || 'OKi' -const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA' +const PREFIX = 'pataje' -const useStyles = makeStyles(() => ({ - root: { +const classes = { + 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: , name: 'Twitter', code: 'twitter'}, {icon: , 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 ( -
+ ))} -
+ ) } diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js index 208f9ae..ae7be1c 100644 --- a/components/teks/teks-drawer.js +++ b/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 +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 +} + +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 ( -
+ @@ -294,7 +326,14 @@ export default function TeksDrawer({teks, anTeks, komante}) { {anTeks.tit} {anTeks.eksplisit && ( - + )} @@ -375,7 +414,7 @@ export default function TeksDrawer({teks, anTeks, komante}) { )} -
+ ) } diff --git a/components/teks/teks-kat.js b/components/teks/teks-kat.js index 689da17..d9a9e23 100644 --- a/components/teks/teks-kat.js +++ b/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({ - root: { +const PREFIX = 'teks-kat' + +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 ( - + handleClick(slug)}> - + ) } diff --git a/components/teks/vwe-koute-achte.js b/components/teks/vwe-koute-achte.js index fd66f69..5a0f3c1 100644 --- a/components/teks/vwe-koute-achte.js +++ b/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(() => ({ - root: { +const PREFIX = 'vwe-koute-achte' + +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 ( -
+ ))} -
+ ) }