added initial and final state colors in toolbox

Author: anserwaseem

src/components/Editor.tsx

@@ -1,10 +1,9 @@
-import { createContext, useRef, useState } from "react";
+import { createContext, useState } from "react";
 import {
   Alert,
   AlertTitle,
   Box,
   Button,
-  Divider,
   Grid,
   Slider,
   Snackbar,
@@ -206,7 +205,9 @@ export const Editor = () => {
 
     if (PossibleTransitionValues.includes(row.state)) {
       setAlertMessage(
-        `State name cannot be ${PossibleTransitionValues.join(", ")}`
+        `State name cannot be one of the following: ${PossibleTransitionValues.join(
+          ", "
+        )}`
       );
       return;
     }

src/consts/Colors.ts

@@ -11,7 +11,7 @@ export const transitionColor = "coral";
 export const transitionHoverColor = "IndianRed";
 export const transitionSelectedColor = "black";
 
-export const startingStateColor = "#ff99bb"; // pink tone
+export const startingStateColor = "lightblue"; // pink tone
 
 export const appBarBackgroundColor = "rgba(148, 148, 148, 0.15)";
 export const drawerHeaderBoxShadow =

src/consts/ToolboxStateSize.ts

@@ -0,0 +1 @@
+export const ToolboxStateSize = 55;

src/features/Playground.tsx

@@ -11,7 +11,13 @@ import { useEffect } from "react";
 import { XarrowCoreProps } from "./components/playground/props/XarrowProps";
 import { DataContext } from "../components/Editor";
 import { useContext } from "react";
-import { Box } from "@mui/material";
+import { Box, Grid } from "@mui/material";
+import {
+  stateFinalColor,
+  stateInitialColor,
+  stateInitialFinalColor,
+} from "../consts/Colors";
+import { ToolboxStateSize } from "../consts/ToolboxStateSize";
 
 const Playground = (props: PlaygroundProps) => {
   console.log("re rendering Playground: props", props);
@@ -80,13 +86,13 @@ const Playground = (props: PlaygroundProps) => {
               transition={transition}
             />
           ))}
-          
+
           <div className="toolboxMenu">
             <Box>Drag & drop me!</Box>
             {/* <div className="toolboxTitle">Drag & drop me!</div> */}
             <hr />
             <div className="toolboxContainer">
-              <div
+              <Box
                 className="state"
                 draggable
                 style={{
@@ -99,7 +105,55 @@ const Playground = (props: PlaygroundProps) => {
                 onTouchMove={props.handleDropDynamic}
               >
                 state
-              </div>
+              </Box>
+
+              <Grid
+                container
+                direction="column"
+                justifyContent="center"
+                alignItems="center"
+                spacing={1}
+              >
+                <Grid item>
+                  <Box
+                    className="state"
+                    sx={{
+                      width: `${ToolboxStateSize}px`,
+                      height: `${ToolboxStateSize}px`,
+                      borderRadius: `${ToolboxStateSize}px`,
+                      backgroundColor: stateInitialColor,
+                    }}
+                  >
+                    Initial
+                  </Box>
+                </Grid>
+                <Grid item>
+                  <Box
+                    className="state"
+                    sx={{
+                      width: `${ToolboxStateSize}px`,
+                      height: `${ToolboxStateSize}px`,
+                      borderRadius: `${ToolboxStateSize}px`,
+                      backgroundColor: stateFinalColor,
+                    }}
+                  >
+                    Final
+                  </Box>
+                </Grid>
+                <Grid item>
+                  <Box
+                    className="state"
+                    sx={{
+                      width: `${ToolboxStateSize}px`,
+                      height: `${ToolboxStateSize}px`,
+                      borderRadius: `${ToolboxStateSize}px`,
+                      backgroundColor: stateInitialFinalColor,
+                    }}
+                  >
+                    Initial Final
+                  </Box>
+                </Grid>
+              </Grid>
             </div>
           </div>
         </div>