Merge branch 'main' into 'feature/dashboard/dark-mode'

# Conflicts:
#   client/src/App.jsx
#   client/src/components/header.jsx
#   client/src/components/sidebar.jsx

client/src/App.jsx

@@ -3,11 +3,13 @@ import Header from './components/header.jsx';
 import Sidebar from './components/sidebar.jsx';
 import Widget from './components/Widget.jsx'
 import { Grid, GridItem, useRecipe } from "@chakra-ui/react"
+import CanvasHeader from './components/CanvasHeader.jsx'
 
 
 function App() {
   const recipe = useRecipe({ key: "canvas" });
   const styles = recipe();
+
   return (
     <Grid css={styles}
       templateRows="1fr 11fr"
@@ -23,12 +25,17 @@ function App() {
       </GridItem>
       <GridItem colSpan={1}>
         <Grid
-          templateRows="repeat(6 1fr)"
-          templateColumns="repeat(4 1fr)"
+          templateRows="repeat(12, 1fr)"
+          templateColumns="repeat(4, 1fr)"
           height="100%"
           width="100%"
-          >
-          <Widget />
+        >
+          <GridItem colSpan={4} rowSpan={1}>
+            <CanvasHeader />
+          </GridItem> 
+          <GridItem colSpan={4} rowSpan={5}>
+            <Widget />
+          </GridItem>
         </Grid>
       </GridItem>
     </Grid>
@@ -36,3 +43,5 @@ function App() {
 }
 
 export default App
+
+