Add button when no widgets populate the canvas

client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx

@@ -0,0 +1,28 @@
+import { Box, Heading } from '@chakra-ui/react'
+
+export default function FirstWidgetButton() {
+
+    return (
+        <Box
+            p={6}
+            m={4}
+            borderRadius="md" 
+            boxShadow="md"
+            border="2px dashed"
+            borderColor="gray.300"
+            bg="gray.50"
+            textAlign="center"
+            cursor="pointer"
+            _hover = {{
+                bg: "gray.100",
+                borderColor: "gray.400",
+                boxShadow: "lg",
+            }}
+            transition="all 0.2s ease-in-out"
+        >
+            <Heading fontWeight="bold" fontSize="xl" color="gray.700">
+                Add First Widget
+            </Heading>
+        </Box>
+    );
+}

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -1,6 +1,7 @@
 import GridLayout, { WidthProvider } from 'react-grid-layout';
 import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
 import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
+import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';
 
 export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray}) {
   console.log("rendering MyDashboard");
@@ -24,6 +25,22 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
     });
   };
 
+  if ( !widgetArray.length ) {
+    return (
+      <Flex
+        key="first-widget"
+        align="center"
+        justify="center"
+        height="300px"
+        w="100%"
+        bg="gray.150"
+        borderRadius="md"
+      >
+        <FirstWidgetButton />  
+      </Flex>
+    );
+  }
+
   return (
     <chakra.div width="100%">
       <ResponsiveGridLayout
@@ -41,14 +58,18 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         position="relative"
         resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
       >
-        {merged.map((item) => {
-          const Widget = item.widget;
-          return (
-            <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
-              <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
-            </Flex>
-          )
-        })}
+        
+         { merged.map((item) => {
+            const Widget = item.widget;
+            return (
+              <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
+                <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
+              </Flex>
+            );
+          })
+        }
+          
+        
       </ResponsiveGridLayout>
     </chakra.div>
   );

client/src/components/Sidebar/Sidebar.jsx

@@ -94,13 +94,14 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
         )
       })}
       <ColorModeButton 
-      onClick={
-        () => {
-          setDarkMode(!darkMode);
-          toggleColorMode();
-        }}
-      position="absolute" 
-      bottom="2"/>
+        onClick={
+          () => {
+            setDarkMode(!darkMode);
+            toggleColorMode();
+          }}
+        position="absolute" 
+        bottom="2"
+      />
     </Box>
   );
 }