refactor: Replace imports @material-ui/core/styles -> react/styles

to stop relying on mui/styles directly. This prepare mui v5 migration

react/CozyDialogs/TopAnchoredDialog.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { withStyles } from '@material-ui/core/styles'
+
+import { withStyles } from '../styles'
 import Dialog from '../Dialog'
 
 /**

react/GhostFileBadge/index.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import cx from 'classnames'
+
 import Badge from '../Badge'
-import { withStyles } from '@material-ui/core/styles'
+import { withStyles } from '../styles'
 
 const customStyles = () => ({
   ghost: {

react/InfosBadge/index.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import cx from 'classnames'
+
 import Badge from '../Badge'
-import { withStyles } from '@material-ui/core/styles'
+import { withStyles } from '../styles'
 
 const customStyles = () => ({
   qualifier: {

react/IntentDialogOpener/IntentDialogOpener.md

@@ -1,5 +1,5 @@
 ```jsx
-import { withStyles } from '@material-ui/core/styles'
+import { withStyles } from 'cozy-ui/transpiled/react/styles'
 import IntentDialogOpener from 'cozy-ui/transpiled/react/IntentDialogOpener'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 

react/IntentIframe/Readme.md

@@ -29,7 +29,7 @@ Sometimes you have to render an Intent inside a modal, and handle the modal open
 This method replaces deprecated `IntentModal` component.
 
 ```jsx
-import { withStyles } from '@material-ui/core/styles'
+import { withStyles } from 'cozy-ui/transpiled/react/styles'
 import { DialogCloseButton } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Dialog from 'cozy-ui/transpiled/react/Dialog'
 import IntentIframe from 'cozy-ui/transpiled/react/IntentIframe'

react/MuiCozyTheme/Divider/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import MuiDivider from '@material-ui/core/Divider'
-import { withStyles } from '@material-ui/core/styles'
+
+import { withStyles } from '../../styles'
 import { normalTheme } from '../theme'
 import TextDivider from './TextDivider'
 

react/MuiCozyTheme/List/index.js

@@ -1,6 +1,7 @@
-import { withStyles } from '@material-ui/core/styles'
 import List from '@material-ui/core/List'
 
+import { withStyles } from '../../styles'
+
 export const BorderedList = withStyles({
   root: {
     borderTop: '1px solid var(--silver)'

react/MuiCozyTheme/Menus/index.js

@@ -3,16 +3,15 @@
 // we have to recompose the Menu component ourselves with basic Mui component
 
 import React, { Component } from 'react'
-
-import MenuButton from '../../Button'
 import PropTypes from 'prop-types'
-
 import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import Grow from '@material-ui/core/Grow'
 import Popper from '@material-ui/core/Popper'
 import Paper from '@material-ui/core/Paper'
 import MenuList from '@material-ui/core/MenuList'
-import { withStyles } from '@material-ui/core/styles'
+
+import { withStyles } from '../../styles'
+import MenuButton from '../../Button'
 
 const styles = {
   root: {

react/MuiCozyTheme/index.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { MuiThemeProvider } from '@material-ui/core/styles'
+
+import { ThemeProvider } from '../styles'
 import { getTheme } from './theme'
 
 const MuiCozyTheme = ({ variant, children }) => {
   const theme = getTheme(variant)
-  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
 }
 
 MuiCozyTheme.propTypes = {

react/MuiCozyTheme/makeOverrides.js

@@ -1,4 +1,4 @@
-import { alpha, lighten, darken } from '@material-ui/core/styles'
+import { alpha, lighten, darken } from '../styles'
 
 const SWITCH_BAR_WIDTH = 25
 

react/MuiCozyTheme/makeTheme.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import { createTheme } from '@material-ui/core/styles'
 
+import { createTheme } from '../styles'
 import { getCssVariableValue } from '../utils/color'
 import isTesting from '../helpers/isTesting'
 import AccordionExpandIcon from './AccordionExpandIcon'

react/Paper/Readme.md

@@ -4,7 +4,7 @@ import Variants from 'cozy-ui/docs/components/Variants';
 import Paper from 'cozy-ui/transpiled/react/Paper';
 import Stack from 'cozy-ui/transpiled/react/Stack';
 import Typography from 'cozy-ui/transpiled/react/Typography';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from 'cozy-ui/transpiled/react/styles';
 
 const styles = theme => ({
   root: {

react/ProgressionBanner/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
 
+import { withStyles } from '../styles'
 import Banner from '../Banner'
 import { LinearProgress } from '../Progress'
 import Typography from '../Typography'

react/UploadQueue/index.jsx

@@ -1,11 +1,11 @@
 import React, { Component, useState } from 'react'
 import cx from 'classnames'
-import { withStyles } from '@material-ui/core/styles'
 import LinearProgress from '@material-ui/core/LinearProgress'
 import { useIntervalWhen } from 'rooks'
 
 import { splitFilename } from 'cozy-client/dist/models/file'
 
+import { withStyles } from '../styles'
 import CrossIcon from '../Icons/Cross'
 import WarningIcon from '../Icons/Warning'
 import CheckIcon from '../Icons/Check'

react/Viewer/components/InformationPanel.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Drawer from '@material-ui/core/Drawer'
-import { withStyles } from '@material-ui/core/styles'
+
+import { withStyles } from '../../styles'
 
 export const infoWidth = '22rem'
 

react/Viewer/components/ViewerControls.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import flow from 'lodash/flow'
 import cx from 'classnames'
 import Hammer from 'hammerjs'
-import { withStyles } from '@material-ui/core/styles'
 
+import { withStyles } from '../../styles'
 import withBreakpoints from '../../helpers/withBreakpoints'
 
 import { toolbarPropsPropType } from '../index'