feat: replace instruction modal with persistent keyboard shortcuts

Signed-off-by: PARTHIV PRATIM SAIKIA <parthivsaikia985@gmail.com>

Author: parthivsaikia

site/src/pages/index.js

@@ -1,18 +1,53 @@
-import React, { useState } from "react";
+import React from "react";
+import styled from "styled-components"; // Ensure you have styled imported
 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 "@sistent/sistent";
-import InstructionsModal from "../components/utils/instructionsModal";
+import { SistentThemeProviderWithoutBaseLine, Box } from "@sistent/sistent";
+
+const Kbd = styled.kbd`
+  background-color: ${({ theme }) =>
+    theme === lightTheme ? "#f4f4f4" : "#2b2b2b"};
+  border: 1px solid
+    ${({ theme }) => (theme === lightTheme ? "#d1d5da" : "#444")};
+  border-bottom-color: ${({ theme }) =>
+    theme === lightTheme ? "#c6cbd1" : "#444"};
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0
+    ${({ theme }) => (theme === lightTheme ? "#c6cbd1" : "#444")};
+  color: ${({ theme }) => (theme === lightTheme ? "#444" : "#e6e6e6")};
+  display: inline-block;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 3px 6px;
+  margin-right: 6px;
+  vertical-align: middle;
+`;
+
+const InstructionsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-top: 16px;
+  font-size: 0.9rem;
+  color: ${({ theme }) => (theme === lightTheme ? "#666" : "#aaa")};
+
+  span {
+    display: flex;
+    align-items: center;
+  }
+`;
 
 const IndexPage = () => {
-  // const themesistent = useTheme();
   const [theme, toggleTheme] = useDarkMode();
   const themeMode = theme === "light" ? lightTheme : darkTheme;
-  const [open, setOpen] = useState(false);
 
   return (
     <SistentThemeProviderWithoutBaseLine>
@@ -21,21 +56,45 @@ const IndexPage = () => {
         <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)}
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column", // Changed to column to stack title and text
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 2,
+                mb: 4,
+              }}
             >
-              Show Instructions
-            </Button>
-          </Box>
-          <InstructionsModal open={open} onClose={() => setOpen(false)} />
+              <h1>Shape Builder</h1>
+
+              <p className="desc-text" style={{ margin: 0 }}>
+                Click on the grid to start creating a polygon. Each click adds a
+                point.
+              </p>
+
+              <InstructionsContainer theme={themeMode}>
+                <span>
+                  <Kbd theme={themeMode}>ENTER</Kbd>
+                  Close shape
+                </span>
+
+                <span>
+                  <Kbd theme={themeMode}>CTRL</Kbd> Snap to grid
+                </span>
+
+                <span>
+                  <Kbd theme={themeMode}>CTRL</Kbd> +{" "}
+                  <Kbd theme={themeMode}>Z</Kbd> Undo
+                </span>
+
+                <span>
+                  <Kbd theme={themeMode}>Maximize</Kbd> Visibility
+                </span>
+              </InstructionsContainer>
+            </Box>
+          </section>
+
           <ShapeBuilder />
         </Main>
         <Footer />