refactor: Use makeStyles from cozy-ui instead of mui

this is the same comp at the end, but this way we have only one way to import it

react/Alert/index.jsx

@@ -2,8 +2,8 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 import MuiAlert from '@material-ui/lab/Alert'
-import { makeStyles } from '@material-ui/core/styles'
 
+import { makeStyles } from '../styles'
 import Icon from '../Icon'
 import CheckCircleIcon from '../Icons/CheckCircle'
 import WarningIcon from '../Icons/Warning'

react/CircleButton/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { makeStyles } from '@material-ui/core/styles'
 
+import { makeStyles } from '../styles'
 import Box from '../Box'
 import IconButton from '../IconButton'
 import Typography from '../Typography'

react/DropdownText/index.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { makeStyles } from '@material-ui/core/styles'
 
+import { makeStyles } from '../styles'
 import Typography from '../Typography'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'

react/FilePicker/FilePickerBodyItem.jsx

@@ -2,10 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 import filesize from 'filesize'
-import { makeStyles } from '@material-ui/core/styles'
 
 import { models } from 'cozy-client'
 
+import { makeStyles } from '../styles'
 import ListItem from '../MuiCozyTheme/ListItem'
 import ListItemIcon from '../MuiCozyTheme/ListItemIcon'
 import ListItemText from '../ListItemText'

react/FilePicker/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, memo } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
 import PropTypes from 'prop-types'
 
+import { makeStyles } from '../styles'
 import { FixedDialog } from '../CozyDialogs'
 import FilePickerHeader from './FilePickerHeader'
 import FilePickerFooter from './FilePickerFooter'

react/Icon/Readme.md

@@ -23,9 +23,9 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Dialog from 'cozy-ui/transpiled/react/CozyDialogs/Dialog'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
-import { makeStyles } from '@material-ui/styles'
 import cx from 'classnames'
 
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 import Album from 'cozy-ui/transpiled/react/Icons/Album'
 import AlbumAdd from 'cozy-ui/transpiled/react/Icons/AlbumAdd'
 import AlbumRemove from 'cozy-ui/transpiled/react/Icons/AlbumRemove'
@@ -672,9 +672,9 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Dialog from 'cozy-ui/transpiled/react/CozyDialogs/Dialog'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
-import { makeStyles } from '@material-ui/styles'
 import cx from 'classnames'
 
+import { makeStyles } from 'cozy-ui/transpiled/react/styles';
 import Accounts from 'cozy-ui/transpiled/react/Icons/Accounts'
 import Apps from 'cozy-ui/transpiled/react/Icons/Apps'
 import BankAccounts from 'cozy-ui/transpiled/react/Icons/BankAccounts'

react/PieChart/index.jsx

@@ -4,10 +4,10 @@ import cx from 'classnames'
 import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js'
 import { Doughnut } from 'react-chartjs-2'
 import { useTheme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
 import set from 'lodash/set'
 import cloneDeep from 'lodash/cloneDeep'
 
+import { makeStyles } from '../styles'
 import Typography from '../Typography'
 import isTesting from '../helpers/isTesting'
 

react/SquareAppIcon/index.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import { makeStyles } from '@material-ui/styles'
 import get from 'lodash/get'
 
+import { makeStyles } from '../styles'
 import AppIcon from '../AppIcon'
 import Badge from '../Badge'
 import InfosBadge from '../InfosBadge'

react/Viewer/Footer/FooterContent.jsx

@@ -1,10 +1,9 @@
 import React, { useMemo, Children, cloneElement, isValidElement } from 'react'
 import PropTypes from 'prop-types'
-import { makeStyles } from '@material-ui/core/styles'
 import cx from 'classnames'
 
 import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
-
+import { makeStyles } from '../../styles'
 import { isValidForPanel } from '../helpers'
 import BottomSheetContent from './BottomSheetContent'
 

react/Viewer/Readme.md

@@ -35,8 +35,8 @@ The `Viewer` can display an **information panel** to show additional information
 ### Demo
 
 ```jsx
-import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
+import { makeStyles } from 'cozy-ui/transpiled/react/styles';
 import Variants from 'cozy-ui/docs/components/Variants';
 import Card from 'cozy-ui/transpiled/react/Card';
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox';

react/Viewer/components/Toolbar.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 import flow from 'lodash/flow'
-import { makeStyles } from '@material-ui/core/styles'
 
 import { useClient } from 'cozy-client'
 
 import withBreakpoints from '../../helpers/withBreakpoints'
+import { makeStyles } from '../../styles'
 import Button from '../../Button'
 import IconButton from '../../IconButton'
 import Icon from '../../Icon'