update react, material
Change-Id: I4ae3cdf25982f0935641bf5846447e9d223563b4
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 363df68..8160459 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -1,7 +1,11 @@
import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/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 '@material-ui/core'
-import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@material-ui/icons'
+
+
+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'
import Account from '../../../model/Account'
import JamiIdCard from './JamiIdCard'
@@ -28,7 +32,7 @@
},
textField: {
//marginLeft: theme.spacing(1),
- marginRight: theme.spacing(2),
+ //marginRight: theme.spacing(2),
}
}))
@@ -168,7 +172,7 @@
placeholder="Enter new moderator name or URI"
fullWidth />
<ListItemSecondaryAction>
- <IconButton onClick={addModerator}><AddCircle /></IconButton>
+ <IconButton onClick={addModerator} size="large"><AddCircle /></IconButton>
</ListItemSecondaryAction>
</ListItem>
{!moderators || moderators.length === 0 ?
@@ -181,7 +185,7 @@
</ListItemAvatar>
<ListItemText primary={moderator.getDisplayName()} />
<ListItemSecondaryAction>
- <IconButton onClick={e => removeModerator(moderator.uri)}><DeleteRounded /></IconButton>
+ <IconButton onClick={e => removeModerator(moderator.uri)} size="large"><DeleteRounded /></IconButton>
</ListItemSecondaryAction>
</ListItem>
))}
@@ -190,5 +194,6 @@
</motion.div>
</List>
- </motion.div>)
+ </motion.div>
+ );
}
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index cbb64e1..2020a6e 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,4 +1,4 @@
-import List from '@material-ui/core/List'
+import List from '@mui/material/List'
import React from 'react'
export default function ContactList() {
diff --git a/client/src/components/ConversationAvatar.js b/client/src/components/ConversationAvatar.js
index 601fcf6..e50c383 100644
--- a/client/src/components/ConversationAvatar.js
+++ b/client/src/components/ConversationAvatar.js
@@ -1,6 +1,6 @@
import React from 'react'
-import { Avatar } from '@material-ui/core'
-import { PersonRounded } from '@material-ui/icons'
+import { Avatar } from '@mui/material'
+import { PersonRounded } from '@mui/icons-material'
export default function ConversationAvatar(props) {
return <Avatar>
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
index 9fa4650..4805307 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.js
@@ -1,10 +1,10 @@
-import List from '@material-ui/core/List'
+import List from '@mui/material/List'
import React from 'react'
import ConversationListItem from './ConversationListItem'
-import ListSubheader from '@material-ui/core/ListSubheader';
+import ListSubheader from '@mui/material/ListSubheader';
import Conversation from '../../../model/Conversation';
-import { GroupRounded as GroupIcon } from '@material-ui/icons';
-import Typography from '@material-ui/core/Typography';
+import { GroupRounded as GroupIcon } from '@mui/icons-material';
+import Typography from '@mui/material/Typography';
export default function ConversationList(props) {
return (
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index 80a3aae..ed69a77 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,7 +1,7 @@
-import { ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { ListItem, ListItemAvatar, ListItemText } from '@mui/material'
import React from 'react'
import Conversation from '../../../model/Conversation'
-import { useHistory, useParams } from "react-router-dom"
+import { useNavigate, useParams } from "react-router-dom"
import ConversationAvatar from './ConversationAvatar'
export default function ConversationListItem(props) {
@@ -9,7 +9,7 @@
const conversation = props.conversation
const pathId = conversationId || contactId
const isSelected = conversation.getDisplayUri() === pathId
- const history = useHistory()
+ const navigate = useNavigate()
const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`
if (conversation instanceof Conversation) {
@@ -18,7 +18,7 @@
button
alignItems="flex-start"
selected={isSelected}
- onClick={() => history.replace(`/account/${conversation.getAccountId()}/${uri}`)}>
+ onClick={() => navigate(`/account/${conversation.getAccountId()}/${uri}`)}>
<ListItemAvatar><ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} /></ListItemAvatar>
<ListItemText
primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index 407ed94..9c57bff 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
-import { Box, Card, CardActionArea, CardContent, CircularProgress, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { useHistory, useParams } from 'react-router';
+import { Box, 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';
@@ -15,7 +15,7 @@
export default function ConversationsOverviewCard(props) {
const classes = useStyles()
- const history = useHistory()
+ const navigate = useNavigate()
const accountId = props.accountId || useParams().accountId
const [state, setState] = useState({ loaded: false })
@@ -31,7 +31,7 @@
}, [accountId])
return (
- <Card onClick={() => history.push(`/account/${accountId}`)} >
+ <Card onClick={() => navigate(`/account/${accountId}`)} >
<CardActionArea>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index c621b56..7db0dd2 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -1,17 +1,17 @@
import React, { useState } from 'react'
-import { Box, Button, Menu, MenuItem } from '@material-ui/core'
-import { useHistory, useParams } from "react-router-dom"
+import { Box, Button, Menu, MenuItem } from '@mui/material'
+import { useNavigate, useParams } from "react-router-dom"
import authManager from '../AuthManager'
export default function Header() {
- const history = useHistory()
+ const navigate = useNavigate()
const [anchorEl, setAnchorEl] = useState(null)
const handleClick = (event) => setAnchorEl(event.currentTarget)
const handleClose = () => setAnchorEl(null)
const params = useParams()
- const goToAccountSelection = () => history.push(`/account`)
- const goToAccountSettings = () => history.push(`/account/${params.accountId}/settings`)
+ const goToAccountSelection = () => navigate(`/account`)
+ const goToAccountSettings = () => navigate(`/account/${params.accountId}/settings`)
return (
<Box>
diff --git a/client/src/components/JamiIdCard.js b/client/src/components/JamiIdCard.js
index 1ecfd94..68c4e6c 100644
--- a/client/src/components/JamiIdCard.js
+++ b/client/src/components/JamiIdCard.js
@@ -1,6 +1,6 @@
import React from 'react';
-import { Box, Card, CardContent, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Card, CardContent, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
const useStyles = makeStyles({
title: {
diff --git a/client/src/components/ListItemLink.js b/client/src/components/ListItemLink.js
index 8ff17d1..915a24b 100644
--- a/client/src/components/ListItemLink.js
+++ b/client/src/components/ListItemLink.js
@@ -1,8 +1,8 @@
import React, { useMemo, forwardRef } from 'react';
import PropTypes from 'prop-types';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
import { Link as RouterLink } from 'react-router-dom';
function ListItemLink(props) {
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index ab28177..7cfbbdc 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -1,5 +1,5 @@
-import { Typography } from '@material-ui/core'
-import { GroupOutlined } from '@material-ui/icons'
+import { Typography } from '@mui/material'
+import { GroupOutlined } from '@mui/icons-material'
import React from 'react'
import ConversationAvatar from './ConversationAvatar'
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 175f19b..3ae1b1c 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,6 +1,6 @@
import Message from './Message'
import React, { useEffect } from 'react'
-import { Box, Divider, Typography } from '@material-ui/core'
+import { Box, Divider, Typography } from '@mui/material'
import ConversationAvatar from './ConversationAvatar'
export default function MessageList(props) {
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index 3543d6d..a4c6f84 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react'
-import { InputBase, InputAdornment } from '@material-ui/core';
-import { SearchRounded } from '@material-ui/icons';
+import { InputBase, InputAdornment } from '@mui/material';
+import { SearchRounded } from '@mui/icons-material';
export default function NewContactForm(props) {
const [value, setValue] = useState('')
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index fa7c0f2..ae0a7de 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,7 +1,7 @@
import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { IconButton, InputBase, Paper, Popper } from '@material-ui/core'
-import { Send, EmojiEmotionsRounded } from '@material-ui/icons'
+import makeStyles from '@mui/styles/makeStyles';
+import { IconButton, InputBase, Paper, Popper } from '@mui/material'
+import { Send, EmojiEmotionsRounded } from '@mui/icons-material'
import EmojiPicker from 'emoji-picker-react'
import authManager from '../AuthManager'
@@ -56,7 +56,12 @@
onSubmit={handleSubmit}
className="send-message-card"
className={classes.root}>
- <IconButton aria-describedby={id} variant="contained" color="primary" onClick={handleOpenEmojiPicker}>
+ <IconButton
+ aria-describedby={id}
+ variant="contained"
+ color="primary"
+ onClick={handleOpenEmojiPicker}
+ size="large">
<EmojiEmotionsRounded />
</IconButton>
<Popper
@@ -80,10 +85,14 @@
value={currentMessage}
onChange={handleInputChange}
/>
- <IconButton type="submit" className={classes.iconButton} aria-label="search">
+ <IconButton
+ type="submit"
+ className={classes.iconButton}
+ aria-label="search"
+ size="large">
<Send />
</IconButton>
</Paper>
</div>
- )
+ );
}
diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
index 3d795ce..2df96c6 100644
--- a/client/src/components/UsernameChooser.js
+++ b/client/src/components/UsernameChooser.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import usePromise from "react-fetch-hook/usePromise"
-import { InputAdornment, TextField } from '@material-ui/core'
-import { SearchRounded } from '@material-ui/icons'
+import { InputAdornment, TextField } from '@mui/material'
+import { SearchRounded } from '@mui/icons-material'
import authManager from '../AuthManager'
const isInputValid = input => input && input.length > 2
diff --git a/client/src/components/loading.js b/client/src/components/loading.js
index 198b993..dee6e88 100644
--- a/client/src/components/loading.js
+++ b/client/src/components/loading.js
@@ -1,4 +1,4 @@
-import { CircularProgress, Container } from '@material-ui/core';
+import { CircularProgress, Container } from '@mui/material';
import React from 'react';
export default function LoadingPage() {
diff --git a/client/src/components/welcome.js b/client/src/components/welcome.js
index ff39c0b..46c054c 100644
--- a/client/src/components/welcome.js
+++ b/client/src/components/welcome.js
@@ -1,4 +1,4 @@
-import { Button, Container } from '@material-ui/core';
+import { Button, Container } from '@mui/material';
import { AnimatePresence, motion } from 'framer-motion';
import React, { useState } from 'react';
import JamiLogo from '../../public/jami-logo-icon.svg'