diff --git a/jams-react-client/package.json b/jams-react-client/package.json
index 47d422e0267340e295b077159d88647a42de5636..a9b9322aec6e59291354870a049e53850b69e1ca 100644
--- a/jams-react-client/package.json
+++ b/jams-react-client/package.json
@@ -7,9 +7,7 @@
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
- "@mui/base": "^5.0.0-beta.5",
"@mui/icons-material": "^5.11.16",
- "@mui/lab": "^5.0.0-alpha.134",
"@mui/material": "^5.13.6",
"@mui/styles": "^5.13.2",
"axios": "^1.4.0",
@@ -22,11 +20,11 @@
"i18next-browser-languagedetector": "^6.0.1",
"i18next-http-backend": "^1.0.21",
"lodash": "^4.17.19",
- "material-ui-popup-state": "^1.6.1",
+ "material-ui-popup-state": "^5.0.9",
"perfect-scrollbar": "1.5.5",
"prop-types": "15.8.1",
"react": "^17.0.2",
- "react-color": "^2.19.3",
+ "react-colorful": "^5.6.1",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^17.0.0",
"react-dropzone": "^14.2.3",
diff --git a/jams-react-client/src/components/CountrySelect/CountrySelect.js b/jams-react-client/src/components/CountrySelect/CountrySelect.js
index 895930678802808a3ae280f196f312cb5fef55c1..425ca3b6313cc0c781b0cd36532f29114275783e 100644
--- a/jams-react-client/src/components/CountrySelect/CountrySelect.js
+++ b/jams-react-client/src/components/CountrySelect/CountrySelect.js
@@ -1,20 +1,15 @@
import React from "react";
import TextField from "@mui/material/TextField";
-import Autocomplete from "@mui/lab/Autocomplete";
+import { Autocomplete, Box } from "@mui/material";
import { makeStyles } from "@mui/styles";
import i18next from "i18next";
-// ISO 3166-1 alpha-2
-// âš ï¸ No support for IE 11
function countryToFlag(isoCode) {
- return typeof String.fromCodePoint !== "undefined"
- ? isoCode
- .toUpperCase()
- .replace(/./g, (char) =>
- String.fromCodePoint(char.charCodeAt(0) + 127397)
- )
- : isoCode;
+ console.log("isoCode: ", isoCode);
+ return isoCode
+ .toUpperCase()
+ .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397));
}
const useStyles = makeStyles({
@@ -32,8 +27,7 @@ export default function CountrySelect(props) {
return (
<Autocomplete
- id="country-select-demo"
- name="country"
+ id="country-select"
options={countries}
classes={{
option: classes.option,
diff --git a/jams-react-client/src/components/LanguagePicker/LanguagePicker.js b/jams-react-client/src/components/LanguagePicker/LanguagePicker.js
index 653b9c2a072f80b17e2fc5ea7a20b1cdbef245f3..f69dfc5cad9e3def4eb8d1d481b7de538ef8b40a 100644
--- a/jams-react-client/src/components/LanguagePicker/LanguagePicker.js
+++ b/jams-react-client/src/components/LanguagePicker/LanguagePicker.js
@@ -55,7 +55,7 @@ export default function LanguagePicker(props) {
<React.Fragment>
<Button
variant="contained"
- color="default"
+ color="inherit"
fullWidth
{...bindTrigger(popupState)}
>
diff --git a/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js b/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js
index cf222dc700e4d6c896ef9108a1f641ec40617fa0..35b586fd4bcb18c857adc72b557abe0b361c8802 100644
--- a/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js
+++ b/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js
@@ -1,7 +1,7 @@
import React from "react";
import PropTypes from "prop-types";
-import MuiAlert from "@mui/lab/Alert";
+import MuiAlert from "@mui/material/Alert";
import Snackbar from "@mui/material/Snackbar";
import Slide from "@mui/material/Slide";
diff --git a/jams-react-client/src/layouts/SignIn.js b/jams-react-client/src/layouts/SignIn.js
index 1d6366ec574edd7eeee2362ffb72ca66f77e49ce..8193e23619c96a7d896f0dca957ddf0bf321dc0a 100644
--- a/jams-react-client/src/layouts/SignIn.js
+++ b/jams-react-client/src/layouts/SignIn.js
@@ -9,7 +9,7 @@ import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { makeStyles } from "@mui/styles";
import Container from "@mui/material/Container";
-import MuiAlert from "@mui/lab/Alert";
+import MuiAlert from "@mui/material/Alert";
import auth from "../auth.js";
import LanguagePicker from "../components/LanguagePicker/LanguagePicker";
diff --git a/jams-react-client/src/layouts/SignUp.js b/jams-react-client/src/layouts/SignUp.js
index 6f96a35f2c9874607c3ae21558018741ed6cb1a8..e771ac17056eb18beeaa831c17b743e8bae70b00 100644
--- a/jams-react-client/src/layouts/SignUp.js
+++ b/jams-react-client/src/layouts/SignUp.js
@@ -5,7 +5,7 @@ import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { makeStyles } from "@mui/styles";
import Container from "@mui/material/Container";
-import MuiAlert from "@mui/lab/Alert";
+import MuiAlert from "@mui/material/Alert";
import Paper from "@mui/material/Paper";
import logo from "assets/img/jams_logo_no_gnu_package.svg";
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
index 19ca4777f0cca7ca5888aaffcde002e9152ac89b..a1ad28a200fc554ba1d6293b1f2426d0b2778a4c 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
@@ -2,7 +2,7 @@ import React, { useState } from "react";
import Checkbox from "@mui/material/Checkbox";
import Switch from "@mui/material/Switch";
-import { SketchPicker } from "react-color";
+import { HexColorPicker } from "react-colorful";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import { TextField } from "@mui/material";
@@ -252,11 +252,11 @@ const CustomBackgroundForm = ({
{displayColorPicker && (
<div className={classes.popover}>
<div className={classes.cover} onClick={handleCloseColor} />
- <SketchPicker
+ <HexColorPicker
color={uiCustomization.backgroundColor}
onChange={(color) => {
handleColorChange(color);
- handleUpdateUi("backgroundColor", color.hex);
+ handleUpdateUi("backgroundColor", color);
}}
/>
</div>
@@ -370,7 +370,7 @@ const EditBlueprintUiForm = ({
const handleColorChange = (color) => {
setUiCustomization({
...uiCustomization,
- backgroundColor: color.hex,
+ backgroundColor: color,
backgroundUrl: "",
});
};
diff --git a/jams-react-client/src/views/Settings/Settings.js b/jams-react-client/src/views/Settings/Settings.js
index eb1056ecc1fd04e3fa4268eafbcdd710eaa9ce63..5df963c012e85106503e4da80fd5fb5f79537b59 100644
--- a/jams-react-client/src/views/Settings/Settings.js
+++ b/jams-react-client/src/views/Settings/Settings.js
@@ -11,7 +11,7 @@ import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import { infoColor } from "assets/jss/material-dashboard-react.js";
-import MuiAlert from "@mui/lab/Alert";
+import MuiAlert from "@mui/material/Alert";
import auth from "auth.js";
diff --git a/jams-react-client/src/views/Users/Users.js b/jams-react-client/src/views/Users/Users.js
index 6425874af7d4747bf33817a1750473c8268bc091..7c408063fa249d33b128911a2f07b2a962c9331c 100644
--- a/jams-react-client/src/views/Users/Users.js
+++ b/jams-react-client/src/views/Users/Users.js
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
import { useHistory } from "react-router-dom";
// @mui/material components
import { makeStyles } from "@mui/styles";
-import Pagination from "@mui/lab/Pagination";
+import { Pagination } from "@mui/material";
// core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";