Merge pull request #570 from bluewave-labs/feat/no-monitors

Added fallback UI in case the user has no monitors created

Client/src/Pages/Monitors/index.css

@@ -9,6 +9,13 @@
 .monitors h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
 }
+.monitors p.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+}
+.monitors h2:has(+ p),
+.monitors p.MuiTypography-root {
+  color: var(--env-var-color-5);
+}
 .monitors .MuiStack-root > button:not(.MuiIconButton-root) {
   font-size: var(--env-var-font-size-medium);
   height: var(--env-var-height-2);

Client/src/Pages/Monitors/index.jsx

@@ -253,42 +253,71 @@ const Monitors = () => {
             <Typography component="h1">
               Hello, {authState.user.firstName}
             </Typography>
-            <Button
-              level="primary"
-              label="Create new monitor"
-              onClick={() => {
-                navigate("/monitors/create");
-              }}
-            />
+            {monitorState.monitors?.length !== 0 && (
+              <Button
+                level="primary"
+                label="Create new monitor"
+                onClick={() => {
+                  navigate("/monitors/create");
+                }}
+              />
+            )}
           </Stack>
-          <Stack
-            gap={theme.gap.large}
-            direction="row"
-            justifyContent="space-between"
-          >
-            <ServerStatus title="Up" value={up} state="up" />
-            <ServerStatus title="Down" value={down} state="down" />
-            <ServerStatus title="Paused" value={0} state="pause" />
-          </Stack>
-          <Stack
-            gap={theme.gap.large}
-            p={theme.gap.xl}
-            border={1}
-            borderColor={theme.palette.otherColors.graishWhite}
-            backgroundColor={theme.palette.otherColors.white}
-            sx={{
-              borderRadius: `${theme.shape.borderRadius}px`,
-            }}
-          >
-            <Stack direction="row" alignItems="center">
-              <Typography component="h2">Current monitors</Typography>
-              <Box className="current-monitors-counter">
-                {monitorState.monitors.length}
-              </Box>
-              {/* TODO - add search bar */}
+          {monitorState.monitors?.length === 0 ? (
+            <Stack
+              alignItems="center"
+              backgroundColor={theme.palette.otherColors.white}
+              p={theme.gap.xxl}
+              gap={theme.gap.xs}
+              border={1}
+              borderRadius={`${theme.shape.borderRadius}px`}
+              borderColor={theme.palette.otherColors.graishWhite}
+            >
+              <Typography component="h2">No monitors found</Typography>
+              <Typography>
+                It looks like you don’t have any monitors set up yet.
+              </Typography>
+              <Button
+                level="primary"
+                label="Create your first monitor"
+                onClick={() => {
+                  navigate("/monitors/create");
+                }}
+                sx={{ mt: theme.gap.large }}
+              />
             </Stack>
-            <BasicTable data={data} paginated={true} />
-          </Stack>
+          ) : (
+            <>
+              <Stack
+                gap={theme.gap.large}
+                direction="row"
+                justifyContent="space-between"
+              >
+                <ServerStatus title="Up" value={up} state="up" />
+                <ServerStatus title="Down" value={down} state="down" />
+                <ServerStatus title="Paused" value={0} state="pause" />
+              </Stack>
+              <Stack
+                gap={theme.gap.large}
+                p={theme.gap.xl}
+                border={1}
+                borderColor={theme.palette.otherColors.graishWhite}
+                backgroundColor={theme.palette.otherColors.white}
+                sx={{
+                  borderRadius: `${theme.shape.borderRadius}px`,
+                }}
+              >
+                <Stack direction="row" alignItems="center">
+                  <Typography component="h2">Current monitors</Typography>
+                  <Box className="current-monitors-counter">
+                    {monitorState.monitors.length}
+                  </Box>
+                  {/* TODO - add search bar */}
+                </Stack>
+                <BasicTable data={data} paginated={true} />
+              </Stack>{" "}
+            </>
+          )}
         </>
       )}
       <Menu