From 61b59f63fb37128a05c2a0e566cf7657a5eeda05 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Wed, 19 Jan 2022 09:22:24 +0200
Subject: [PATCH] Clean up MuiCircularProgress components
---
src/client/components/App.js | 5 +++++
src/client/components/facet_bar/FacetInfo.js | 3 +--
src/client/components/facet_bar/HierarchicalFacet.js | 3 +--
src/client/components/facet_bar/LeafletMapDialog.js | 4 ++--
src/client/components/facet_bar/RangeFacet.js | 5 ++---
src/client/components/facet_bar/SearchField.js | 7 ++++---
src/client/components/facet_bar/SliderFacet.js | 5 ++---
src/client/components/facet_bar/TextFacet.js | 7 ++++---
src/client/components/facet_results/ApexCharts.js | 5 ++---
src/client/components/facet_results/Deck.js | 5 ++---
src/client/components/facet_results/LeafletMap.js | 3 +--
.../components/facet_results/ReactVirtualizedList.js | 5 ++---
.../components/facet_results/ReactVirtualizedTable.js | 5 ++---
src/client/components/facet_results/ResultTable.js | 3 +--
src/client/components/main_layout/InstancePage.js | 5 ++---
src/client/index.js | 9 +++++++--
16 files changed, 40 insertions(+), 39 deletions(-)
diff --git a/src/client/components/App.js b/src/client/components/App.js
index e77e0c0c..600109f8 100644
--- a/src/client/components/App.js
+++ b/src/client/components/App.js
@@ -47,6 +47,11 @@ const theme = createTheme({
}
}
},
+ MuiCircularProgress: {
+ defaultProps: {
+ thickness: 5
+ }
+ },
MuiIconButton: {
styleOverrides: {
root: {
diff --git a/src/client/components/facet_bar/FacetInfo.js b/src/client/components/facet_bar/FacetInfo.js
index 47d3c4de..92b79715 100644
--- a/src/client/components/facet_bar/FacetInfo.js
+++ b/src/client/components/facet_bar/FacetInfo.js
@@ -9,7 +9,6 @@ import Divider from '@mui/material/Divider'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import CircularProgress from '@mui/material/CircularProgress'
-import { purple } from '@mui/material/colors'
/**
* A component for fetching and displaying the number of results, and displaying active filters.
@@ -90,7 +89,7 @@ class FacetInfo extends React.Component {
return (
<>
{this.props.fetchingResultCount
- ? <CircularProgress style={{ color: purple[500] }} thickness={5} size={26} />
+ ? <CircularProgress size={26} />
: (
<Typography
component='h2'
diff --git a/src/client/components/facet_bar/HierarchicalFacet.js b/src/client/components/facet_bar/HierarchicalFacet.js
index 3a9dc18f..2655ad5d 100644
--- a/src/client/components/facet_bar/HierarchicalFacet.js
+++ b/src/client/components/facet_bar/HierarchicalFacet.js
@@ -15,7 +15,6 @@ import NavigateNextIcon from '@mui/icons-material/NavigateNext'
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'
import Typography from '@mui/material/Typography'
import { generateLabelForMissingValue } from '../../helpers/helpers'
-import { purple } from '@mui/material/colors'
const styles = () => ({
facetSearchContainer: {
@@ -305,7 +304,7 @@ class HierarchicalFacet extends Component {
{isFetching
? (
<div className={classes.spinnerContainer}>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ <CircularProgress />
</div>
)
: (
diff --git a/src/client/components/facet_bar/LeafletMapDialog.js b/src/client/components/facet_bar/LeafletMapDialog.js
index 51deda91..e4c8b583 100644
--- a/src/client/components/facet_bar/LeafletMapDialog.js
+++ b/src/client/components/facet_bar/LeafletMapDialog.js
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import intl from 'react-intl-universal'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
@@ -84,7 +84,7 @@ class LeafletMapDialog extends React.Component {
>
{intl.get(`perspectives.${perspectiveID}.searchByArea`)}
{spatialResultsFetching
- ? <CircularProgress className={classes.rightIcon} color='inherit' size={24} />
+ ? <CircularProgress className={classes.rightIcon} size={24} />
: <CropFreeIcon className={classes.rightIcon} />}
</Button>
diff --git a/src/client/components/facet_bar/RangeFacet.js b/src/client/components/facet_bar/RangeFacet.js
index fb423b82..2783d997 100644
--- a/src/client/components/facet_bar/RangeFacet.js
+++ b/src/client/components/facet_bar/RangeFacet.js
@@ -1,12 +1,11 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import CircularProgress from '@mui/material/CircularProgress'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import TextField from '@mui/material/TextField'
import Button from '@mui/material/Button'
import InputAdornment from '@mui/material/InputAdornment'
import { has } from 'lodash'
-import { purple } from '@mui/material/colors';
const styles = theme => ({
root: {
@@ -101,7 +100,7 @@ class RangeFacet extends Component {
if (isFetching) {
return (
<div className={classes.spinnerContainer}>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ <CircularProgress />
</div>
)
} else {
diff --git a/src/client/components/facet_bar/SearchField.js b/src/client/components/facet_bar/SearchField.js
index 7e15e289..6330f2f3 100644
--- a/src/client/components/facet_bar/SearchField.js
+++ b/src/client/components/facet_bar/SearchField.js
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import intl from 'react-intl-universal'
import IconButton from '@mui/material/IconButton'
import SearchIcon from '@mui/icons-material/Search'
@@ -89,7 +89,7 @@ class SearchField extends React.Component {
let searchButton = null
if (this.props.search.textResultsFetching) {
searchButton = (
- <IconButton aria-label='Search places' size="large">
+ <IconButton aria-label='Search places' size='large'>
<CircularProgress size={24} />
</IconButton>
)
@@ -99,7 +99,8 @@ class SearchField extends React.Component {
aria-label='Search'
onClick={this.handleClick}
onMouseDown={this.handleMouseDown}
- size="large">
+ size='large'
+ >
<SearchIcon />
</IconButton>
)
diff --git a/src/client/components/facet_bar/SliderFacet.js b/src/client/components/facet_bar/SliderFacet.js
index eab4bc82..415248ab 100644
--- a/src/client/components/facet_bar/SliderFacet.js
+++ b/src/client/components/facet_bar/SliderFacet.js
@@ -2,12 +2,11 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import intl from 'react-intl-universal'
import CircularProgress from '@mui/material/CircularProgress'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import Slider from '@mui/material/Slider'
import TextField from '@mui/material/TextField'
import Button from '@mui/material/Button'
import { yearToISOString, ISOStringToYear } from './FacetHelpers'
-import { purple } from '@mui/material/colors';
const styles = theme => ({
root: {
@@ -169,7 +168,7 @@ class SliderFacet extends Component {
if (isFetching || start == null || end == null || min == null || max == null) {
return (
<div className={classes.spinnerContainer}>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ <CircularProgress />
</div>
)
}
diff --git a/src/client/components/facet_bar/TextFacet.js b/src/client/components/facet_bar/TextFacet.js
index 6fcd04af..7b2d6723 100644
--- a/src/client/components/facet_bar/TextFacet.js
+++ b/src/client/components/facet_bar/TextFacet.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import intl from 'react-intl-universal'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import IconButton from '@mui/material/IconButton'
import SearchIcon from '@mui/icons-material/Search'
import Input from '@mui/material/Input'
@@ -70,7 +70,7 @@ class TextFacet extends React.Component {
const textResultsFetching = false
if (textResultsFetching) {
searchButton = (
- <IconButton aria-label={placeholder} size="large">
+ <IconButton aria-label={placeholder} size='large'>
<CircularProgress size={24} />
</IconButton>
)
@@ -80,7 +80,8 @@ class TextFacet extends React.Component {
aria-label='search'
onClick={this.handleClick}
onMouseDown={this.handleMouseDown}
- size="large">
+ size='large'
+ >
<SearchIcon />
</IconButton>
)
diff --git a/src/client/components/facet_results/ApexCharts.js b/src/client/components/facet_results/ApexCharts.js
index 59858ac6..7cdd33b0 100644
--- a/src/client/components/facet_results/ApexCharts.js
+++ b/src/client/components/facet_results/ApexCharts.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import intl from 'react-intl-universal'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import ApexCharts from 'apexcharts'
import CircularProgress from '@mui/material/CircularProgress'
import MenuItem from '@mui/material/MenuItem'
@@ -10,7 +10,6 @@ import Select from '@mui/material/Select'
import Typography from '@mui/material/Typography'
import GeneralDialog from '../main_layout/GeneralDialog'
import InstaceList from '../main_layout/InstanceList'
-import { purple } from '@mui/material/colors';
const defaultPadding = 32
const smallScreenPadding = 8
@@ -254,7 +253,7 @@ class ApexChart extends React.Component {
</div>}
{fetching &&
<div style={spinnerContainerStyle}>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ <CircularProgress />
</div>}
{!fetching &&
<div style={chartContainerStyle}>
diff --git a/src/client/components/facet_results/Deck.js b/src/client/components/facet_results/Deck.js
index 4bd78515..e0432907 100644
--- a/src/client/components/facet_results/Deck.js
+++ b/src/client/components/facet_results/Deck.js
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import DeckGL from '@deck.gl/react'
import { ArcLayer, PolygonLayer } from '@deck.gl/layers'
import { HeatmapLayer, HexagonLayer } from '@deck.gl/aggregation-layers'
@@ -9,7 +9,6 @@ import DeckArcLayerLegend from './DeckArcLayerLegend'
import DeckArcLayerDialog from './DeckArcLayerDialog'
import DeckArcLayerTooltip from './DeckArcLayerTooltip'
import CircularProgress from '@mui/material/CircularProgress'
-import { purple } from '@mui/material/colors'
/* Documentation links:
https://deck.gl/#/documentation/getting-started/using-with-react?section=adding-a-base-map
@@ -139,7 +138,7 @@ class Deck extends React.Component {
if (this.props.fetching || this.props.fetchingInstanceAnalysisData) {
return (
<div className={this.props.classes.spinner}>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ <CircularProgress />
</div>
)
}
diff --git a/src/client/components/facet_results/LeafletMap.js b/src/client/components/facet_results/LeafletMap.js
index 8fee6bf6..94da983f 100644
--- a/src/client/components/facet_results/LeafletMap.js
+++ b/src/client/components/facet_results/LeafletMap.js
@@ -5,7 +5,6 @@ import L from 'leaflet'
import { has } from 'lodash'
import CircularProgress from '@mui/material/CircularProgress'
import Box from '@mui/material/Box'
-import { purple } from '@mui/material/colors'
import history from '../../History'
import 'leaflet/dist/leaflet.css' // Official Leaflet styles
@@ -1015,7 +1014,7 @@ class LeafletMap extends React.Component {
zIndex: 500
}}
>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ <CircularProgress />
</Box>}
</Box>
</Box>
diff --git a/src/client/components/facet_results/ReactVirtualizedList.js b/src/client/components/facet_results/ReactVirtualizedList.js
index f7bb9273..14d20088 100644
--- a/src/client/components/facet_results/ReactVirtualizedList.js
+++ b/src/client/components/facet_results/ReactVirtualizedList.js
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react'
import { List, AutoSizer } from 'react-virtualized'
-import makeStyles from '@mui/styles/makeStyles';
+import makeStyles from '@mui/styles/makeStyles'
import Card from '@mui/material/Card'
import CardActionArea from '@mui/material/CardActionArea'
import CardContent from '@mui/material/CardContent'
@@ -9,7 +9,6 @@ import Typography from '@mui/material/Typography'
import intl from 'react-intl-universal'
import { Link } from 'react-router-dom'
import CircularProgress from '@mui/material/CircularProgress'
-import { purple } from '@mui/material/colors';
const useStyles = makeStyles(theme => ({
root: props => {
@@ -170,7 +169,7 @@ const ReactVirtualizedList = props => {
{(!validResults() || props.perspectiveState.results.fetching)
? (
<div className={classes.progressContainer}>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ <CircularProgress />
</div>
)
: (
diff --git a/src/client/components/facet_results/ReactVirtualizedTable.js b/src/client/components/facet_results/ReactVirtualizedTable.js
index 6c73fd56..519298f8 100644
--- a/src/client/components/facet_results/ReactVirtualizedTable.js
+++ b/src/client/components/facet_results/ReactVirtualizedTable.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import TableCell from '@mui/material/TableCell'
import TableSortLabel from '@mui/material/TableSortLabel'
import Tooltip from '@mui/material/Tooltip'
@@ -10,7 +10,6 @@ import Paper from '@mui/material/Paper'
import { AutoSizer, Column, Table } from 'react-virtualized'
import intl from 'react-intl-universal'
import CircularProgress from '@mui/material/CircularProgress'
-import { purple } from '@mui/material/colors';
const styles = theme => ({
flexContainer: {
@@ -211,7 +210,7 @@ const ReactVirtualizedTable = props => {
{fetching
? (
<div style={progressContainerStyle}>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ <CircularProgress />
</div>
)
: (
diff --git a/src/client/components/facet_results/ResultTable.js b/src/client/components/facet_results/ResultTable.js
index 00fef80c..4922aedc 100644
--- a/src/client/components/facet_results/ResultTable.js
+++ b/src/client/components/facet_results/ResultTable.js
@@ -16,7 +16,6 @@ import ResultTableHead from './ResultTableHead'
import TablePagination from '@mui/material/TablePagination'
import ResultTablePaginationActions from './ResultTablePaginationActions'
import history from '../../History'
-import { purple } from '@mui/material/colors'
const styles = theme => ({
tableContainer: props => ({
@@ -326,7 +325,7 @@ class ResultTable extends React.Component {
{fetching
? (
<div className={classes.progressContainer}>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ <CircularProgress />
</div>
)
: (
diff --git a/src/client/components/main_layout/InstancePage.js b/src/client/components/main_layout/InstancePage.js
index db882a43..b7ff28ea 100644
--- a/src/client/components/main_layout/InstancePage.js
+++ b/src/client/components/main_layout/InstancePage.js
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import Paper from '@mui/material/Paper'
import Typography from '@mui/material/Typography'
import CircularProgress from '@mui/material/CircularProgress'
@@ -9,7 +9,6 @@ import ResultClassRoute from '../facet_results/ResultClassRoute'
import { getLocalIDFromAppLocation, createURIfromLocalID } from '../../helpers/helpers'
import { Route, Redirect } from 'react-router-dom'
import { has } from 'lodash'
-import { purple } from '@mui/material/colors';
const styles = () => ({
root: {
@@ -121,7 +120,7 @@ class InstancePage extends React.Component {
<Paper square className={classes.content}>
{fetching && !hasTableData &&
<div className={classes.spinnerContainer}>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ <CircularProgress />
</div>}
{!hasTableData &&
<div className={classes.spinnerContainer}>
diff --git a/src/client/index.js b/src/client/index.js
index f6440270..850ac98d 100644
--- a/src/client/index.js
+++ b/src/client/index.js
@@ -16,7 +16,7 @@ import 'react-redux-toastr/lib/css/react-redux-toastr.min.css'
import 'mapbox-gl/dist/mapbox-gl.css'
import portalConfig from '../configs/portalConfig.json'
-const { localeConfig } = portalConfig
+const { localeConfig, layoutConfig } = portalConfig
const store = configureStore()
// init locale
@@ -54,7 +54,12 @@ render(
justifyContent: 'center'
}}
>
- <CircularProgress color='primary' />
+ <CircularProgress
+ sx={{
+ color: layoutConfig.colorPalette.primary.main
+ }}
+ thickness={5}
+ />
</div>
}
>
--
GitLab