Merge pull request meshery#13367 from amitamrutiya/fix-regression

Fix some old regression issue of muiv4

CONTRIBUTING.md

@@ -136,7 +136,7 @@ Please contribute! Meshery documentation uses GitHub Pages to host the docs site
    `git push origin <my-changes>`
 1. Open a pull request (in your web browser) against our main repo: https://github.com/meshery/meshery.
 
-_Alternatively, LiveReload is available as an option during development: with jekyll serve --livereload no more manual page refresh. 
+_Alternatively, LiveReload is available as an option during development: with jekyll serve --livereload no more manual page refresh.
 
 `bundle exec jekyll serve --drafts --livereload --incremental --config _config_dev.yml`
 

ui/components/ConnectionWizard/icons/MesheryOperatorIcon.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 const MesheryOperatorIcon = ({ isActive }) => {
   return (

ui/components/ConnectionWizard/icons/PrometheusIcon.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 const PrometheusIcon = ({ isActive }) => {
   return (

ui/components/ConnectionWizard/icons/apps.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 const AppsIcon = ({ isActive }) => {
   return (

ui/components/GenericModal.js

@@ -1,7 +1,6 @@
 // @ts-check
 import React from 'react';
-import { Fade } from '@mui/material';
-import { Modal, Backdrop } from '@layer5/sistent';
+import { Modal, Backdrop, Fade } from '@material-ui/core';
 
 /**
  *

ui/components/NotificationCenter/index.js

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Provider, useDispatch, useSelector } from 'react-redux';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@mui/material';
 import {
   Divider,
   ClickAwayListener,

ui/components/UserPreferences/style.js

@@ -1,4 +1,4 @@
-import { Card, FormControl, Paper, styled, Select, FormGroup } from '@layer5/sistent';
+import { Card, FormControl, Paper, styled, Select, FormGroup, Grid } from '@layer5/sistent';
 
 export const StyledSelect = styled(Select)(({ theme }) => ({
   '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
@@ -84,7 +84,7 @@ export const RootContainer = styled('div')(({ theme }) => ({
 export const ProviderCard = styled(Card)(({ theme }) => ({
   border: '1px solid rgba(0,179,159,0.3)',
   margin: '20px 0px',
-  backgroundColor: theme.palette.type === 'dark' ? '#293B43' : '#C9DBE3',
+  backgroundColor: theme.palette.mode === 'dark' ? '#293B43' : '#C9DBE3',
 }));
 
 export const StyledPaper = styled(Paper)(({ theme }) => ({
@@ -115,15 +115,15 @@ export const BoxWrapper = styled('div')({
   paddingRight: '10px',
 });
 
-export const GridCapabilityHeader = styled('div')(({ theme }) => ({
+export const GridCapabilityHeader = styled(Grid)(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#293B43' : '#7493A1',
 }));
 
-export const GridExtensionHeader = styled('div')(({ theme }) => ({
+export const GridExtensionHeader = styled(Grid)(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#293B43' : '#C9DBE3',
 }));
 
-export const GridExtensionItem = styled('div')(({ theme }) => ({
+export const GridExtensionItem = styled(Grid)(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#3D4F57' : '#E7EFF3',
 }));