diff options
Diffstat (limited to 'webui/src/components')
19 files changed, 85 insertions, 101 deletions
diff --git a/webui/src/components/Author.tsx b/webui/src/components/Author.tsx index b9f95aae..92e14d40 100644 --- a/webui/src/components/Author.tsx +++ b/webui/src/components/Author.tsx @@ -1,9 +1,8 @@ +import MAvatar from '@mui/material/Avatar'; +import Link from '@mui/material/Link'; +import Tooltip from '@mui/material/Tooltip/Tooltip'; import { Link as RouterLink } from 'react-router-dom'; -import MAvatar from '@material-ui/core/Avatar'; -import Link from '@material-ui/core/Link'; -import Tooltip from '@material-ui/core/Tooltip/Tooltip'; - import { AuthoredFragment } from '../graphql/fragments.generated'; type Props = AuthoredFragment & { @@ -14,7 +13,12 @@ type Props = AuthoredFragment & { const Author = ({ author, ...props }: Props) => { return ( <Tooltip title={`Goto the ${author.displayName}'s profile.`}> - <Link {...props} component={RouterLink} to={`/user/${author.id}`}> + <Link + {...props} + component={RouterLink} + to={`/user/${author.id}`} + underline="hover" + > {author.displayName} </Link> </Tooltip> diff --git a/webui/src/components/BackToListButton.tsx b/webui/src/components/BackToListButton.tsx index 8bc75491..a4e4ea9c 100644 --- a/webui/src/components/BackToListButton.tsx +++ b/webui/src/components/BackToListButton.tsx @@ -1,9 +1,8 @@ +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import Button from '@mui/material/Button'; +import makeStyles from '@mui/styles/makeStyles'; import { Link } from 'react-router-dom'; -import Button from '@material-ui/core/Button'; -import { makeStyles } from '@material-ui/core/styles'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; - const useStyles = makeStyles((theme) => ({ backButton: { position: 'sticky', diff --git a/webui/src/components/BugTitleForm/BugTitleForm.tsx b/webui/src/components/BugTitleForm/BugTitleForm.tsx index 6007680f..78b9e901 100644 --- a/webui/src/components/BugTitleForm/BugTitleForm.tsx +++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx @@ -1,8 +1,8 @@ -import { useState } from 'react'; +import { Button, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { useRef, useState } from 'react'; import { Link } from 'react-router-dom'; -import { Button, makeStyles, Typography } from '@material-ui/core'; - import { TimelineDocument } from '../../pages/bug/TimelineQuery.generated'; import IfLoggedIn from '../IfLoggedIn/IfLoggedIn'; import Author from 'src/components/Author'; @@ -71,11 +71,11 @@ function BugTitleForm({ bug }: Props) { const [setTitle, { loading, error }] = useSetTitleMutation(); const [issueTitle, setIssueTitle] = useState(bug.title); const classes = useStyles(); - let issueTitleInput: any; + const issueTitleInput = useRef<HTMLInputElement>(); function isFormValid() { - if (issueTitleInput) { - return issueTitleInput.value.length > 0; + if (issueTitleInput.current) { + return issueTitleInput.current.value.length > 0; } else { return false; } @@ -83,7 +83,7 @@ function BugTitleForm({ bug }: Props) { function submitNewTitle() { if (!isFormValid()) return; - if (bug.title === issueTitleInput.value) { + if (bug.title === issueTitleInput.current?.value) { cancelChange(); return; } @@ -91,7 +91,7 @@ function BugTitleForm({ bug }: Props) { variables: { input: { prefix: bug.id, - title: issueTitleInput.value, + title: issueTitleInput.current!!.value, }, }, refetchQueries: [ @@ -117,9 +117,7 @@ function BugTitleForm({ bug }: Props) { return ( <form className={classes.headerTitle}> <BugTitleInput - inputRef={(node) => { - issueTitleInput = node; - }} + inputRef={issueTitleInput} label="Title" variant="outlined" fullWidth diff --git a/webui/src/components/BugTitleForm/BugTitleInput.tsx b/webui/src/components/BugTitleForm/BugTitleInput.tsx index d2b060a2..11cbbdb6 100644 --- a/webui/src/components/BugTitleForm/BugTitleInput.tsx +++ b/webui/src/components/BugTitleForm/BugTitleInput.tsx @@ -1,5 +1,7 @@ -import { createStyles, fade, withStyles, TextField } from '@material-ui/core'; -import { Theme } from '@material-ui/core/styles'; +import { alpha, TextField } from '@mui/material'; +import { Theme } from '@mui/material/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; const BugTitleInput = withStyles((theme: Theme) => createStyles({ @@ -14,7 +16,7 @@ const BugTitleInput = withStyles((theme: Theme) => }, '& input:valid:hover + fieldset': { color: theme.palette.text.primary, - borderColor: fade(theme.palette.divider, 0.3), + borderColor: alpha(theme.palette.divider, 0.3), borderWidth: 2, }, '& input:valid:focus + fieldset': { diff --git a/webui/src/components/CloseBugButton/index.tsx b/webui/src/components/CloseBugButton/index.tsx index 77b93e7f..70b92392 100644 --- a/webui/src/components/CloseBugButton/index.tsx +++ b/webui/src/components/CloseBugButton/index.tsx @@ -1,20 +1,12 @@ -import Button from '@material-ui/core/Button'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'; +import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; +import Button from '@mui/material/Button'; +import CircularProgress from '@mui/material/CircularProgress'; import { BugFragment } from 'src/pages/bug/Bug.generated'; import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated'; import { useCloseBugMutation } from './CloseBug.generated'; -const useStyles = makeStyles((theme: Theme) => ({ - closeIssueIcon: { - color: theme.palette.secondary.dark, - paddingTop: '0.1rem', - }, -})); - interface Props { bug: BugFragment; disabled?: boolean; @@ -22,7 +14,6 @@ interface Props { function CloseBugButton({ bug, disabled }: Props) { const [closeBug, { loading, error }] = useCloseBugMutation(); - const classes = useStyles(); function closeBugAction() { closeBug({ @@ -54,7 +45,7 @@ function CloseBugButton({ bug, disabled }: Props) { variant="contained" onClick={() => closeBugAction()} disabled={bug.status === 'CLOSED' || disabled} - startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />} + startIcon={<ErrorOutlineIcon />} > Close bug </Button> diff --git a/webui/src/components/CloseBugWithCommentButton/index.tsx b/webui/src/components/CloseBugWithCommentButton/index.tsx index 9663ec3f..efad39b3 100644 --- a/webui/src/components/CloseBugWithCommentButton/index.tsx +++ b/webui/src/components/CloseBugWithCommentButton/index.tsx @@ -1,20 +1,12 @@ -import Button from '@material-ui/core/Button'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'; +import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; +import Button from '@mui/material/Button'; +import CircularProgress from '@mui/material/CircularProgress'; import { BugFragment } from 'src/pages/bug/Bug.generated'; import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated'; import { useAddCommentAndCloseBugMutation } from './CloseBugWithComment.generated'; -const useStyles = makeStyles((theme: Theme) => ({ - closeIssueIcon: { - color: theme.palette.secondary.dark, - paddingTop: '0.1rem', - }, -})); - interface Props { bug: BugFragment; comment: string; @@ -24,7 +16,6 @@ interface Props { function CloseBugWithCommentButton({ bug, comment, postClick }: Props) { const [addCommentAndCloseBug, { loading, error }] = useAddCommentAndCloseBugMutation(); - const classes = useStyles(); function addCommentAndCloseBugAction() { addCommentAndCloseBug({ @@ -60,7 +51,7 @@ function CloseBugWithCommentButton({ bug, comment, postClick }: Props) { <Button variant="contained" onClick={() => addCommentAndCloseBugAction()} - startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />} + startIcon={<ErrorOutlineIcon />} > Close bug with comment </Button> diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx index 07322a22..0fde1d95 100644 --- a/webui/src/components/CommentInput/CommentInput.tsx +++ b/webui/src/components/CommentInput/CommentInput.tsx @@ -1,11 +1,10 @@ -import { useState, useEffect } from 'react'; +import { Typography } from '@mui/material'; +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; +import TextField from '@mui/material/TextField'; +import makeStyles from '@mui/styles/makeStyles'; import * as React from 'react'; - -import { Typography } from '@material-ui/core'; -import Tab from '@material-ui/core/Tab'; -import Tabs from '@material-ui/core/Tabs'; -import TextField from '@material-ui/core/TextField'; -import { makeStyles } from '@material-ui/core/styles'; +import { useState, useEffect } from 'react'; import Content from '../Content'; diff --git a/webui/src/components/Content/AnchorTag.tsx b/webui/src/components/Content/AnchorTag.tsx index 0ded34b6..e9edef95 100644 --- a/webui/src/components/Content/AnchorTag.tsx +++ b/webui/src/components/Content/AnchorTag.tsx @@ -1,8 +1,7 @@ +import makeStyles from '@mui/styles/makeStyles'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { makeStyles } from '@material-ui/core/styles'; - const useStyles = makeStyles((theme) => ({ tag: { color: theme.palette.text.secondary, diff --git a/webui/src/components/Content/BlockQuoteTag.tsx b/webui/src/components/Content/BlockQuoteTag.tsx index d9674b5d..ae6c34f4 100644 --- a/webui/src/components/Content/BlockQuoteTag.tsx +++ b/webui/src/components/Content/BlockQuoteTag.tsx @@ -1,7 +1,6 @@ +import makeStyles from '@mui/styles/makeStyles'; import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; - const useStyles = makeStyles((theme) => ({ tag: { color: theme.palette.text.secondary, diff --git a/webui/src/components/Content/ImageTag.tsx b/webui/src/components/Content/ImageTag.tsx index 2e12ee45..f6e7d5ba 100644 --- a/webui/src/components/Content/ImageTag.tsx +++ b/webui/src/components/Content/ImageTag.tsx @@ -1,7 +1,6 @@ +import { makeStyles } from '@mui/styles'; import * as React from 'react'; -import { makeStyles } from '@material-ui/styles'; - const useStyles = makeStyles({ tag: { maxWidth: '100%', diff --git a/webui/src/components/Content/PreTag.tsx b/webui/src/components/Content/PreTag.tsx index 4601cc2d..aeefa655 100644 --- a/webui/src/components/Content/PreTag.tsx +++ b/webui/src/components/Content/PreTag.tsx @@ -1,7 +1,6 @@ +import { makeStyles } from '@mui/styles'; import * as React from 'react'; -import { makeStyles } from '@material-ui/styles'; - const useStyles = makeStyles({ tag: { maxWidth: '100%', diff --git a/webui/src/components/Date.tsx b/webui/src/components/Date.tsx index edc531b0..1454fac7 100644 --- a/webui/src/components/Date.tsx +++ b/webui/src/components/Date.tsx @@ -1,8 +1,7 @@ +import Tooltip from '@mui/material/Tooltip/Tooltip'; import moment from 'moment'; import Moment from 'react-moment'; -import Tooltip from '@material-ui/core/Tooltip/Tooltip'; - const HOUR = 1000 * 3600; const DAY = 24 * HOUR; const WEEK = 7 * DAY; @@ -10,7 +9,9 @@ const WEEK = 7 * DAY; type Props = { date: string }; const Date = ({ date }: Props) => ( <Tooltip title={moment(date).format('LLLL')}> - <Moment date={date} format="on ll" fromNowDuring={WEEK} /> + <span> + <Moment date={date} format="on ll" fromNowDuring={WEEK} /> + </span> </Tooltip> ); diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx index f9053f76..961696d7 100644 --- a/webui/src/components/Header/Header.tsx +++ b/webui/src/components/Header/Header.tsx @@ -1,12 +1,12 @@ +import AppBar from '@mui/material/AppBar'; +import Tab, { TabProps } from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; +import Toolbar from '@mui/material/Toolbar'; +import Tooltip from '@mui/material/Tooltip/Tooltip'; +import { alpha } from '@mui/material/styles'; +import makeStyles from '@mui/styles/makeStyles'; import { Link, useLocation } from 'react-router-dom'; -import AppBar from '@material-ui/core/AppBar'; -import Tab, { TabProps } from '@material-ui/core/Tab'; -import Tabs from '@material-ui/core/Tabs'; -import Toolbar from '@material-ui/core/Toolbar'; -import Tooltip from '@material-ui/core/Tooltip/Tooltip'; -import { fade, makeStyles } from '@material-ui/core/styles'; - import CurrentIdentity from '../Identity/CurrentIdentity'; import { LightSwitch } from '../Themer'; @@ -30,7 +30,7 @@ const useStyles = makeStyles((theme) => ({ }, lightSwitch: { marginRight: '20px', - color: fade(theme.palette.primary.contrastText, 0.5), + color: alpha(theme.palette.primary.contrastText, 0.5), }, logo: { height: '42px', diff --git a/webui/src/components/Header/index.tsx b/webui/src/components/Header/index.tsx index e4dc8d19..8375c74a 100644 --- a/webui/src/components/Header/index.tsx +++ b/webui/src/components/Header/index.tsx @@ -1,7 +1,6 @@ +import CssBaseline from '@mui/material/CssBaseline'; import * as React from 'react'; -import CssBaseline from '@material-ui/core/CssBaseline'; - import Header from './Header'; type Props = { children: React.ReactNode }; diff --git a/webui/src/components/Identity/CurrentIdentity.tsx b/webui/src/components/Identity/CurrentIdentity.tsx index 7be2a5f0..e6a396a8 100644 --- a/webui/src/components/Identity/CurrentIdentity.tsx +++ b/webui/src/components/Identity/CurrentIdentity.tsx @@ -1,6 +1,4 @@ -import { useState, useRef } from 'react'; -import { Link as RouterLink } from 'react-router-dom'; - +import LockIcon from '@mui/icons-material/Lock'; import { Button, ClickAwayListener, @@ -10,10 +8,11 @@ import { MenuList, Paper, Popper, -} from '@material-ui/core'; -import Avatar from '@material-ui/core/Avatar'; -import { makeStyles } from '@material-ui/core/styles'; -import LockIcon from '@material-ui/icons/Lock'; +} from '@mui/material'; +import Avatar from '@mui/material/Avatar'; +import makeStyles from '@mui/styles/makeStyles'; +import { useState, useRef } from 'react'; +import { Link as RouterLink } from 'react-router-dom'; import { useCurrentIdentityQuery } from './CurrentIdentity.generated'; @@ -97,6 +96,7 @@ const CurrentIdentity = () => { className={classes.profileLink} component={RouterLink} to={`/user/${user.id}`} + underline="hover" > Open profile </Link> diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx index 05f6c279..709aceff 100644 --- a/webui/src/components/Label.tsx +++ b/webui/src/components/Label.tsx @@ -1,9 +1,6 @@ -import { Chip } from '@material-ui/core'; -import { common } from '@material-ui/core/colors'; -import { - darken, - getContrastRatio, -} from '@material-ui/core/styles/colorManipulator'; +import { Chip } from '@mui/material'; +import { common } from '@mui/material/colors'; +import { darken, getContrastRatio } from '@mui/material/styles'; import { Color } from '../gqlTypes'; import { LabelFragment } from '../graphql/fragments.generated'; diff --git a/webui/src/components/ReopenBugButton/index.tsx b/webui/src/components/ReopenBugButton/index.tsx index 2433bc60..b6321560 100644 --- a/webui/src/components/ReopenBugButton/index.tsx +++ b/webui/src/components/ReopenBugButton/index.tsx @@ -1,5 +1,5 @@ -import Button from '@material-ui/core/Button'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import Button from '@mui/material/Button'; +import CircularProgress from '@mui/material/CircularProgress'; import { BugFragment } from 'src/pages/bug/Bug.generated'; import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated'; diff --git a/webui/src/components/ReopenBugWithCommentButton/index.tsx b/webui/src/components/ReopenBugWithCommentButton/index.tsx index 54e8b1e7..66bc04c6 100644 --- a/webui/src/components/ReopenBugWithCommentButton/index.tsx +++ b/webui/src/components/ReopenBugWithCommentButton/index.tsx @@ -1,5 +1,5 @@ -import Button from '@material-ui/core/Button'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import Button from '@mui/material/Button'; +import CircularProgress from '@mui/material/CircularProgress'; import { BugFragment } from 'src/pages/bug/Bug.generated'; import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated'; diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index 063587e3..9934888d 100644 --- a/webui/src/components/Themer.tsx +++ b/webui/src/components/Themer.tsx @@ -1,11 +1,15 @@ -import { createContext, useContext, useState } from 'react'; +import { NightsStayRounded, WbSunnyRounded } from '@mui/icons-material'; +import { ThemeProvider, StyledEngineProvider } from '@mui/material'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import { Theme } from '@mui/material/styles'; import * as React from 'react'; +import { createContext, useContext, useState } from 'react'; -import { ThemeProvider } from '@material-ui/core'; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import { Theme } from '@material-ui/core/styles'; -import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons'; +declare module '@mui/styles/defaultTheme' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + interface DefaultTheme extends Theme {} +} const ThemeContext = createContext({ toggleMode: () => {}, @@ -26,6 +30,7 @@ const LightSwitch = ({ className }: LightSwitchProps) => { onClick={toggleMode} aria-label={description} className={className} + size="large" > {mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />} </IconButton> @@ -53,7 +58,9 @@ const Themer = ({ children, lightTheme, darkTheme }: Props) => { return ( <ThemeContext.Provider value={{ toggleMode: toggleMode, mode: mode }}> - <ThemeProvider theme={preferedTheme}>{children}</ThemeProvider> + <StyledEngineProvider injectFirst> + <ThemeProvider theme={preferedTheme}>{children}</ThemeProvider> + </StyledEngineProvider> </ThemeContext.Provider> ); }; |