From 82d2ebdd1faddd797d9f674c8e68b0df25aa5915 Mon Sep 17 00:00:00 2001
From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com>
Date: Wed, 18 Sep 2024 19:10:29 +0530
Subject: [PATCH] Environments page MUI v5 update

Signed-off-by: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com>
---
 .../Environments/environment-card.js          | 172 ++++---
 ui/components/Lifecycle/Environments/index.js |  58 ++-
 .../Lifecycle/Environments/styles.js          | 460 ++++++++----------
 ui/pages/management/environments.js           |  11 +-
 4 files changed, 344 insertions(+), 357 deletions(-)

diff --git a/ui/components/Lifecycle/Environments/environment-card.js b/ui/components/Lifecycle/Environments/environment-card.js
index 57745cc26c1..2c43746be6e 100644
--- a/ui/components/Lifecycle/Environments/environment-card.js
+++ b/ui/components/Lifecycle/Environments/environment-card.js
@@ -1,15 +1,30 @@
 import React from 'react';
-import { Button, Card, Grid, Typography, Box } from '@material-ui/core';
+// import { Button, Card, Grid, Typography, Box } from '@material-ui/core';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
-import { Delete, Edit } from '@material-ui/icons';
+import { Delete, Edit } from '@mui/icons-material';
 
 import { FlipCard } from '../General';
 import { useGetEnvironmentConnectionsQuery } from '../../../rtk-query/environments';
-import classNames from 'classnames';
+// import classNames from 'classnames';
 import CAN from '@/utils/can';
 import { keys } from '@/utils/permission_constants';
-import { Checkbox } from '@layer5/sistent';
+// import { Checkbox, Button, Card, Grid, Typography, Box } from '@layer5/sistent';
+import { Grid } from '@layer5/sistent';
 import { UsesSistent } from '@/components/SistentWrapper';
