jams-react-client: removed @mui/lab

Change-Id: I060990d4f5614bdcc226beb0b7cfc0e2a32d5e75

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",

jams-react-client/src/components/CountrySelect/CountrySelect.js

 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,

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)}
           >

jams-react-client/src/components/Snackbar/BlueprintSnackbar.js

 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";
 

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";

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";

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: "",
     });
   };

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";
 

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";