diff --git a/.gitignore b/.gitignore index 05c6817d3..7568f69cb 100644 --- a/.gitignore +++ b/.gitignore @@ -227,4 +227,3 @@ tags # include wordpress tags function !src/lib/wordpress/tags -.yarn/* \ No newline at end of file diff --git a/.yarnrc.yml b/.yarnrc.yml deleted file mode 100644 index 3186f3f07..000000000 --- a/.yarnrc.yml +++ /dev/null @@ -1 +0,0 @@ -nodeLinker: node-modules diff --git a/package.json b/package.json index 17567d6ba..3023bf25b 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "author": "Code for Africa (https://codeforafrica.org)", "license": "GPL-3.0-or-later", "homepage": "https://dev.pesayetu.pesacheck.org", + "private": false, "scripts": { "dev": "next dev", "format": "yarn prettier --write --ignore-path './.gitignore' '**/*.+(json|md|yml)' '.'", @@ -23,14 +24,11 @@ }, "dependencies": { "@apollo/client": "^3.3.21", - "@commons-ui/core": "^0.1.0", - "@emotion/react": "^11.10.4", - "@emotion/styled": "^11.10.4", - "@mui/lab": "^5.0.0-alpha.99", - "@mui/material": "^5.10.5", - "@mui/styles": "^5.10.3", - "@mui/utils": "^5.10.3", - "@reactour/tour": "^3.4.0", + "@commons-ui/core": "^0.1.0-alpha.6", + "@material-ui/core": "^4.12.1", + "@material-ui/lab": "^4.0.0-alpha.60", + "@material-ui/utils": "^4.11.2", + "@reactour/tour": "^2.0.0", "@svgr/webpack": "^5.5.0", "aws-sdk": "^2.1005.0", "clsx": "^1.1.1", @@ -112,6 +110,8 @@ ], "lint-staged": { "*.js": [ + "yarn codemod-staged-optimal-imports", + "yarn codemod-staged-top-level-imports", "yarn lint-staged" ], "*.{json,md}": [ @@ -123,7 +123,6 @@ ] }, "engines": { - "node": ">=18.0.0" - }, - "packageManager": "yarn@1.22.19" + "node": ">=16.0.0 <17.0.0" + } } diff --git a/src/components/AboutHero/index.js b/src/components/AboutHero/index.js index 428d2205d..d880c3eb7 100644 --- a/src/components/AboutHero/index.js +++ b/src/components/AboutHero/index.js @@ -1,4 +1,4 @@ -import { Grid } from "@mui/material"; +import { Grid } from "@material-ui/core"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/AboutHero/useStyles.js b/src/components/AboutHero/useStyles.js index 5d5800010..5e5a13b96 100644 --- a/src/components/AboutHero/useStyles.js +++ b/src/components/AboutHero/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ breakpoints, typography }) => ({ root: { diff --git a/src/components/AboutProject/index.js b/src/components/AboutProject/index.js index 29344b57a..c8cd93d2c 100644 --- a/src/components/AboutProject/index.js +++ b/src/components/AboutProject/index.js @@ -1,4 +1,4 @@ -import { Grid, Typography, Button } from "@mui/material"; +import { Grid, Typography, Button } from "@material-ui/core"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/AboutProject/useStyles.js b/src/components/AboutProject/useStyles.js index 3a8bc6d73..d7f200c81 100644 --- a/src/components/AboutProject/useStyles.js +++ b/src/components/AboutProject/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({ root: { diff --git a/src/components/AboutTeam/index.js b/src/components/AboutTeam/index.js index 456fce63e..ef9ee5753 100644 --- a/src/components/AboutTeam/index.js +++ b/src/components/AboutTeam/index.js @@ -1,5 +1,5 @@ -import { Grid, Typography, useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { Grid, Typography, useMediaQuery } from "@material-ui/core"; +import { useTheme } from "@material-ui/core/styles"; import { chunk, uniqueId } from "lodash"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/AboutTeam/useStyles.js b/src/components/AboutTeam/useStyles.js index c5b361ba5..77a779f27 100644 --- a/src/components/AboutTeam/useStyles.js +++ b/src/components/AboutTeam/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({ root: { diff --git a/src/components/Button/index.stories.js b/src/components/Button/index.stories.js index 53367e12a..95818c29c 100644 --- a/src/components/Button/index.stories.js +++ b/src/components/Button/index.stories.js @@ -1,5 +1,5 @@ /* eslint-disable import/no-anonymous-default-export */ -import { Button } from "@mui/material"; +import { Button } from "@material-ui/core"; import React from "react"; export default { diff --git a/src/components/Card/ActionArea.js b/src/components/Card/ActionArea.js index 32b588a06..a7e720616 100644 --- a/src/components/Card/ActionArea.js +++ b/src/components/Card/ActionArea.js @@ -1,5 +1,5 @@ -import { CardActionArea } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { CardActionArea } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/Card/Content.js b/src/components/Card/Content.js index cf860bf01..10939802d 100644 --- a/src/components/Card/Content.js +++ b/src/components/Card/Content.js @@ -1,6 +1,6 @@ import { RichTypography } from "@commons-ui/core"; -import { CardContent } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { CardContent } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/Card/Media.js b/src/components/Card/Media.js index c39405838..fd8fd7114 100644 --- a/src/components/Card/Media.js +++ b/src/components/Card/Media.js @@ -1,5 +1,5 @@ import { RichTypography } from "@commons-ui/core"; -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/Card/index.js b/src/components/Card/index.js index 5d9a70808..d293d180b 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -1,4 +1,4 @@ -import { Card as MuiCard } from "@mui/material"; +import { Card as MuiCard } from "@material-ui/core"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/Card/useStyles.js b/src/components/Card/useStyles.js index 0910736eb..8d3a556e5 100644 --- a/src/components/Card/useStyles.js +++ b/src/components/Card/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ breakpoints, typography }) => ({ root: ({ squareMedia }) => ({ diff --git a/src/components/Carousel/index.js b/src/components/Carousel/index.js index 285b355e7..2b500f852 100644 --- a/src/components/Carousel/index.js +++ b/src/components/Carousel/index.js @@ -1,4 +1,4 @@ -import { deepmerge } from "@mui/utils"; +import { deepmerge } from "@material-ui/utils"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/Carousel/useStyles.js b/src/components/Carousel/useStyles.js index 1a22978d4..0701bf54f 100644 --- a/src/components/Carousel/useStyles.js +++ b/src/components/Carousel/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ palette, typography }) => ({ root: {}, diff --git a/src/components/DataIndicators/Icon.js b/src/components/DataIndicators/Icon.js index f16dbe53f..47c522d00 100644 --- a/src/components/DataIndicators/Icon.js +++ b/src/components/DataIndicators/Icon.js @@ -1,4 +1,4 @@ -import { ButtonBase, Typography } from "@mui/material"; +import { ButtonBase, Typography } from "@material-ui/core"; import Image from "next/image"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/DataIndicators/IndicatorPanel.js b/src/components/DataIndicators/IndicatorPanel.js index e6e93855c..2b9207564 100644 --- a/src/components/DataIndicators/IndicatorPanel.js +++ b/src/components/DataIndicators/IndicatorPanel.js @@ -1,6 +1,6 @@ import { RichTypography } from "@commons-ui/core"; -import { ButtonBase, Slide } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { ButtonBase, Slide } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/DataIndicators/index.js b/src/components/DataIndicators/index.js index 7218986f3..5c4a5c59f 100644 --- a/src/components/DataIndicators/index.js +++ b/src/components/DataIndicators/index.js @@ -4,8 +4,8 @@ import { Dialog, Slide, useMediaQuery, -} from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +} from "@material-ui/core"; +import { useTheme } from "@material-ui/core/styles"; import clsx from "clsx"; import PropTypes from "prop-types"; import React, { useState } from "react"; diff --git a/src/components/DataIndicators/useStyles.js b/src/components/DataIndicators/useStyles.js index eb2deb203..e55928e58 100644 --- a/src/components/DataIndicators/useStyles.js +++ b/src/components/DataIndicators/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({ root: { diff --git a/src/components/DataSources/index.js b/src/components/DataSources/index.js index 3a6eff84f..641973d6a 100644 --- a/src/components/DataSources/index.js +++ b/src/components/DataSources/index.js @@ -1,4 +1,4 @@ -import { Grid, Typography } from "@mui/material"; +import { Grid, Typography } from "@material-ui/core"; import Image from "next/image"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/DataSources/useStyles.js b/src/components/DataSources/useStyles.js index d7412b00f..eeab555fb 100644 --- a/src/components/DataSources/useStyles.js +++ b/src/components/DataSources/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography, palette }) => ({ root: { diff --git a/src/components/DataVisualisationGuide/index.js b/src/components/DataVisualisationGuide/index.js index 248983f7a..dbdc77eee 100644 --- a/src/components/DataVisualisationGuide/index.js +++ b/src/components/DataVisualisationGuide/index.js @@ -1,6 +1,6 @@ import { RichTypography } from "@commons-ui/core"; -import { Box, Grid, useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { Grid, Hidden, useMediaQuery } from "@material-ui/core"; +import { useTheme } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React from "react"; @@ -24,14 +24,7 @@ function DataVisualisationGuide({ title, items, ...props }) { {title} - + {items.map(({ imageProps, ...item }) => ( ))} - - + + + {items.map(({ imageProps, ...item }) => ( @@ -68,7 +55,7 @@ function DataVisualisationGuide({ title, items, ...props }) { ))} - + ); diff --git a/src/components/DataVisualisationGuide/useStyles.js b/src/components/DataVisualisationGuide/useStyles.js index 3233946cc..abb0db386 100644 --- a/src/components/DataVisualisationGuide/useStyles.js +++ b/src/components/DataVisualisationGuide/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography, breakpoints }) => ({ root: { diff --git a/src/components/DatasetsAndDocuments/useStyles.js b/src/components/DatasetsAndDocuments/useStyles.js index 402611c07..3c2e39d21 100644 --- a/src/components/DatasetsAndDocuments/useStyles.js +++ b/src/components/DatasetsAndDocuments/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ breakpoints, typography }) => ({ root: { diff --git a/src/components/DropdownSearch/index.js b/src/components/DropdownSearch/index.js index c2a973ccd..da6f1783d 100644 --- a/src/components/DropdownSearch/index.js +++ b/src/components/DropdownSearch/index.js @@ -4,8 +4,8 @@ import { Typography, List, ListItem, -} from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +} from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import Image from "next/image"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; diff --git a/src/components/ExploreOtherTools/index.js b/src/components/ExploreOtherTools/index.js index 19cba4dec..72cd99054 100644 --- a/src/components/ExploreOtherTools/index.js +++ b/src/components/ExploreOtherTools/index.js @@ -1,4 +1,4 @@ -import { Box, Grid, Typography } from "@mui/material"; +import { Grid, Hidden, Typography } from "@material-ui/core"; import PropTypes from "prop-types"; import React from "react"; @@ -20,14 +20,7 @@ const ExploreOtherTools = ({ title, items, ...props }) => { {title} - + {items.map(({ imageProps, ...item }) => ( { /> ))} - - + + {items.slice(0, 4).map(({ imageProps, ...item }) => ( @@ -71,7 +57,7 @@ const ExploreOtherTools = ({ title, items, ...props }) => { ))} - + ); diff --git a/src/components/ExploreOtherTools/useStyles.js b/src/components/ExploreOtherTools/useStyles.js index 15319e15d..f9a435419 100644 --- a/src/components/ExploreOtherTools/useStyles.js +++ b/src/components/ExploreOtherTools/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ breakpoints, typography }) => ({ root: { diff --git a/src/components/ExplorePage/index.js b/src/components/ExplorePage/index.js index 07eb9cf16..c4f4067eb 100644 --- a/src/components/ExplorePage/index.js +++ b/src/components/ExplorePage/index.js @@ -1,4 +1,4 @@ -import { Box } from "@mui/material"; +import { Hidden } from "@material-ui/core"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; @@ -112,14 +112,7 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { } return ( <> - +
-
+ ({ diff --git a/src/components/FeaturedStoryCard/index.js b/src/components/FeaturedStoryCard/index.js index 3f4100e91..72eb22d35 100644 --- a/src/components/FeaturedStoryCard/index.js +++ b/src/components/FeaturedStoryCard/index.js @@ -1,4 +1,4 @@ -import { Grid } from "@mui/material"; +import { Grid } from "@material-ui/core"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/FeaturedStoryCard/useStyles.js b/src/components/FeaturedStoryCard/useStyles.js index d8425ec6b..3688ff11c 100644 --- a/src/components/FeaturedStoryCard/useStyles.js +++ b/src/components/FeaturedStoryCard/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({ root: { diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index bed142932..e7ce5f66b 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -7,7 +7,7 @@ import { LogoButton, Copyright, } from "@commons-ui/core"; -import { Grid } from "@mui/material"; +import { Grid } from "@material-ui/core"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/Footer/useStyles.js b/src/components/Footer/useStyles.js index 603fb2cc9..0f95f97e7 100644 --- a/src/components/Footer/useStyles.js +++ b/src/components/Footer/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ root: { diff --git a/src/components/HURUmap/CategoryHeader/index.js b/src/components/HURUmap/CategoryHeader/index.js index d9ad378c5..185752c1f 100644 --- a/src/components/HURUmap/CategoryHeader/index.js +++ b/src/components/HURUmap/CategoryHeader/index.js @@ -1,5 +1,5 @@ import { RichTypography } from "@commons-ui/core"; -import { Typography } from "@mui/material"; +import { Typography } from "@material-ui/core"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/HURUmap/CategoryHeader/useStyles.js b/src/components/HURUmap/CategoryHeader/useStyles.js index af084f80a..552d020e6 100644 --- a/src/components/HURUmap/CategoryHeader/useStyles.js +++ b/src/components/HURUmap/CategoryHeader/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography }) => ({ root: {}, diff --git a/src/components/HURUmap/Chart/Filters.js b/src/components/HURUmap/Chart/Filters.js index a172234d8..0a9209023 100644 --- a/src/components/HURUmap/Chart/Filters.js +++ b/src/components/HURUmap/Chart/Filters.js @@ -1,5 +1,5 @@ -import { ButtonBase } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { ButtonBase } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React, { useEffect, useState, useCallback } from "react"; diff --git a/src/components/HURUmap/Chart/index.js b/src/components/HURUmap/Chart/index.js index 30b8b8f08..ddc1fbba0 100644 --- a/src/components/HURUmap/Chart/index.js +++ b/src/components/HURUmap/Chart/index.js @@ -1,6 +1,5 @@ -import { useMediaQuery } from "@mui/material"; -import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; +import { useMediaQuery } from "@material-ui/core"; +import { makeStyles, ThemeProvider } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React, { useEffect, useState, useRef, useCallback } from "react"; import ReactDOMServer from "react-dom/server"; @@ -84,21 +83,19 @@ function Chart({ return; } el.innerHTML = ReactDOMServer.renderToString( - - - - - + + + ); el.classList.add("visible"); diff --git a/src/components/HURUmap/ChartFilter/index.js b/src/components/HURUmap/ChartFilter/index.js index 47f9154ca..9d5cb3c62 100644 --- a/src/components/HURUmap/ChartFilter/index.js +++ b/src/components/HURUmap/ChartFilter/index.js @@ -1,4 +1,4 @@ -import { Grid, IconButton } from "@mui/material"; +import { Grid, IconButton } from "@material-ui/core"; import PropTypes from "prop-types"; import React, { useEffect, useState } from "react"; @@ -119,11 +119,7 @@ function ChartFilter({ )} {index !== "default" && index !== 0 && ( - + diff --git a/src/components/HURUmap/ChartFilter/useStyles.js b/src/components/HURUmap/ChartFilter/useStyles.js index 4cfe9254d..7ae506291 100644 --- a/src/components/HURUmap/ChartFilter/useStyles.js +++ b/src/components/HURUmap/ChartFilter/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({ root: { diff --git a/src/components/HURUmap/ChartTooltip/index.js b/src/components/HURUmap/ChartTooltip/index.js index dbdd6b32c..2af1de998 100644 --- a/src/components/HURUmap/ChartTooltip/index.js +++ b/src/components/HURUmap/ChartTooltip/index.js @@ -1,5 +1,5 @@ -import { Typography, Grid } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Typography, Grid } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/HURUmap/IndicatorTitle/Action.js b/src/components/HURUmap/IndicatorTitle/Action.js index a29226bd0..37bfdfd51 100644 --- a/src/components/HURUmap/IndicatorTitle/Action.js +++ b/src/components/HURUmap/IndicatorTitle/Action.js @@ -7,8 +7,8 @@ import { IconButton, ClickAwayListener, Tooltip, -} from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +} from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React, { useState } from "react"; @@ -62,11 +62,7 @@ function Action({ children, header, icon, title, id, ...props }) { return (
- + {icon} diff --git a/src/components/HURUmap/IndicatorTitle/Download.js b/src/components/HURUmap/IndicatorTitle/Download.js index e6ce49531..cfaa03050 100644 --- a/src/components/HURUmap/IndicatorTitle/Download.js +++ b/src/components/HURUmap/IndicatorTitle/Download.js @@ -1,5 +1,5 @@ -import { ButtonBase, IconButton, Grid, Typography } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { ButtonBase, IconButton, Grid, Typography } from "@material-ui/core"; +import { useTheme } from "@material-ui/core/styles"; import clsx from "clsx"; import Image from "next/image"; import Papa from "papaparse"; @@ -208,7 +208,6 @@ function Download({ onClick={(e) => { setImageLayout(e, index); }} - size="large" > layout diff --git a/src/components/HURUmap/IndicatorTitle/Share.js b/src/components/HURUmap/IndicatorTitle/Share.js index ea10cbfd4..30c1f8628 100644 --- a/src/components/HURUmap/IndicatorTitle/Share.js +++ b/src/components/HURUmap/IndicatorTitle/Share.js @@ -1,4 +1,4 @@ -import { Grid, TextField, Typography, SvgIcon } from "@mui/material"; +import { Grid, TextField, Typography, SvgIcon } from "@material-ui/core"; import clsx from "clsx"; import PropTypes from "prop-types"; import React, { useState, useEffect } from "react"; diff --git a/src/components/HURUmap/IndicatorTitle/index.js b/src/components/HURUmap/IndicatorTitle/index.js index ad3c21361..9f32c8c86 100644 --- a/src/components/HURUmap/IndicatorTitle/index.js +++ b/src/components/HURUmap/IndicatorTitle/index.js @@ -1,6 +1,6 @@ import { RichTypography } from "@commons-ui/core"; -import { Grid } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Grid } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/HURUmap/IndicatorTitle/useStyles.js b/src/components/HURUmap/IndicatorTitle/useStyles.js index 7ac8d4339..3b704621a 100644 --- a/src/components/HURUmap/IndicatorTitle/useStyles.js +++ b/src/components/HURUmap/IndicatorTitle/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ palette, typography }) => ({ root: {}, diff --git a/src/components/HURUmap/KeyMetric/index.js b/src/components/HURUmap/KeyMetric/index.js index a8f6d4ae8..a20abb232 100644 --- a/src/components/HURUmap/KeyMetric/index.js +++ b/src/components/HURUmap/KeyMetric/index.js @@ -1,4 +1,4 @@ -import { Tooltip, Typography, LinearProgress } from "@mui/material"; +import { Tooltip, Typography, LinearProgress } from "@material-ui/core"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/HURUmap/KeyMetric/useStyles.js b/src/components/HURUmap/KeyMetric/useStyles.js index 9f2dc30b4..c2b636d7e 100644 --- a/src/components/HURUmap/KeyMetric/useStyles.js +++ b/src/components/HURUmap/KeyMetric/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography, palette }) => ({ root: { diff --git a/src/components/HURUmap/Location/index.js b/src/components/HURUmap/Location/index.js index 2b625c47c..5ccb2d55b 100644 --- a/src/components/HURUmap/Location/index.js +++ b/src/components/HURUmap/Location/index.js @@ -1,4 +1,4 @@ -import { Box } from "@mui/material"; +import { Box } from "@material-ui/core"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/HURUmap/Location/useStyles.js b/src/components/HURUmap/Location/useStyles.js index a633751c0..44efa2472 100644 --- a/src/components/HURUmap/Location/useStyles.js +++ b/src/components/HURUmap/Location/useStyles.js @@ -1,5 +1,5 @@ -import { alpha } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; +import { alpha } from "@material-ui/core/styles/colorManipulator"; const useStyles = makeStyles(({ palette, typography }) => ({ root: { diff --git a/src/components/HURUmap/LocationHeader/index.js b/src/components/HURUmap/LocationHeader/index.js index d24c7c2e3..745339a56 100644 --- a/src/components/HURUmap/LocationHeader/index.js +++ b/src/components/HURUmap/LocationHeader/index.js @@ -4,7 +4,7 @@ import { IconButton, SvgIcon as MuiSvgIcon, Typography, -} from "@mui/material"; +} from "@material-ui/core"; import PropTypes from "prop-types"; import React from "react"; @@ -36,11 +36,7 @@ const LocationHeader = ({ icon, level, onClick, parent, title, ...props }) => { {onClick ? ( - + ({ root: { diff --git a/src/components/HURUmap/LocationHighlight/index.js b/src/components/HURUmap/LocationHighlight/index.js index 6e1be30f3..dbec9e72e 100644 --- a/src/components/HURUmap/LocationHighlight/index.js +++ b/src/components/HURUmap/LocationHighlight/index.js @@ -1,4 +1,4 @@ -import { Box, Typography } from "@mui/material"; +import { Box, Typography } from "@material-ui/core"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/HURUmap/LocationHighlight/useStyles.js b/src/components/HURUmap/LocationHighlight/useStyles.js index 18c304770..cab654b61 100644 --- a/src/components/HURUmap/LocationHighlight/useStyles.js +++ b/src/components/HURUmap/LocationHighlight/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography }) => ({ root: {}, diff --git a/src/components/HURUmap/LocationTag/index.js b/src/components/HURUmap/LocationTag/index.js index a6fccd361..c828695bc 100644 --- a/src/components/HURUmap/LocationTag/index.js +++ b/src/components/HURUmap/LocationTag/index.js @@ -1,7 +1,7 @@ -import { Box, LinearProgress, Typography, IconButton } from "@mui/material"; -import { alpha } from "@mui/material/styles"; -import { capitalize } from "@mui/material/utils"; -import makeStyles from "@mui/styles/makeStyles"; +import { Box, LinearProgress, Typography, IconButton } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; +import { alpha } from "@material-ui/core/styles/colorManipulator"; +import { capitalize } from "@material-ui/core/utils"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; @@ -111,7 +111,7 @@ function LocationTag({ className={clsx(classes.root, className)} > {variant === "marker" ? ( - + ) : null} diff --git a/src/components/HURUmap/Map/Layers.js b/src/components/HURUmap/Map/Layers.js index 2a131ad8c..c96c145ce 100644 --- a/src/components/HURUmap/Map/Layers.js +++ b/src/components/HURUmap/Map/Layers.js @@ -1,5 +1,4 @@ -import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles, ThemeProvider } from "@material-ui/core/styles"; import L from "leaflet"; import PropTypes from "prop-types"; import React, { useCallback, useEffect, useRef } from "react"; @@ -108,18 +107,16 @@ function Layers({ const pinIcon = L.divIcon({ html: ReactDOMServer.renderToStaticMarkup( - - - - - + + + ), }); @@ -134,16 +131,14 @@ function Layers({ } else { const popUpContent = (level, name) => ReactDOMServer.renderToStaticMarkup( - - - - - + + + ); if (!(isPinOrCompare && feature.properties.code === geography?.code)) { diff --git a/src/components/HURUmap/Map/index.js b/src/components/HURUmap/Map/index.js index 7a55b55a0..b22a7484b 100644 --- a/src/components/HURUmap/Map/index.js +++ b/src/components/HURUmap/Map/index.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; import clsx from "clsx"; import PropTypes from "prop-types"; import React, { useCallback, useEffect, useState } from "react"; diff --git a/src/components/HURUmap/Panel/DesktopPanel/index.js b/src/components/HURUmap/Panel/DesktopPanel/index.js index cf0d57ee6..557a12e54 100644 --- a/src/components/HURUmap/Panel/DesktopPanel/index.js +++ b/src/components/HURUmap/Panel/DesktopPanel/index.js @@ -1,4 +1,4 @@ -import { Drawer } from "@mui/material"; +import { Drawer } from "@material-ui/core"; import PropTypes from "prop-types"; import React, { useRef } from "react"; diff --git a/src/components/HURUmap/Panel/DesktopPanel/useStyles.js b/src/components/HURUmap/Panel/DesktopPanel/useStyles.js index 68b33a367..4759fafdf 100644 --- a/src/components/HURUmap/Panel/DesktopPanel/useStyles.js +++ b/src/components/HURUmap/Panel/DesktopPanel/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles( ({ typography, palette, transitions, widths, zIndex }) => ({ diff --git a/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js b/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js index 24de90606..7ed6dfbe2 100644 --- a/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js +++ b/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js @@ -1,5 +1,5 @@ -import { Popover, Button } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Popover, Button } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/HURUmap/Panel/MobilePanel/index.js b/src/components/HURUmap/Panel/MobilePanel/index.js index 78a2554b0..da4c410df 100644 --- a/src/components/HURUmap/Panel/MobilePanel/index.js +++ b/src/components/HURUmap/Panel/MobilePanel/index.js @@ -1,4 +1,4 @@ -import { Button, Typography } from "@mui/material"; +import { Button, Typography } from "@material-ui/core"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/HURUmap/Panel/MobilePanel/useStyles.js b/src/components/HURUmap/Panel/MobilePanel/useStyles.js index 4cb152514..a586beee5 100644 --- a/src/components/HURUmap/Panel/MobilePanel/useStyles.js +++ b/src/components/HURUmap/Panel/MobilePanel/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles( ({ typography, palette, zIndex, breakpoints }) => ({ diff --git a/src/components/HURUmap/Panel/Profile.js b/src/components/HURUmap/Panel/Profile.js index bc08c901e..2ed74330f 100644 --- a/src/components/HURUmap/Panel/Profile.js +++ b/src/components/HURUmap/Panel/Profile.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React, { forwardRef } from "react"; diff --git a/src/components/HURUmap/Panel/ProfileItems.js b/src/components/HURUmap/Panel/ProfileItems.js index 253fb1c2a..1b99f1620 100644 --- a/src/components/HURUmap/Panel/ProfileItems.js +++ b/src/components/HURUmap/Panel/ProfileItems.js @@ -1,5 +1,5 @@ -import { Grid } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Grid } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import clsx from "clsx"; import dynamic from "next/dynamic"; import PropTypes from "prop-types"; diff --git a/src/components/HURUmap/Panel/index.js b/src/components/HURUmap/Panel/index.js index bc549c344..bc13be9c2 100644 --- a/src/components/HURUmap/Panel/index.js +++ b/src/components/HURUmap/Panel/index.js @@ -1,4 +1,4 @@ -import { Box } from "@mui/material"; +import { Hidden } from "@material-ui/core"; import React from "react"; import DesktopPanel from "./DesktopPanel"; @@ -7,26 +7,12 @@ import MobilePanel from "./MobilePanel"; function Panel(props) { return ( <> - + - - + + - + ); } diff --git a/src/components/HURUmap/PanelButtonGroup/index.js b/src/components/HURUmap/PanelButtonGroup/index.js index 76260a851..89858a263 100644 --- a/src/components/HURUmap/PanelButtonGroup/index.js +++ b/src/components/HURUmap/PanelButtonGroup/index.js @@ -1,5 +1,5 @@ -import ToggleButton from "@mui/material/ToggleButton"; -import ToggleButtonGroup from "@mui/material/ToggleButtonGroup"; +import ToggleButton from "@material-ui/lab/ToggleButton"; +import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; import clsx from "clsx"; import Image from "next/image"; import PropTypes from "prop-types"; diff --git a/src/components/HURUmap/PanelButtonGroup/useStyles.js b/src/components/HURUmap/PanelButtonGroup/useStyles.js index 945b7a072..a90694fd8 100644 --- a/src/components/HURUmap/PanelButtonGroup/useStyles.js +++ b/src/components/HURUmap/PanelButtonGroup/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography, palette }) => ({ root: {}, diff --git a/src/components/HURUmap/PinAndCompare/index.js b/src/components/HURUmap/PinAndCompare/index.js index f229c9811..7b181eb47 100644 --- a/src/components/HURUmap/PinAndCompare/index.js +++ b/src/components/HURUmap/PinAndCompare/index.js @@ -1,4 +1,4 @@ -import { Box, IconButton, SvgIcon } from "@mui/material"; +import { Box, IconButton, SvgIcon } from "@material-ui/core"; import PropTypes from "prop-types"; import React, { useState } from "react"; @@ -67,11 +67,7 @@ function PinAndCompare({ return ( {!isMobile && ( - + ({ root: { diff --git a/src/components/HURUmap/Source/index.js b/src/components/HURUmap/Source/index.js index e704f6c01..fe3bbed39 100644 --- a/src/components/HURUmap/Source/index.js +++ b/src/components/HURUmap/Source/index.js @@ -1,5 +1,5 @@ -import { Typography } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Typography } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/HURUmap/SubcategoryHeader/index.js b/src/components/HURUmap/SubcategoryHeader/index.js index 85a05e628..a39023de7 100644 --- a/src/components/HURUmap/SubcategoryHeader/index.js +++ b/src/components/HURUmap/SubcategoryHeader/index.js @@ -1,6 +1,6 @@ import { RichTypography } from "@commons-ui/core"; -import { Typography } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Typography } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/HURUmap/TreeView/index.js b/src/components/HURUmap/TreeView/index.js index e747889e0..ef5b25acb 100644 --- a/src/components/HURUmap/TreeView/index.js +++ b/src/components/HURUmap/TreeView/index.js @@ -1,6 +1,6 @@ -import TreeItem from "@mui/lab/TreeItem"; -import MuiTreeView from "@mui/lab/TreeView"; -import { Typography } from "@mui/material"; +import { Typography } from "@material-ui/core"; +import TreeItem from "@material-ui/lab/TreeItem"; +import MuiTreeView from "@material-ui/lab/TreeView"; import clsx from "clsx"; import PropTypes from "prop-types"; import React, { useState } from "react"; diff --git a/src/components/HURUmap/TreeView/useStyles.js b/src/components/HURUmap/TreeView/useStyles.js index 358158f13..c30e223dd 100644 --- a/src/components/HURUmap/TreeView/useStyles.js +++ b/src/components/HURUmap/TreeView/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography, palette }) => ({ root: { diff --git a/src/components/HURUmap/Tutorial/TutorialStep/index.js b/src/components/HURUmap/Tutorial/TutorialStep/index.js index 85047ab3a..716aeb762 100644 --- a/src/components/HURUmap/Tutorial/TutorialStep/index.js +++ b/src/components/HURUmap/Tutorial/TutorialStep/index.js @@ -1,5 +1,5 @@ import RichTypography from "@commons-ui/core/RichTypography"; -import { Grid, Typography, IconButton, Avatar } from "@mui/material"; +import { Grid, Typography, IconButton, Avatar } from "@material-ui/core"; import { useTour } from "@reactour/tour"; import Image from "next/image"; import PropTypes from "prop-types"; @@ -39,7 +39,6 @@ function TutorialStep({ description, title, image, selector, ...props }) { aria-label="close" className={classes.closeButton} onClick={handleClose} - size="large" > diff --git a/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js b/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js index e6059fd98..61b99baf6 100644 --- a/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js +++ b/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography, palette }) => ({ root: { diff --git a/src/components/HURUmap/Tutorial/index.js b/src/components/HURUmap/Tutorial/index.js index d6a991b04..e53b08763 100644 --- a/src/components/HURUmap/Tutorial/index.js +++ b/src/components/HURUmap/Tutorial/index.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; import { TourProvider, useTour } from "@reactour/tour"; import PropTypes from "prop-types"; import React, { useState } from "react"; diff --git a/src/components/HURUmap/Tutorial/useStyles.js b/src/components/HURUmap/Tutorial/useStyles.js index 8aafb717f..0908aed4f 100644 --- a/src/components/HURUmap/Tutorial/useStyles.js +++ b/src/components/HURUmap/Tutorial/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography, palette }) => ({ root: { diff --git a/src/components/Header/index.js b/src/components/Header/index.js index c3f595573..558f22a74 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -1,5 +1,5 @@ import { RichTypography } from "@commons-ui/core"; -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/Hero/Map/index.js b/src/components/Hero/Map/index.js index 34450303f..bd0e706d3 100644 --- a/src/components/Hero/Map/index.js +++ b/src/components/Hero/Map/index.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js index 3a7cb4558..26ba9eda6 100644 --- a/src/components/Hero/index.js +++ b/src/components/Hero/index.js @@ -1,6 +1,5 @@ -import { Box, Grid, Typography, useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; +import { Grid, Hidden, Typography, useMediaQuery } from "@material-ui/core"; +import { makeStyles, useTheme } from "@material-ui/core/styles"; import dynamic from "next/dynamic"; import PropTypes from "prop-types"; import React, { useState } from "react"; @@ -103,16 +102,9 @@ function Hero({
- + - +
{/* Since map is dynamic-ally loaded, no need for implementation="css" */} - + )} - +
diff --git a/src/components/HowItWorks/index.js b/src/components/HowItWorks/index.js index 0b1346199..1820ba943 100644 --- a/src/components/HowItWorks/index.js +++ b/src/components/HowItWorks/index.js @@ -1,5 +1,11 @@ -import { Box, Button, Grid, Typography, useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { + Button, + Grid, + Hidden, + Typography, + useMediaQuery, +} from "@material-ui/core"; +import { useTheme } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React from "react"; @@ -14,24 +20,16 @@ function HowItWorks({ title, ctaText, description, href, ...props }) { const classes = useStyles(props); const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down("md")); + const isMobile = useMediaQuery(theme.breakpoints.down("sm")); return (
- +
- +
diff --git a/src/components/HowItWorks/useStyles.js b/src/components/HowItWorks/useStyles.js index 3277cf128..0bd912fb9 100644 --- a/src/components/HowItWorks/useStyles.js +++ b/src/components/HowItWorks/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ root: { diff --git a/src/components/InsightsData/index.js b/src/components/InsightsData/index.js index 4d2a9eafd..1b1e0af26 100644 --- a/src/components/InsightsData/index.js +++ b/src/components/InsightsData/index.js @@ -1,5 +1,5 @@ -import { useMediaQuery, Grid } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { useMediaQuery, Grid } from "@material-ui/core"; +import { useTheme } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/InsightsData/useStyles.js b/src/components/InsightsData/useStyles.js index 569cf15b4..c14bf85b1 100644 --- a/src/components/InsightsData/useStyles.js +++ b/src/components/InsightsData/useStyles.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(({ typography, breakpoints }) => ({ root: { diff --git a/src/components/Link/index.js b/src/components/Link/index.js index eacafe382..61dfe4046 100644 --- a/src/components/Link/index.js +++ b/src/components/Link/index.js @@ -1,6 +1,6 @@ /* eslint-disable jsx-a11y/anchor-has-content */ import { A } from "@commons-ui/core"; -import { Link as MuiLink } from "@mui/material"; +import { Link as MuiLink } from "@material-ui/core"; import clsx from "clsx"; import NextLink from "next/link"; import { useRouter } from "next/router"; diff --git a/src/components/Loading/index.js b/src/components/Loading/index.js index 39165e130..c53b0d3c6 100644 --- a/src/components/Loading/index.js +++ b/src/components/Loading/index.js @@ -1,5 +1,5 @@ -import { Box, CircularProgress } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Box, CircularProgress } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; const useStyles = makeStyles(({ typography }) => ({ diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index 86095402c..a8d25ed2f 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -1,5 +1,5 @@ -import { Grid, Button, Typography } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Grid, Button, Typography } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; import PropTypes from "prop-types"; import React from "react"; @@ -118,17 +118,13 @@ function Menu({ links, children, socialLinks, ...props }) {