updated header so all styling is now in the designated themes file

client/src/theme.js

@@ -1,17 +1,41 @@
 import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";
 
-//—————RECIPES—————//
-const headerRecipe = defineRecipe({
+// CONSOLIDATED ✔
+const headerRecipe = defineSlotRecipe({
+  slots: ["root", "search_bar", "user_info"],
   base: {
-    bg: "{transparent}",
-    color: "text",
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  }
+    root: {
+      bg: "{transparent}",
+      color: "text",
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      pl: 3,
+    },
+    search_bar: {
+      width: "100%",
+      // input element in search bar component
+      "& input": {
+        width: "410px",
+      }
+    },
+    user_info: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      gap: 3,
+      pr: 6,
+
+      // The Text component
+      "& p": {
+        fontWeight: "bold",
+        fontSize:"16px"     // equivalent to chakra 'md'
+      }
+    }
+  },
 });
 
 // CONSOLIDATED ✔
@@ -208,9 +232,18 @@ const sidebarRecipe = defineSlotRecipe({
   }
 });
 
+// CONSOLIDATED ✔
 const dashboardRecipe = defineRecipe({
   base: {
-    bg: "{MainBackground}"
+    height: "100vh",
+    width: "100vw",
+    bg: "{MainBackground}",
+
+    // selects the third div in the grid layout (the canvas)
+    "& > div:nth-of-type(3)": {
+      width: "100%",
+      overflow: "auto",
+    }
   }
 });
 
@@ -484,12 +517,12 @@ const config= defineConfig({
       },
     },
     recipes: {
-      header: headerRecipe,
       dashboard: dashboardRecipe,
       canvas: canvasRecipe,
       glassTab: glassTabRecipe
     },
     slotRecipes: {
+      header: headerRecipe,
       sidebar: sidebarRecipe,
       // widget: widgetRecipe,
       glassPanel: glassPanelRecipe,
@@ -497,4 +530,6 @@ const config= defineConfig({
   },
 });
 
+
+// Define semantic tokens and export recipes
 export const system = createSystem(defaultConfig, config);