remove deprecated @mui/styles
Change-Id: If52e6c0be904ea13d98ade644111ab3553671626
diff --git a/client/package.json b/client/package.json
index c8e9e55..3bff63d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -10,7 +10,6 @@
"@mui/icons-material": "^5.10.2",
"@mui/lab": "^5.0.0-alpha.96",
"@mui/material": "^5.10.2",
- "@mui/styles": "^5.10.2",
"@reduxjs/toolkit": "^1.8.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 8160459..edf1588 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -1,9 +1,5 @@
import React, { useState } from 'react'
-
-import { makeStyles } from '@mui/styles'
-//import { createTheme, ThemeProvider } from '@mui/material/styles'
-
import { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, Grid, Paper, CardContent, Card, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Toolbar, IconButton, ListItemAvatar, Input, TextField } from '@mui/material'
import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@mui/icons-material'
@@ -15,27 +11,6 @@
import authManager from '../AuthManager'
import { motion } from 'framer-motion'
-const useStyles = makeStyles(theme => ({
- root: {
- minWidth: 275,
- },
- title: {
- fontSize: 14,
- flexGrow: 1
- },
- pos: {
- marginBottom: 12,
- },
- paper: {
- marginTop: 24,
- marginBottom: 24
- },
- textField: {
- //marginLeft: theme.spacing(1),
- //marginRight: theme.spacing(2),
- }
-}))
-
const transition = { duration: 0.3, ease: [0.43, 0.13, 0.23, 0.96] }
const thumbnailVariants = {
@@ -49,7 +24,6 @@
}
export default function AccountPreferences(props) {
- const classes = useStyles()
const account = props.account
const isJamiAccount = account.getType() === Account.TYPE_JAMI
const alias = isJamiAccount ? "Jami account" : "SIP account"
@@ -109,7 +83,7 @@
<motion.div variants={thumbnailVariants}>
<Card>
<CardContent>
- <Typography className={classes.title} color="textSecondary" gutterBottom>
+ <Typography color="textSecondary" gutterBottom>
Current calls
</Typography>
<Typography gutterBottom variant="h5" component="h2">
@@ -156,16 +130,15 @@
</ListItem>
</motion.div>
<motion.div variants={thumbnailVariants}>
- <Paper className={classes.paper}>
+ <Paper>
<Toolbar>
- <Typography className={classes.title} variant="h6">
+ <Typography variant="h6">
Default moderators
</Typography>
</Toolbar>
<List>
<ListItem key="add">
<TextField variant="outlined"
- className={classes.textField}
value={defaultModeratorUri}
onChange={e => setDefaultModeratorUri(e.target.value)}
label="Add new default moderator"
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index 96e03f6..914d697 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -1,20 +1,10 @@
import React, { useEffect, useState } from 'react';
import { Card, CardActionArea, CardContent, CircularProgress, Typography } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
import { useNavigate, useParams } from 'react-router';
import authManager from '../AuthManager'
import Conversation from '../../../model/Conversation';
-const useStyles = makeStyles({
- title: {
- fontSize: 14,
- }, pos: {
- fontSize: 14,
- }
-});
-
export default function ConversationsOverviewCard(props) {
- const classes = useStyles()
const navigate = useNavigate()
const accountId = props.accountId || useParams().accountId
const [state, setState] = useState({ loaded: false })
@@ -34,7 +24,7 @@
<Card onClick={() => navigate(`/account/${accountId}`)} >
<CardActionArea>
<CardContent>
- <Typography className={classes.title} color="textSecondary" gutterBottom>
+ <Typography color="textSecondary" gutterBottom>
Conversations
</Typography>
<Typography gutterBottom variant="h5" component="h2">
diff --git a/client/src/components/JamiIdCard.js b/client/src/components/JamiIdCard.js
index 68c4e6c..32949d6 100644
--- a/client/src/components/JamiIdCard.js
+++ b/client/src/components/JamiIdCard.js
@@ -1,29 +1,19 @@
import React from 'react';
import { Box, Card, CardContent, Typography } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-
-const useStyles = makeStyles({
- title: {
- fontSize: 14,
- }, pos: {
- fontSize: 14,
- }
-});
export default function JamiIdCard(props) {
- const classes = useStyles()
const account = props.account
const registeredName = account.getRegisteredName()
return <Card style={{marginBottom:16}}>
<CardContent>
<Box>
- <Typography className={classes.title} color="textSecondary">
+ <Typography color="textSecondary">
Jami ID
</Typography>
<Typography variant="h5" component="h2" gutterBottom noWrap>{account.getUri()}</Typography>
</Box>
{registeredName && <Box>
- <Typography className={classes.title} color="textSecondary" >
+ <Typography color="textSecondary" >
Jami username
</Typography>
<Typography variant="h5" component="h2" noWrap>{registeredName}</Typography>
diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index 771033b..feb5531 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,7 +1,6 @@
import { QuestionMark } from "@mui/icons-material";
import { Box, IconButton, Popper } from "@mui/material";
-import { blue } from "@mui/material/colors";
-import { styled } from "@mui/styles";
+import { styled } from "@mui/material/styles";
import EmojiPicker from "emoji-picker-react";
import React from "react";
import { Arrow2Icon, ArrowIcon, CameraIcon, CameraInBubbleIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EmojiIcon, EyeIcon, FolderIcon, InfoIcon, MicroInBubbleIcon, PaperClipIcon, PenIcon } from "./svgIcons";
diff --git a/client/src/components/inputs.js b/client/src/components/inputs.js
index 6610d37..52047d3 100644
--- a/client/src/components/inputs.js
+++ b/client/src/components/inputs.js
@@ -1,5 +1,5 @@
import { Stack, TextField } from "@mui/material"
-import { styled } from "@mui/styles"
+import { styled } from "@mui/material/styles"
import React from "react"
import { InfoButton, ToggleVisibilityButton } from "./buttons"
import { CheckedIcon, RoundCrossIcon, LockIcon, PenIcon, PersonIcon } from "./svgIcons"
diff --git a/client/src/pages/accountCreation.jsx b/client/src/pages/accountCreation.jsx
index 2231366..382ab1a 100644
--- a/client/src/pages/accountCreation.jsx
+++ b/client/src/pages/accountCreation.jsx
@@ -1,23 +1,13 @@
import React from 'react';
import { Container, Card, CardContent, Typography, List, Avatar, Divider } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
import { DialerSipRounded, GroupOutlined, RoomRounded } from '@mui/icons-material';
import ListItemLink from '../components/ListItemLink';
-const useStyles = makeStyles((theme) => ({
- wizardCard: {
- borderRadius: 8,
- maxWidth: 360,
- margin: "16px auto"
- }
-}))
-
export default function AccountCreationDialog(props) {
- const classes = useStyles()
return (
<Container>
- <Card className={classes.wizardCard}>
+ <Card>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Create new account
@@ -28,7 +18,7 @@
</Typography>
</CardContent>
- <List className={classes.root}>
+ <List>
<ListItemLink
to="/newAccount/rendezVous"
icon={<Avatar><RoomRounded /></Avatar>}
diff --git a/client/src/pages/addContactPage.jsx b/client/src/pages/addContactPage.jsx
index d0451df..e47ed95 100644
--- a/client/src/pages/addContactPage.jsx
+++ b/client/src/pages/addContactPage.jsx
@@ -3,22 +3,9 @@
import { Box, Container, Fab, Card, CardContent, Typography } from '@mui/material';
import GroupAddRounded from '@mui/icons-material/GroupAddRounded';
-import makeStyles from '@mui/styles/makeStyles';
import authManager from '../AuthManager'
-const useStyles = makeStyles((theme) => ({
- root: {
- '& > *': {
- margin: theme.spacing(1),
- },
- },
- extendedIcon: {
- marginRight: theme.spacing(1),
- },
-}))
-
export default function AddContactPage(props) {
- const classes = useStyles()
const navigate = useNavigate();
const accountId = props.accountId || props.match.params.accountId
const contactId = props.contactId || props.match.params.contactId
@@ -47,7 +34,7 @@
<Typography variant='body1'>{contactId}</Typography>
<Box style={{textAlign: 'center', marginTop: 16}}>
<Fab variant='extended' color='primary' onClick={handleClick}>
- <GroupAddRounded className={classes.extendedIcon} />
+ <GroupAddRounded/>
Add contact
</Fab>
</Box>
diff --git a/client/src/pages/jamiAccountCreation.jsx b/client/src/pages/jamiAccountCreation.jsx
index a37545d..acecd27 100644
--- a/client/src/pages/jamiAccountCreation.jsx
+++ b/client/src/pages/jamiAccountCreation.jsx
@@ -1,31 +1,11 @@
import React, { useState } from 'react';
import { Container, Card, CardContent, Typography, Fab, CardActions, Box } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
import { AddRounded } from '@mui/icons-material';
import UsernameChooser from '../components/UsernameChooser';
import authManager from '../AuthManager'
import { useNavigate } from 'react-router';
-const useStyles = makeStyles((theme) => ({
- extendedIcon: {
- marginRight: theme.spacing(1),
- },
- wizardCard: {
- borderRadius: 8,
- maxWidth: 360,
- margin: "16px auto"
- },
- actionArea: {
- textAlign: 'center',
- display: 'block'
- },
- chooser: {
- marginTop: 16
- }
-}))
-
export default function JamiAccountDialog(props) {
- const classes = useStyles()
const [name, setName] = useState('')
const [loading, setLoading] = useState(false)
const [error, setError] = useState(false)
@@ -54,7 +34,7 @@
return (
<Container>
- <Card component="form" onSubmit={onSubmit} className={classes.wizardCard}>
+ <Card component="form" onSubmit={onSubmit}>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Create Jami account
@@ -64,14 +44,14 @@
Let's start by creating a new administrator account to control access to the server configuration.
</Typography>
- <Box className={classes.chooser} >
+ <Box>
<UsernameChooser disabled={loading} setName={setName} />
</Box>
</CardContent>
- <CardActions className={classes.actionArea}>
+ <CardActions>
{error && <Typography color="error">Error: {JSON.stringify(error)}</Typography>}
<Fab color="primary" type="submit" variant="extended" disabled={!name || loading}>
- <AddRounded className={classes.extendedIcon} />
+ <AddRounded/>
Register name
</Fab>
</CardActions>
diff --git a/client/src/pages/serverSetup.jsx b/client/src/pages/serverSetup.jsx
index d431568..e2722fd 100644
--- a/client/src/pages/serverSetup.jsx
+++ b/client/src/pages/serverSetup.jsx
@@ -2,24 +2,9 @@
import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@mui/material'
import GroupAddRounded from '@mui/icons-material/GroupAddRounded'
-import { makeStyles } from '@mui/styles';
import authManager from '../AuthManager'
-const useStyles = makeStyles((theme) => ({
- root: {
- '& > *': {
- //margin: theme.spacing(1),
- },
- },
- wizardCard: {
- borderRadius: 8,
- maxWidth: 360,
- margin: "16px auto"
- },
-}))
-
export default function ServerSetup(props) {
- const classes = useStyles()
const [password, setPassword] = useState('')
const [passwordRepeat, setPasswordRepeat] = useState('')
const [loading, setLoading] = useState(false)
@@ -36,7 +21,7 @@
return (
<Container className='message-list'>
- <Card className={classes.wizardCard} disabled={loading}>
+ <Card disabled={loading}>
<CardContent component="form" onSubmit={handleSubmit}>
<Typography gutterBottom variant="h5" component="h2">
Jami Web Node setup
@@ -47,9 +32,8 @@
</Typography>
<Box style={{ textAlign: 'center', marginTop: 8, marginBottom: 16 }}>
- <div><Input className={classes.textField} value="admin" name="username" autoComplete="username" disabled /></div>
+ <div><Input value="admin" name="username" autoComplete="username" disabled /></div>
<div><Input
- className={classes.textField}
value={password}
onChange={e => setPassword(e.target.value)}
name="password"
@@ -58,7 +42,6 @@
autoComplete="new-password" />
</div>
<div><Input
- className={classes.textField}
value={passwordRepeat}
onChange={e => setPasswordRepeat(e.target.value)}
name="password"
@@ -69,7 +52,7 @@
</Box>
<Box style={{ textAlign: 'center', marginTop: 24 }}>
<Fab variant='extended' color='primary' type='submit' disabled={!isValid()}>
- <GroupAddRounded className={classes.extendedIcon} />
+ <GroupAddRounded/>
Create admin account
</Fab>
</Box>