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 (
- <>
-
-
-
+ (
+
+
+
+
+ )
)
}
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 (
- <>
-
-
-
-
-
-
-
+ )}
+ {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 (
- {children}
)}
-
+
)
}
@@ -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 (
- <>
- }
- size='small'
- aria-controls='customized-menu'
- aria-haspopup='true'
- variant='contained'
- color='primary'
- onClick={handleClick}
- >
- Rézo
-
-
-
+ (
+
+ }
+ size='small'
+ aria-controls='customized-menu'
+ aria-haspopup='true'
+ variant='contained'
+ color='primary'
+ onClick={handleClick}
+ >
+ Rézo
+
+
+
+ )
)
}
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}) {
)}
-
+
))}
-
+
)
}