Add: Instructions Modal

site/src/components/ShapeBuilder/index.js

@@ -1,7 +1,7 @@
 // /* global window */
 import React, { useEffect, useRef, useState } from "react";
-import { Wrapper, Controls, CanvasContainer, OutputBox, StyledSVG } from "./shapeBuilder.styles";
-import { Button, Typography } from "@layer5/sistent";
+import { Wrapper, CanvasContainer, OutputBox, StyledSVG } from "./shapeBuilder.styles";
+import { Button, Typography, Box } from "@layer5/sistent";
 
 // import { useTheme } from "@layer5/sistent/components/ThemeProvider";
 // import { useMediaQuery } from "@layer5/sistent/components/MediaQuery";
@@ -182,10 +182,10 @@ const ShapeBuilder = () => {
           <rect className="grid" width="100%" height="100%" fill="url(#grid)" />
         </StyledSVG>
         {error && (
-          <div style={{ 
-            position: 'absolute', 
-            top: '50%', 
-            left: '50%', 
+          <div style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
             transform: 'translate(-50%, -50%)',
             color: 'red',
             backgroundColor: 'white',
@@ -197,11 +197,11 @@ const ShapeBuilder = () => {
         )}
       </CanvasContainer>
 
-      <Controls>
+      <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, mt: 3, mb: 3, flexWrap: 'wrap' }}>
         <Button variant="contained" onClick={clearShape}>Clear</Button>
-        <Button variant="outlined" onClick={closeShape}>Close Shape</Button>
+        <Button variant="contained" onClick={closeShape}>Close Shape</Button>
         <Button variant="contained" onClick={handleMaximize}>Maximize</Button>
-      </Controls>
+      </Box>
 
       <OutputBox>
         <Typography variant="subtitle1" component="h6">

site/src/components/utils/instructionsModal.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { Modal, ModalBody, Typography, List, ListItem, ListItemText, ModalFooter } from "@layer5/sistent";
+
+const instructionPoints = [
+  {
+    primary: "Press CTRL + Enter to close the shape",
+    secondary: "It won’t draw the last position of your cursor, don’t stress!"
+  },
+  {
+    primary: "Hold CTRL to snap to grid",
+    secondary: "Snap to Grid is default, CTRL allows you to freely draw with precision"
+  },
+  {
+    primary: "CTRL + Z to undo",
+    secondary: "Undo the last point you placed"
+  },
+  {
+    primary: "Maximize for better visibility",
+    secondary: "Without maximize, it may appear tiny"
+  },
+];
+
+const InstructionsModal = ({open, onClose}) => {
+
+  return (
+    <Modal
+      open={open}
+      closeModal={onClose}
+      title="ShapeBuilder Instructions"
+      maxWidth="sm"
+    >
+      <ModalBody>
+        <List>
+          {instructionPoints.map(({ primary, secondary }, idx) => (
+            <ListItem key={idx}>
+              <ListItemText
+                primary={<Typography fontWeight="bold" color="text.primary">{primary}</Typography>}
+                secondary={<Typography variant="body2" color="text.secondary">{secondary}</Typography>}
+              />
+            </ListItem>
+          ))}
+        </List>
+      </ModalBody>
+      <ModalFooter variant="filled" helpText={"Refer to: https://docs.meshery.io/extensions/component-shape-guide"}>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default InstructionsModal;

site/src/pages/index.js

@@ -1,30 +1,46 @@
-import React from "react";
+import React, { useState } from "react";
 import { ThemeProvider } from "styled-components";
 import { GlobalStyle, Main, lightTheme, darkTheme } from "../styles/styles";
 import { useDarkMode } from "../components/useDarkMode";
 import Navigation from "../components/Navigation";
 import Footer from "../components/Footer";
 import ShapeBuilder from "../components/ShapeBuilder";
+import { Button, SistentThemeProviderWithoutBaseLine, Box } from "@layer5/sistent"
+import InstructionsModal from "../components/utils/instructionsModal";
 
 const IndexPage = () => {
+  // const themesistent = useTheme();
   const [theme, toggleTheme] = useDarkMode();
   const themeMode = theme === "light" ? lightTheme : darkTheme;
+  const [open, setOpen] = useState(false);
 
   return (
-    <ThemeProvider theme={themeMode}>
-      <GlobalStyle />
-      <Navigation theme={theme} toggleTheme={toggleTheme} />
-      <Main>
-        <section className="hero">
-          <h1>Shape Builder</h1>
-          <p className="desc-text">
-            Click on the grid to start creating a polygon. Each click adds a point.
-          </p>
-        </section>
-        <ShapeBuilder />
-      </Main>
-      <Footer />
-    </ThemeProvider>
+    <SistentThemeProviderWithoutBaseLine>
+      <ThemeProvider theme={themeMode}>
+        <GlobalStyle />
+        <Navigation theme={theme} toggleTheme={toggleTheme} />
+        <Main>
+          <section className="hero">
+            <h1>Shape Builder</h1>
+            <p className="desc-text">
+              Click on the grid to start creating a polygon. Each click adds a point.
+            </p>
+          </section>
+          <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
+            <Button
+              variant="contained"
+              sx={{ minWidth: "fit-content" }}
+              onClick={() => setOpen(true)}
+            >
+              Show Instructions
+            </Button>
+          </Box>
+          <InstructionsModal open={open} onClose={() => setOpen(false)} />
+          <ShapeBuilder />
+        </Main>
+        <Footer />
+      </ThemeProvider>
+    </SistentThemeProviderWithoutBaseLine>
   );
 };