initialised commit on the ui converted in mui to astryx and changed the design to doormile

src/layout/CommonLayout/index.js

@@ -2,37 +2,21 @@ import PropTypes from 'prop-types';
 import { lazy, Suspense } from 'react';
 import { Outlet } from 'react-router-dom';
 
-// material-ui
-import { Container, Toolbar } from '@mui/material';
+import { ProgressBar } from '@astryxdesign/core/ProgressBar';
 
 // project import
 import { dispatch, useSelector } from 'store';
 import { openComponentDrawer } from 'store/reducers/menu';
 
-// material-ui
-import { styled } from '@mui/material/styles';
-import LinearProgress from '@mui/material/LinearProgress';
-
 const Header = lazy(() => import('./Header'));
 const FooterBlock = lazy(() => import('./FooterBlock'));
 
 // ==============================|| Loader ||============================== //
 
-const LoaderWrapper = styled('div')(({ theme }) => ({
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  zIndex: 2001,
-  width: '100%',
-  '& > * + *': {
-    marginTop: theme.spacing(2)
-  }
-}));
-
 const Loader = () => (
-  <LoaderWrapper>
-    <LinearProgress color="primary" />
-  </LoaderWrapper>
+  <div style={{ position: 'fixed', top: 0, left: 0, zIndex: 2001, width: '100%' }}>
+    <ProgressBar label="Loading" isLabelHidden isIndeterminate />
+  </div>
 );
 
 // ==============================|| MINIMAL LAYOUT ||============================== //
@@ -56,10 +40,10 @@ const CommonLayout = ({ layout = 'blank' }) => {
       )}
       {layout === 'component' && (
         <Suspense fallback={<Loader />}>
-          <Container maxWidth="lg" sx={{ px: { xs: 0, sm: 2 } }}>
+          <div style={{ maxWidth: 1200, marginInline: 'auto', paddingInline: 8 }}>
             <Header handleDrawerOpen={handleDrawerOpen} layout="component" />
-            <Toolbar sx={{ my: 2 }} />
-          </Container>
+            <div style={{ minHeight: 64, marginBlock: 16 }} />
+          </div>
         </Suspense>
       )}
       {layout === 'blank' && <Outlet />}