fix: Use @material-ui/core styles - fixes styling issues e.g. report …

…printing

package.json

@@ -97,7 +97,6 @@
     "@material-ui/core": "^4.4.2",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/pickers": "^3.2.6",
-    "@material-ui/styles": "^4.4.1",
     "@segment/isodate": "^1.0.3",
     "clone-deep": "^4.0.1",
     "clsx": "^1.0.4",

src/MapView/MapViewContent.js

@@ -13,7 +13,7 @@ import mapboxgl from 'mapbox-gl'
 import type { Observation } from 'mapeo-schema'
 
 import { getLastImage } from '../utils/helpers'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import ObservationLayer from './ObservationLayer'
 import Popup from './Popup'
 import type { CameraOptions, CommonViewContentProps } from '../types'

src/MapView/Popup.js

@@ -11,7 +11,7 @@ import Typography from '@material-ui/core/Typography'
 import clsx from 'clsx'
 
 import Image from '../internal/Image'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles({
   wrapper: {

src/MediaView/ImageGrid.js

@@ -4,7 +4,7 @@ import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeGrid as Grid } from 'react-window'
 import getScrollBarWidth from 'get-scrollbar-width'
 
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import type { Observation } from 'mapeo-schema'
 
 const useStyles = makeStyles({

src/ObservationDialog/MediaCarousel.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { useState } from 'react'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import IconButton from '@material-ui/core/IconButton'
 import NavigateNextIcon from '@material-ui/icons/NavigateNext'
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'

src/ObservationDialog/Select.js

@@ -7,7 +7,7 @@ import Paper from '@material-ui/core/Paper'
 import MenuItem from '@material-ui/core/MenuItem'
 import matchSorter from 'match-sorter'
 import { useIntl, defineMessages } from 'react-intl'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 
 import type { SelectableFieldValue, SelectOptions } from '../types'
 

src/ReportView/DetailsTable.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'

src/ReportView/HideFieldsButton.js

@@ -8,7 +8,7 @@ import ListItemText from '@material-ui/core/ListItemText'
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
 import Switch from '@material-ui/core/Switch'
 import Button from '@material-ui/core/Button'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import { defineMessages, FormattedMessage } from 'react-intl'
 
 import ToolbarButton from '../internal/ToolbarButton'

src/ReportView/ReportPageContent.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react'
-import { makeStyles } from '@material-ui/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
 import FeatureHeader from '../internal/FeatureHeader'
 import Image from '../internal/Image'

src/ReportView/ReportPaper.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import Paper from '@material-ui/core/Paper'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import insertCss from 'insert-css'
 import clsx from 'clsx'
 

src/ReportView/ReportViewContent.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { useState, useMemo } from 'react'
-import { makeStyles } from '@material-ui/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import getScrollBarWidth from 'get-scrollbar-width'
 import {
   AutoSizer,

src/internal/FeatureHeader.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import CardHeader from '@material-ui/core/CardHeader'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import { FormattedTime, FormattedMessage } from 'react-intl'
 
 import PlaceIcon from '@material-ui/icons/Place'

src/internal/FormattedValue.js

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { FormattedDate, FormattedTime } from 'react-intl'
 
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import { coerceValue } from '../lib/data_analysis/value_types'
 import * as fieldTypes from '../constants/field_types'
 import * as valueTypes from '../constants/value_types'

src/internal/Image.js

@@ -3,7 +3,7 @@ import React from 'react'
 import Img from 'react-image'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import BrokenImageIcon from '@material-ui/icons/BrokenImage'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 // import * as CSS from 'csstype'
 
 const useStyles = makeStyles({

src/internal/Toolbar.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import AppBar from '@material-ui/core/AppBar'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles({
   root: {

src/internal/ToolbarButton.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react'
-import { makeStyles } from '../utils/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
 
 const useStyles = makeStyles({