Add Dashboard parent component to Header, Siderbar, Canvas in order to faciliate lifting state

client/src/App.jsx

@@ -1,49 +1,8 @@
-import { Global, css } from "@emotion/react";
-import Header from './components/layout/Header/Header.jsx';
-import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
-import Canvas from './components/layout/Canvas/Canvas.jsx';
-import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
+import Dashboard from './components/layout/Dashboard.jsx'
 
 function App() {
-  const recipe = useRecipe({ key: "canvas" });
-  const styles = recipe();
-
   return (
-  <>
-    <Global // change the background color of widget shadow when moving
-      styles={css`
-        .react-grid-placeholder {
-          background: #c0d2e3ff !important;
-          border-color: #a9b6c2ff !important;
-          box-shadow: 0 0 10px #c0d2e3ff !important;
-          opacity: 1 !important;
-          border-radius: 5px;
-        }
-
-        .react-resizable-handle-se {
-          position: sticky;
-          right: 0;
-          bottom: 0;
-        }
-      `}
-    />
-    <Grid css={styles}
-      templateRows="1fr 11fr"
-      templateColumns="1fr 20fr"
-      height="100vh"
-      width="100vw"
-    >
-      <GridItem rowSpan={1} colSpan={2}>
-        <Header />
-      </GridItem>
-      <GridItem colSpan={1}>
-        <Sidebar />
-      </GridItem>
-      <GridItem colSpan={1} width="100%">
-        <Canvas />
-      </GridItem> 
-    </Grid>
-    </>
+    <Dashboard />
   );
 }