+import {
+  PopupButton,
+  TabCount,
+  CardWrapper,
+  TabTitle,
+  Name,
+  IconButton,
+  EmptyDescription,
+  DescriptionLabel,
+  AllocationButton,
+  BulkSelectCheckbox,
+  CardTitle,
+  DateLabel,
+} from './styles';
 
 export const formattoLongDate = (date) => {
   return new Date(date).toLocaleDateString('en-US', {
@@ -19,21 +34,26 @@ export const formattoLongDate = (date) => {
   });
 };
 
-export const TransferButton = ({ title, count, onAssign, classes, disabled }) => {
+export const TransferButton = ({ title, count, onAssign, disabled }) => {
   return (
-    <Button
-      variant="contained"
-      color="primary"
-      disabled={disabled}
-      className={classes.popupButton}
-      onClick={onAssign}
-    >
-      <Grid>
-        <Typography className={classes.tabCount}>{count}</Typography>
-        <Typography className={classes.tabTitle}>{title}</Typography>
-        <SyncAltIcon style={{ position: 'absolute', top: '10px', right: '10px' }} />
-      </Grid>
-    </Button>
+    <UsesSistent>
+      <PopupButton disabled={disabled} onClick={onAssign} sx={{
+          color: '#3C494F',
+          backgroundColor: '#ffffff',
+          margin: '0px 0px 10px',
+          padding: '20px 10px',
+          '&:hover': {
+            backgroundColor: '#ffffff',
+            boxShadow: 'none',
+          },
+        }}>
+        <Grid>
+          <TabCount>{count}</TabCount>
+          <TabTitle>{title}</TabTitle>
+          <SyncAltIcon sx={{ position: 'absolute', top: '10px', right: '10px', color:'#607d8b' }} />
+        </Grid>
+      </PopupButton>
+    </UsesSistent>
   );
 };
 
@@ -60,7 +80,6 @@ const EnvironmentCard = ({
   onEdit,
   onSelect,
   onAssignConnection,
-  classes,
 }) => {
   const { data: environmentConnections } = useGetEnvironmentConnectionsQuery(
     {
@@ -80,51 +99,46 @@ const EnvironmentCard = ({
           : false
       }
       frontComponents={
-        <Card
-          className={classes.cardWrapper}
-          style={{
+        <CardWrapper
+          // className={classes.cardWrapper}
+          sx={{
             minHeight: '320px',
             height: '320px',
+            borderRadius:2
           }}
         >
-          <Grid style={{ display: 'flex', flexDirection: 'row', pb: 1 }}>
-            <Typography
-              className={classes.name}
-              variant="body2"
-              onClick={(e) => e.stopPropagation()}
-            >
+          <Grid sx={{ display: 'flex', flexDirection: 'row', pb: 1 }}>
+            <Name variant="body2" onClick={(e) => e.stopPropagation()}>
               {environmentDetails?.name}
-            </Typography>
+            </Name>
           </Grid>
           <Grid
-            style={{
+            sx={{
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'flex-start',
             }}
           >
-            <Grid xs={12} sm={9} md={12} style={{ display: 'flex', justifyContent: 'flex-start' }}>
+            <Grid xs={12} sm={9} md={12} sx={{ display: 'flex', justifyContent: 'flex-start' }}>
               {environmentDetails.description ? (
-                <Typography
-                  className={classNames(classes.emptyDescription, classes.descriptionLabel)}
-                  onClick={(e) => e.stopPropagation()}
-                  style={{ marginBottom: { xs: 2, sm: 0 }, paddingRight: { sm: 2, lg: 0 } }}
-                >
-                  {environmentDetails.description}
-                </Typography>
+                  <DescriptionLabel
+                    onClick={(e) => e.stopPropagation()}
+                    sx={{ marginBottom: { xs: 2, sm: 0 }, paddingRight: { sm: 2, lg: 0 }, marginTop:'0px' }}
+                  >
+                    {environmentDetails.description}
+                  </DescriptionLabel>
               ) : (
-                <Typography
-                  className={classes.emptyDescription}
+                <EmptyDescription
                   onClick={(e) => e.stopPropagation()}
-                  style={{ color: 'rgba(122,132,142,1)' }}
+                  sx={{ color: 'rgba(122,132,142,1)' }}
                 >
                   No description
-                </Typography>
+                </EmptyDescription>
               )}
             </Grid>
             <Grid
               xs={12}
-              style={{
+              sx={{
                 paddingTop: '15px',
                 display: 'flex',
                 alignItems: 'flex-end',
@@ -132,71 +146,69 @@ const EnvironmentCard = ({
                 gap: '10px',
               }}
             >
-              <Box className={classes.allocationButton} onClick={(e) => e.stopPropagation()}>
+              <AllocationButton onClick={(e) => e.stopPropagation()}>
                 <TransferButton
                   title="Assigned Connections"
                   count={environmentConnectionsCount}
                   onAssign={onAssignConnection}
-                  classes={classes}
                   disabled={!CAN(keys.VIEW_CONNECTIONS.action, keys.VIEW_CONNECTIONS.subject)}
                 />
-              </Box>
+              </AllocationButton>
               {/* temporary disable workspace allocation button  */}
               {false && (
-                <Box className={classes.allocationButton} onClick={(e) => e.stopPropagation()}>
+                <AllocationButton onClick={(e) => e.stopPropagation()}>
                   <TransferButton
                     title="Assigned Workspaces"
                     count={
                       environmentDetails.workspaces ? environmentDetails.workspaces?.length : 0
                     }
                     onAssign={onAssignConnection}
-                    classes={classes}
                     disabled={!CAN(keys.VIEW_WORKSPACE.action, keys.VIEW_WORKSPACE.subject)}
                   />
-                </Box>
+                </AllocationButton>
               )}
             </Grid>
           </Grid>
-        </Card>
+        </CardWrapper>
       }
       backComponents={
-        <Card
+        <CardWrapper
           elevation={2}
-          className={classes.cardWrapper}
-          style={{
+          // className={classes.cardWrapper}
+          sx={{
             minHeight: '320px',
             background: 'linear-gradient(180deg, #007366 0%, #000 100%)',
           }}
         >
-          <Grid xs={12} style={{ display: 'flex', flexDirection: 'row', height: '40px' }}>
-            <Grid xs={6} style={{ display: 'flex', alignItems: 'flex-start' }}>
+          <Grid xs={12} sx={{ display: 'flex', flexDirection: 'row', height: '40px' }}>
+            <Grid xs={6} sx={{ display: 'flex', alignItems: 'flex-start' }}>
               <UsesSistent>
-                <Checkbox
-                  className={classes.bulkSelectCheckbox}
+                <BulkSelectCheckbox
+                  // className={classes.bulkSelectCheckbox}
                   onClick={(e) => e.stopPropagation()}
                   onChange={onSelect}
                   disabled={deleted ? true : false}
                 />
               </UsesSistent>
-              <Typography
-                className={classes.cardTitle}
-                style={{ color: 'white' }}
+              <CardTitle
+                // className={classes.cardTitle}
+                sx={{ color: 'white' }}
                 variant="body2"
                 onClick={(e) => e.stopPropagation()}
               >
                 {environmentDetails?.name}
-              </Typography>
+              </CardTitle>
             </Grid>
             <Grid
               xs={6}
-              style={{
+              sx={{
                 display: 'flex',
                 alignItems: 'flex-start',
                 justifyContent: 'flex-end',
               }}
             >
-              <Button
-                className={classes.iconButton}
+              <IconButton
+                // className={classes.iconButton}
                 onClick={onEdit}
                 disabled={
                   selectedEnvironments?.filter((id) => id == environmentDetails.id).length === 1
@@ -204,10 +216,10 @@ const EnvironmentCard = ({
                     : !CAN(keys.EDIT_ENVIRONMENT.action, keys.EDIT_ENVIRONMENT.subject)
                 }
               >
-                <Edit style={{ color: 'white', margin: '0 2px' }} />
-              </Button>
-              <Button
-                className={classes.iconButton}
+                <Edit sx={{ color: 'white', margin: '0 2px' }} />
+              </IconButton>
+              <IconButton
+                // className={classes.iconButton}
                 onClick={onDelete}
                 disabled={
                   selectedEnvironments?.filter((id) => id == environmentDetails.id).length === 1
@@ -215,31 +227,31 @@ const EnvironmentCard = ({
                     : !CAN(keys.DELETE_ENVIRONMENT.action, keys.DELETE_ENVIRONMENT.subject)
                 }
               >
-                <Delete style={{ color: 'white', margin: '0 2px' }} />
-              </Button>
+                <Delete sx={{ color: 'white', margin: '0 2px' }} />
+              </IconButton>
             </Grid>
           </Grid>
-          <Grid style={{ display: 'flex', flexDirection: 'row', color: 'white' }}>
-            <Grid xs={6} style={{ textAlign: 'left' }}>
-              <Typography
-                className={classes.dateLabel}
+          <Grid sx={{ display: 'flex', flexDirection: 'row', color: 'white' }}>
+            <Grid xs={6} sx={{ textAlign: 'left' }}>
+              <DateLabel
+                // className={classes.dateLabel}
                 variant="span"
                 onClick={(e) => e.stopPropagation()}
               >
                 Updated At: {formattoLongDate(environmentDetails?.updated_at)}
-              </Typography>
+              </DateLabel>
             </Grid>
-            <Grid xs={6} style={{ textAlign: 'left' }}>
-              <Typography
-                className={classes.dateLabel}
+            <Grid xs={6} sx={{ textAlign: 'left' }}>
+              <DateLabel
+                // className={classes.dateLabel}
                 variant="span"
                 onClick={(e) => e.stopPropagation()}
               >
                 Created At: {formattoLongDate(environmentDetails?.created_at)}
-              </Typography>
+              </DateLabel>
             </Grid>
           </Grid>
-        </Card>
+        </CardWrapper>
       }
     />
   );
diff --git a/ui/components/Lifecycle/Environments/index.js b/ui/components/Lifecycle/Environments/index.js
index b8949dae7ca..49d6e0dadf4 100644
--- a/ui/components/Lifecycle/Environments/index.js
+++ b/ui/components/Lifecycle/Environments/index.js
@@ -1,23 +1,22 @@
 import { useEffect, useRef, useState } from 'react';
-import { Button, Grid, NoSsr, Typography, Box } from '@material-ui/core';
 import { connect } from 'react-redux';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { withStyles } from '@material-ui/core/styles';
 import { Pagination, PaginationItem } from '@material-ui/lab';
 import { withRouter } from 'next/router';
 import { debounce } from 'lodash';
 import { Delete } from '@material-ui/icons';
-import classNames from 'classnames';
-
+// import classNames from 'classnames';
+import { NoSsr } from '@mui/material';
+import { ToolWrapper, CreateButtonWrapper, BulkActionWrapper } from '../Workspaces/index.js';
 import AddIconCircleBorder from '../../../assets/icons/AddIconCircleBorder';
 import EnvironmentCard from './environment-card';
 import EnvironmentIcon from '../../../assets/icons/Environment';
 import { EVENT_TYPES } from '../../../lib/event-types';
 import { updateProgress } from '../../../lib/store';
 import { useNotification } from '../../../utils/hooks/useNotification';
-import useStyles from '../../../assets/styles/general/tool.styles';
-import SearchBar from '../../../utils/custom-search';
+// import useStyles from '../../../assets/styles/general/tool.styles';
+// import SearchBar from '../../../utils/custom-search';
 import { RJSFModalWrapper } from '../../Modal';
 import PromptComponent, { PROMPT_VARIANTS } from '../../PromptComponent';
 import { EmptyState } from '../General';
@@ -30,6 +29,11 @@ import {
   createAndEditEnvironmentSchema,
   createAndEditEnvironmentUiSchema,
   ErrorBoundary,
+  Button,
+  Grid,
+  Typography,
+  SearchBar,
+  // Box,
 } from '@layer5/sistent';
 import ConnectionIcon from '../../../assets/icons/Connection';
 import { TRANSFER_COMPONENT } from '../../../utils/Enum';
@@ -42,7 +46,7 @@ import {
   useUpdateEnvironmentMutation,
   useDeleteEnvironmentMutation,
 } from '../../../rtk-query/environments';
-import styles from './styles';
+// import styles from './styles';
 import { keys } from '@/utils/permission_constants';
 import CAN from '@/utils/can';
 import DefaultError from '../../General/error-404/index';
@@ -53,7 +57,7 @@ const ACTION_TYPES = {
   EDIT: 'edit',
 };
 
-const Environments = ({ organization, classes }) => {
+const Environments = ({ organization }) => {
   const [environmentModal, setEnvironmentModal] = useState({
     open: false,
     schema: {},
@@ -81,7 +85,7 @@ const Environments = ({ organization, classes }) => {
 
   const modalRef = useRef(null);
   const { notify } = useNotification();
-  const StyleClass = useStyles();
+  // const StyleClass = useStyles();
 
   const {
     data: environmentsData,
@@ -445,25 +449,26 @@ const Environments = ({ organization, classes }) => {
     <NoSsr>
       {CAN(keys.VIEW_ENVIRONMENTS.action, keys.VIEW_ENVIRONMENTS.subject) ? (
         <>
-          <div className={StyleClass.toolWrapper} style={{ marginBottom: '20px', display: 'flex' }}>
-            <div className={classes.createButtonWrapper}>
+          <ToolWrapper>
+            <CreateButtonWrapper>
               <Button
                 type="submit"
                 variant="contained"
                 color="primary"
                 size="large"
                 onClick={(e) => handleEnvironmentModalOpen(e, ACTION_TYPES.CREATE)}
-                style={{
+                sx={{
                   padding: '8px',
-                  borderRadius: 5,
+                  borderRadius: 2,
                   marginRight: '2rem',
+                   backgroundColor: '#607d8b',
                 }}
                 disabled={!CAN(keys.CREATE_ENVIRONMENT.action, keys.CREATE_ENVIRONMENT.subject)}
                 data-cy="btnResetDatabase"
               >
-                <AddIconCircleBorder style={{ width: '20px', height: '20px' }} />
+                <AddIconCircleBorder sx={{ width: '20px', height: '20px' }} />
                 <Typography
-                  style={{
+                  sx={{
                     paddingLeft: '4px',
                     marginRight: '4px',
                   }}
@@ -471,7 +476,8 @@ const Environments = ({ organization, classes }) => {
                   Create
                 </Typography>
               </Button>
-            </div>
+            </CreateButtonWrapper>
+            <UsesSistent>
             <SearchBar
               onSearch={(value) => {
                 setSearch(value);
@@ -480,17 +486,18 @@ const Environments = ({ organization, classes }) => {
               expanded={isSearchExpanded}
               setExpanded={setIsSearchExpanded}
             />
-          </div>
+             </UsesSistent>
+          </ToolWrapper>
           {selectedEnvironments.length > 0 && (
-            <Box className={classNames(classes.bulkActionWrapper, StyleClass.toolWrapper)}>
+            <BulkActionWrapper>
               <Typography>
                 {selectedEnvironments.length > 1
                   ? `${selectedEnvironments.length} environments selected`
                   : `${selectedEnvironments.length} environment selected`}
               </Typography>
-              <Button className={classes.iconButton}>
+              <Button>
                 <Delete
-                  style={{ color: 'red', margin: '0 2px' }}
+                  sx={{ color: 'red', margin: '0 2px' }}
                   onClick={handleBulkDeleteEnvironmentConfirm}
                   disabled={
                     selectedEnvironments.length > 0
@@ -499,7 +506,7 @@ const Environments = ({ organization, classes }) => {
                   }
                 />
               </Button>
-            </Box>
+            </BulkActionWrapper>
           )}
           {environments.length > 0 ? (
             <>
@@ -507,7 +514,7 @@ const Environments = ({ organization, classes }) => {
                 {environments.map((environment) => (
                   <Grid item xs={12} md={6} key={environment.id}>
                     <EnvironmentCard
-                      classes={classes}
+                      // classes={classes}
                       environmentDetails={environment}
                       selectedEnvironments={selectedEnvironments}
                       onEdit={(e) => handleEnvironmentModalOpen(e, ACTION_TYPES.EDIT, environment)}
@@ -520,8 +527,7 @@ const Environments = ({ organization, classes }) => {
               </Grid>
               <Grid
                 container
-                sx={{ padding: '2rem 0' }}
-                style={{ marginTop: '20px' }}
+                sx={{ padding: '2rem 0', marginTop: '20px' }}
                 flex
                 justifyContent="center"
                 spacing={2}
@@ -663,6 +669,4 @@ const EnvironmentsPageWithErrorBoundary = (props) => {
   );
 };
 
-export default withStyles(styles)(
-  connect(mapStateToProps)(withRouter(EnvironmentsPageWithErrorBoundary)),
-);
+export default connect(mapStateToProps)(withRouter(EnvironmentsPageWithErrorBoundary));
diff --git a/ui/components/Lifecycle/Environments/styles.js b/ui/components/Lifecycle/Environments/styles.js
index 4de9e80d622..edb6d2e32d7 100644
--- a/ui/components/Lifecycle/Environments/styles.js
+++ b/ui/components/Lifecycle/Environments/styles.js
@@ -1,285 +1,255 @@
-import { styled } from '@material-ui/core';
-import { Colors } from '../../../themes/app';
+import { styled } from '@mui/material/styles';
+import { Checkbox, Typography, Button } from '@layer5/sistent';
 
-const styles = (theme) => ({
-  /** Bulk action bar styles */
-  bulkActionWrapper: {
-    width: '100%',
-    padding: '0.8rem',
-    justifyContent: 'space-between',
-    marginTop: '0.18rem',
-    marginBottom: '1rem',
-    borderRadius: '.25rem',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-
-  /** Card Styles */
-  cardWrapper: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '20px',
-    backgroundColor: theme.palette.secondary.white,
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-
-  statistic: {
-    display: 'flex',
-    justifyContent: 'center',
-    paddingX: '5px',
-    fontWeight: '600',
-    fontSize: '24px',
-    textAlign: 'center',
-  },
-
-  statisticName: {
-    display: 'flex',
-    justifyContent: 'center',
-    paddingX: '5px',
-    fontWeight: '400',
-    fontSize: '16px',
-    textAlign: 'center',
-  },
+/** Bulk action bar styles */
+export const BulkActionWrapper = styled('div')({
+  width: '100%',
+  padding: '0.8rem',
+  justifyContent: 'space-between',
+  marginTop: '0.18rem',
+  marginBottom: '1rem',
+  borderRadius: '.25rem',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+});
 
-  tabCardContent: {
-    padding: '16px',
-    display: 'flex',
-    justifyContent: 'center',
-    flexDirection: 'row',
+/** Card Styles */
+export const CardWrapper = styled('div')(() => ({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '20px',
+  backgroundColor: '#ffffff',
+  '&:hover': {
+    cursor: 'pointer',
   },
+}));
 
-  tabIconBox: {
-    display: 'flex',
-    alignItems: 'center',
-    border: `1px solid ${Colors.keppelGreen}`,
-    borderRadius: '5px 0 0 5px',
-    padding: '8px 16px',
-    borderRight: '0',
-    '&:hover': {
-      cursor: 'default',
-    },
-  },
+export const Statistic = styled('div')({
+  display: 'flex',
+  justifyContent: 'center',
+  padding: '0 5px',
+  fontWeight: 600,
+  fontSize: '24px',
+  textAlign: 'center',
+});
 
-  tabNameBox: {
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'column',
-    background: Colors.keppelGreen,
-    color: theme.palette.secondary.white,
-    p: '8px',
-    border: `1px solid ${Colors.keppelGreen}`,
-    borderRadius: '0 5px 5px 0',
-    padding: '8px 16px',
-  },
+export const StatisticName = styled('div')({
+  display: 'flex',
+  justifyContent: 'center',
+  padding: '0 5px',
+  fontWeight: 400,
+  fontSize: '16px',
+  textAlign: 'center',
+});
 
-  tabTitle: {
-    margin: '0',
-    fontSize: '12px',
-    fontWeight: '400',
-    display: 'flex',
-  },
+export const TabCardContent = styled('div')({
+  padding: '16px',
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'row',
+});
 
-  tabCount: {
-    margin: '0',
-    fontSize: '60px',
-    fontWeight: '500',
-    lineHeight: 1,
-    marginBottom: '5px',
+export const TabIconBox = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  border: `1px solid #00B39F`,
+  borderRadius: '5px 0 0 5px',
+  padding: '8px 16px',
+  borderRight: 0,
+  '&:hover': {
+    cursor: 'default',
   },
+});
 
-  allocationButton: {
-    padding: '10px 10px 1px 10px',
-    borderRadius: '4px',
-    height: '100%',
-    display: 'flex',
-    width: '100%',
-    background: theme.palette.secondary.focused,
-  },
+export const TabNameBox = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  background: '#00B39F',
+  color: '#fff',
+  padding: '8px 16px',
+  border: `1px solid #00B39F`,
+  borderRadius: '0 5px 5px 0',
+}));
+
+export const TabTitle = styled('p')({
+  margin: 0,
+  fontSize: '12px',
+  fontWeight: 400,
+  display: 'flex',
+});
 
-  allocationWorkspace: {
-    display: 'flex',
-    width: '100%',
-    gap: '10px',
-    ['@media (min-width : 600px)']: {
-      flexDirection: 'column',
-      gap: '0',
-    },
-  },
+export const TabCount = styled('p')({
+  margin: 0,
+  fontSize: '60px',
+  fontWeight: 500,
+  lineHeight: 1,
+  marginBottom: '5px',
+});
 
-  popupButton: {
-    width: '100%',
-    borderRadius: '4px',
-    boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
-    marginBottom: '10px',
-    padding: '20px 10px',
-    backgroundColor: theme.palette.secondary.mainBackground2,
-    color: theme.palette.secondary.penColorPrimary,
-    '&:hover': {
-      background: theme.palette.secondary.mainBackground2,
-    },
-  },
+export const AllocationButton = styled('div')(() => ({
+  padding: '10px 10px 1px 10px',
+  borderRadius: '4px',
+  height: '100%',
+  display: 'flex',
+  width: '100%',
+  background: '#607d8b',
+}));
 
-  record: {
-    borderBottom: `1px solid ${theme.palette.secondary.modalTabs}60`,
-    display: 'flex',
-    flexDirection: 'row',
-    padding: '5px 0',
+export const AllocationWorkspace = styled('div')({
+  display: 'flex',
+  width: '100%',
+  gap: '10px',
+  '@media (min-width: 600px)': {
+    flexDirection: 'column',
+    gap: 0,
   },
+});
 
-  bulkSelectCheckbox: {
-    padding: 0,
-    marginRight: '0.5rem',
+export const PopupButton = styled(Button)(() => ({
+  width: '100%',
+  borderRadius: '4px',
+  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+  marginBottom: '10px',
+  padding: '20px 10px',
+}));
+
+export const Record = styled('div')(() => ({
+  // borderBottom: `1px solid ${theme.palette.secondary.modalTabs}60`,
+  display: 'flex',
+  flexDirection: 'row',
+  padding: '5px 0',
+}));
+
+export const BulkSelectCheckbox = styled(Checkbox)({
+  padding: 0,
+  marginRight: '0.5rem',
+  color: 'white',
+  '&:hover': {
     color: 'white',
-    '&:hover': {
-      color: 'white',
-      cursor: 'pointer',
-    },
-    '&.Mui-checked': {
-      color: 'white',
-    },
+    cursor: 'pointer',
   },
-
-  cardTitle: {
-    fontSize: '1.25rem',
-    fontWeight: 800,
-    '&:hover': {
-      cursor: 'default',
-    },
-  },
-
-  organizationName: {
-    fontSize: '0.9rem',
-    display: 'flex',
-    alignItems: 'end',
-    padding: '0 5px',
-    '&:hover': {
-      cursor: 'default',
-    },
+  '& .Mui-checked': {
+    color: 'white',
   },
+});
 
-  styledIconButton: {
-    background: 'transparent',
-    border: 'none',
-    '&:hover': {
-      cursor: 'default',
-    },
+export const CardTitle = styled('h2')({
+  fontSize: '1.25rem',
+  fontWeight: 800,
+  '&:hover': {
+    cursor: 'default',
   },
+});
 
-  dateLabel: {
-    fontStyle: 'italic',
-    fontSize: '12px',
-    '&:hover': {
-      cursor: 'default',
-    },
+export const OrganizationName = styled('p')({
+  fontSize: '0.9rem',
+  display: 'flex',
+  alignItems: 'end',
+  padding: '0 5px',
+  '&:hover': {
+    cursor: 'default',
   },
+});
 
-  emptyDescription: {
-    fontSize: '0.9rem',
-    textAlign: 'left',
-    fontStyle: 'italic',
+export const StyledIconButton = styled('button')({
+  background: 'transparent',
+  border: 'none',
+  '&:hover': {
+    cursor: 'default',
   },
+});
 
-  descriptionLabel: {
-    height: 'fit-content',
-    fontStyle: 'italic',
-    '&:hover': {
-      cursor: 'default',
-    },
+export const DateLabel = styled(Typography)({
+  fontStyle: 'italic',
+  fontSize: '12px',
+  '&:hover': {
+    cursor: 'default',
   },
+});
 
-  name: {
-    height: 'fit-content',
-    textAlign: 'left',
-    fontWeight: 'bold',
-  },
+export const EmptyDescription = styled('p')({
+  fontSize: '0.9rem',
+  textAlign: 'left',
+  fontStyle: 'italic',
+});
 
-  status: {
-    padding: '5px 20px',
-    width: 'fit-content',
-    border: '1px solid transparent',
-    fontSize: '12px',
-    '&:hover': {
-      cursor: 'default',
-    },
+export const DescriptionLabel = styled('p')({
+  height: 'fit-content',
+  fontStyle: 'italic',
+  '&:hover': {
+    cursor: 'default',
   },
+});
 
-  styledChip: {
-    padding: '5px 6px !important',
-    color: theme.palette.secondary.text,
-    fontSize: '14px',
-    textTransform: 'uppercase',
-    fontWeight: 400,
-    height: 'unset',
-    borderRadius: '100px',
-    border: `0.5px solid ${theme.palette.secondary.default}`,
-    background: theme.palette.secondary.white,
-    maxWidth: '230px',
-    '.MuiChip-avatar': {
-      margin: '0',
-    },
-    '&:hover': {
-      cursor: 'default',
-    },
-  },
+export const Name = styled(Typography)({
+  height: 'fit-content',
+  textAlign: 'left',
+  fontWeight: 'bold',
+});
 
-  createButtonWrapper: {
-    display: 'flex',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
+export const Status = styled('div')({
+  padding: '5px 20px',
+  width: 'fit-content',
+  border: '1px solid transparent',
+  fontSize: '12px',
+  '&:hover': {
+    cursor: 'default',
   },
+});
 
-  editButton: {
-    backgroundColor: Colors.keppelGreen,
-    '&:hover': {
-      backgroundColor: Colors.caribbeanGreen,
-    },
-    '@media (max-width: 768px)': {
-      minWidth: '50px',
-    },
-  },
+export const StyledChip = styled('div')(({ theme }) => ({
+  padding: '5px 6px',
+  color: theme.palette.secondary.text,
+  fontSize: '14px',
+  textTransform: 'uppercase',
+  fontWeight: 400,
+  height: 'unset',
+  borderRadius: '100px',
+  border: `0.5px solid ${theme.palette.secondary.default}`,
+  background: theme.palette.secondary.white,
+  maxWidth: '230px',
+  '& .MuiChip-avatar': {
+    margin: 0,
+  },
+  '&:hover': {
+    cursor: 'default',
+  },
+}));
+
+export const CreateButtonWrapper = styled('div')({
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+});
 
-  textButton: {
-    marginLeft: '0.5rem',
-    display: 'block',
-    '@media (max-width: 853px)': {
-      display: 'none',
-    },
+export const EditButton = styled('button')({
+  backgroundColor: '#00B39F',
+  '&:hover': {
+    backgroundColor: '#00D3a9',
   },
-
-  iconButton: {
-    minWidth: 'fit-content',
-    '&:hover': {
-      background: 'transparent',
-    },
-    padding: 0,
+  '@media (max-width: 768px)': {
+    minWidth: '50px',
   },
 });
 
-// TODO: replace above makestyles with below styled components in code
-export const BulkActionWrapper = styled(`div`)({
-  width: '100%',
-  padding: '0.8rem',
-  justifyContent: 'space-between',
-  marginTop: '0.18rem',
-  marginBottom: '1rem',
-  borderRadius: '.25rem',
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
+export const TextButton = styled('button')({
+  marginLeft: '0.5rem',
+  display: 'block',
+  '@media (max-width: 853px)': {
+    display: 'none',
+  },
 });
 
-export const Statistic = styled(`div`)({
-  display: 'flex',
-  justifyContent: 'center',
-  paddingX: '5px',
-  fontWeight: '400',
-  fontSize: '16px',
-  textAlign: 'center',
+export const IconButton = styled('button')({
+  minWidth: 'fit-content',
+  '&:hover': {
+    background: 'transparent',
+  },
+  padding: 0,
+  background: 'none',
+  border: 'none',
 });
-
-export default styles;
diff --git a/ui/pages/management/environments.js b/ui/pages/management/environments.js
index 9be93f5e6c0..b63f4e17fd5 100644
--- a/ui/pages/management/environments.js
+++ b/ui/pages/management/environments.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { NoSsr, withStyles } from '@material-ui/core';
+import { NoSsr } from '@mui/material';
 import { connect } from 'react-redux';
 import Head from 'next/head';
 import { EnvironmentComponent } from '../../components/Lifecycle';
-
-const styles = { paper: { maxWidth: '90%', margin: 'auto', overflow: 'hidden' } };
+import { Box } from '@mui/material';
 
 const Environments = () => {
   return (
@@ -12,9 +11,11 @@ const Environments = () => {
       <Head>
         <title>Environments | Meshery</title>
       </Head>
-      <EnvironmentComponent />
+      <Box sx={{ maxWidth: '90%', margin: 'auto', overflow: 'hidden' }}>
+        <EnvironmentComponent />
+      </Box>
     </NoSsr>
   );
 };
 
-export default withStyles(styles)(connect(null)(Environments));
+export default connect(null)(Environments);