diff --git a/__tests__/src/components/WindowTopMenu.test.js b/__tests__/src/components/WindowTopMenu.test.js index 713cc148ef9ab3616004acdfbae2b60b8b65a5e2..3eacc72fb4360e0e3e0667da11272f4f5dc5f35f 100644 --- a/__tests__/src/components/WindowTopMenu.test.js +++ b/__tests__/src/components/WindowTopMenu.test.js @@ -42,8 +42,10 @@ describe('WindowTopMenu', () => { expect(wrapper.find(Menu).first().props().anchorEl).toBe(null); expect(wrapper.find(Menu).first().props().open).toBe(false); expect(wrapper.find(Menu).first().props().onClose).toBe(handleClose); - expect(wrapper.find(Menu).first().props().onEntering).toBe(toggleDraggingEnabled); - expect(wrapper.find(Menu).first().props().onExit).toBe(toggleDraggingEnabled); + expect(wrapper.find(Menu).first().props().TransitionProps.onEntering) + .toBe(toggleDraggingEnabled); + expect(wrapper.find(Menu).first().props().TransitionProps.onExit) + .toBe(toggleDraggingEnabled); }); it('passses correct props to <Menu/> when achor element given', () => { @@ -54,7 +56,9 @@ describe('WindowTopMenu', () => { expect(wrapper.find(Menu).first().props().anchorEl).toBe(anchorEl); expect(wrapper.find(Menu).first().props().open).toBe(true); expect(wrapper.find(Menu).first().props().onClose).toBe(handleClose); - expect(wrapper.find(Menu).first().props().onEntering).toBe(toggleDraggingEnabled); - expect(wrapper.find(Menu).first().props().onExit).toBe(toggleDraggingEnabled); + expect(wrapper.find(Menu).first().props().TransitionProps.onEntering) + .toBe(toggleDraggingEnabled); + expect(wrapper.find(Menu).first().props().TransitionProps.onExit) + .toBe(toggleDraggingEnabled); }); }); diff --git a/__tests__/src/components/WorkspaceAddButton.test.js b/__tests__/src/components/WorkspaceAddButton.test.js index bac03e0c38b0982d05d9b01030207209c4b755ac..cd1a65c0dcf1ea4d416dc8e3e7e314ee3fb70159 100644 --- a/__tests__/src/components/WorkspaceAddButton.test.js +++ b/__tests__/src/components/WorkspaceAddButton.test.js @@ -65,7 +65,7 @@ describe('WorkspaceAddButton', () => { const wrapper = createWrapper({ useExtendedFab: false }); expect(extendedWrapper.find(Fab).props().variant).toBe('extended'); - expect(wrapper.find(Fab).props().variant).toEqual('round'); + expect(wrapper.find(Fab).props().variant).toEqual('circular'); }); }); }); diff --git a/package.json b/package.json index ebb453fd4179d03b0f6aa9d9b49d706417d6c293..cb2499fafc99afba02a93cd78169d89de5bccdee 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ ], "repository": "https://github.com/ProjectMirador/mirador", "dependencies": { - "@material-ui/core": "^4.11.0", + "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.53", "@researchgate/react-intersection-observer": "^1.0.0", diff --git a/src/components/AppProviders.js b/src/components/AppProviders.js index 3c2d7bff3a3b7552fc0e66121312a15a99e617f4..aeeedc34b928f6622373be9005b843b6f3755451 100644 --- a/src/components/AppProviders.js +++ b/src/components/AppProviders.js @@ -4,7 +4,7 @@ import Fullscreen from 'react-full-screen'; import { I18nextProvider } from 'react-i18next'; import { LiveAnnouncer } from 'react-aria-live'; import { - ThemeProvider, StylesProvider, createMuiTheme, jssPreset, createGenerateClassName, + ThemeProvider, StylesProvider, createTheme, jssPreset, createGenerateClassName, } from '@material-ui/core/styles'; import { DndContext, DndProvider } from 'react-dnd'; import MultiBackend from 'react-dnd-multi-backend'; @@ -100,7 +100,7 @@ export class AppProviders extends Component { <I18nextProvider i18n={this.i18n}> <LiveAnnouncer> <ThemeProvider - theme={createMuiTheme(theme)} + theme={createTheme(theme)} > <StylesProvider jss={create({ plugins: [...jssPreset().plugins, rtl()] })} diff --git a/src/components/ManifestListItemError.js b/src/components/ManifestListItemError.js index fd37247bc07e1e9e6ca80fcfd5d79134db2bd4b4..a6a3fb43ac4eabb161bbd324049c177474071a1e 100644 --- a/src/components/ManifestListItemError.js +++ b/src/components/ManifestListItemError.js @@ -23,7 +23,7 @@ export class ManifestListItemError extends Component { <Grid container> <Grid container item xs={12} sm={6}> <Grid item xs={4} sm={3}> - <Grid container justify="center"> + <Grid container justifyContent="center"> <ErrorIcon className={classes.errorIcon} /> </Grid> </Grid> @@ -35,7 +35,7 @@ export class ManifestListItemError extends Component { </Grid> <Grid container> - <Grid container item xs={12} sm={6} justify="flex-end"> + <Grid container item xs={12} sm={6} justifyContent="flex-end"> <Grid item> <Button onClick={() => { onDismissClick(manifestId); }}> {t('dismiss')} diff --git a/src/components/SelectCollection.js b/src/components/SelectCollection.js index decfdf6deabd97cf10e3238e22d0e31294434458..aeb98e71291df1e5834cce2c6929067138a87ccf 100644 --- a/src/components/SelectCollection.js +++ b/src/components/SelectCollection.js @@ -30,7 +30,7 @@ export class SelectCollection extends Component { t, } = this.props; return ( - <Grid container justify="center" alignItems="center"> + <Grid container justifyContent="center" alignItems="center"> <Grid container direction="column" alignItems="center"> <Typography variant="h4" paragraph> <em> diff --git a/src/components/WindowList.js b/src/components/WindowList.js index 338b93ae6162b8b22c28546db977c60691c177e6..5e45ad0378c2ab27ed55d004a1cbe9cd551100fd 100644 --- a/src/components/WindowList.js +++ b/src/components/WindowList.js @@ -54,7 +54,9 @@ export class WindowList extends Component { anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose} - onEntering={WindowList.focus2ndListIitem} + TransitionProps={{ + onEntering: WindowList.focus2ndListIitem, + }} > <ListSubheader role="presentation" selected={false} disabled tabIndex="-1"> {t('openWindows')} diff --git a/src/components/WindowTopMenu.js b/src/components/WindowTopMenu.js index 7998753826b5a94a65e7468e6ecc946581e7ec66..6148f94d24085780611b2ddf1e8373740104cf24 100644 --- a/src/components/WindowTopMenu.js +++ b/src/components/WindowTopMenu.js @@ -47,8 +47,10 @@ export class WindowTopMenu extends Component { getContentAnchorEl={null} open={Boolean(anchorEl)} onClose={handleClose} - onEntering={toggleDraggingEnabled} - onExit={toggleDraggingEnabled} + TransitionProps={{ + onEntering: toggleDraggingEnabled, + onExit: toggleDraggingEnabled, + }} orientation="horizontal" > <WindowViewSettings windowId={windowId} handleClose={handleClose} /> diff --git a/src/components/WorkspaceAddButton.js b/src/components/WorkspaceAddButton.js index 297d72089b6f6337dd83cc17cf4296922d392ae6..e3fdeb2f7ac8e088ae5cf53f9592f5f012fa7bb6 100644 --- a/src/components/WorkspaceAddButton.js +++ b/src/components/WorkspaceAddButton.js @@ -30,7 +30,7 @@ export class WorkspaceAddButton extends Component { } className={classes.fab} classes={{ primary: classes.fabPrimary, secondary: classes.fabSecondary }} - variant={useExtendedFab ? 'extended' : 'round'} + variant={useExtendedFab ? 'extended' : 'circular'} onClick={() => { setWorkspaceAddVisibility(!isWorkspaceAddVisible); }} > { diff --git a/src/containers/SidebarIndexTableOfContents.js b/src/containers/SidebarIndexTableOfContents.js index 6d0d7d771eaedfa1f278fd613bfd598741d82320..98caa554c90d31bf077dc7169a1b209a0bd28fbe 100644 --- a/src/containers/SidebarIndexTableOfContents.js +++ b/src/containers/SidebarIndexTableOfContents.js @@ -2,7 +2,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; import { withStyles } from '@material-ui/core/styles'; -import { fade } from '@material-ui/core/styles/colorManipulator'; +import { alpha } from '@material-ui/core/styles/colorManipulator'; import { withPlugins } from '../extend/withPlugins'; import { SidebarIndexTableOfContents } from '../components/SidebarIndexTableOfContents'; import { @@ -65,7 +65,7 @@ const styles = theme => ({ }, }, visibleNode: { - backgroundColor: fade(theme.palette.highlights.primary, 0.35), + backgroundColor: alpha(theme.palette.highlights.primary, 0.35), display: 'inline', }, }); diff --git a/src/containers/WindowAuthenticationBar.js b/src/containers/WindowAuthenticationBar.js index 881bf419a1423289b504995b616cb96270366050..3b42a93aa7f44067e0cdc09958a20a90c4059b66 100644 --- a/src/containers/WindowAuthenticationBar.js +++ b/src/containers/WindowAuthenticationBar.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; import { withStyles } from '@material-ui/core/styles'; -import { fade } from '@material-ui/core/styles/colorManipulator'; +import { alpha } from '@material-ui/core/styles/colorManipulator'; import { withPlugins } from '../extend/withPlugins'; import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar'; @@ -13,7 +13,7 @@ import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar'; const styles = theme => ({ buttonInvert: { '&:hover': { - backgroundColor: fade( + backgroundColor: alpha( theme.palette.secondary.contrastText, 1 - theme.palette.action.hoverOpacity, ), }, diff --git a/src/containers/WindowCanvasNavigationControls.js b/src/containers/WindowCanvasNavigationControls.js index c823351483e99ae53e6747e443f9436898067066..8028c13df02bf98720c722060c945e7cd2042281 100644 --- a/src/containers/WindowCanvasNavigationControls.js +++ b/src/containers/WindowCanvasNavigationControls.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withSize } from 'react-sizeme'; import { withStyles } from '@material-ui/core'; -import { fade } from '@material-ui/core/styles/colorManipulator'; +import { alpha } from '@material-ui/core/styles/colorManipulator'; import { withPlugins } from '../extend/withPlugins'; import { getWorkspace } from '../state/selectors'; import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls'; @@ -28,7 +28,7 @@ const styles = theme => ({ flexDirection: 'column', }, controls: { - backgroundColor: fade(theme.palette.background.paper, 0.5), + backgroundColor: alpha(theme.palette.background.paper, 0.5), bottom: 0, position: 'absolute', width: '100%',