added more explainer popovers to HTML+MUI, other modules, and add router headers.

Author: enigmawun

app/src/components/ContextMenu.tsx

@@ -1,6 +1,8 @@
 // import { BreakfastDiningOutlined } from '@mui/icons-material';
 import React, { useState, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
 /* eslint-disable */
 const CONTEXT_MENU_WIDTH = 225;
 const CONTEXT_MENU_HEIGHT = 380;
@@ -30,6 +32,7 @@ function ContextMenu({
 
   //@ts-ignore
   const appState = useSelector((store: RootState) => store.appState);
+  const buttonText = useSelector((store: RootState) => store.appState);
   //@ts-ignore
   const contextParam = useSelector((store: RootState) => store.contextSlice); // this is literally just passed in on everything else, i have no idea what it does, you can look it up, but other files are literally just taking it and passing it back in.
 
@@ -152,42 +155,38 @@ function ContextMenu({
 
     <div
       style={{
-        backgroundColor: targetColor,
+        backgroundColor: '#3b3b3b',
+        borderRadius: '8px',
+        border: '2px solid #1f1f1f',
+        display: 'flex',
         zIndex: '100080',
         margin: '0px',
-        padding: `${CONTEXT_MENU_PADDING}px`,
+        padding: `15px`,
         position: 'fixed',
         left: `${xOff}px`,
-        top: `${yOff}px`,
-        width: `${CONTEXT_MENU_WIDTH}px`,
-        height: `${CONTEXT_MENU_HEIGHT}px`
+        top: `${yOff}px`
       }}
       ref={PanRef}
     >
       {menuTypeState === 'CanvasElement' && (
         <div>
-          {false && (
-            <div
-              style={{
-                backgroundColor: 'green',
-                width: '500px',
-                height: '500px',
-                zIndex: '99999999999999999'
-              }}
-            >
-              ANNOYING POPUP!!!!!
-            </div>
-          )}
+          <Button
+            component="label"
+            aria-label="customize an element"
+            key="customize"
+          >
+            Customize Element
+          </Button>
           {openMenu !== 'editClassname' && (
-            <button
+            <div
+              className="popUpButtons"
               onClick={() => {
                 handleStandardFieldButtonClick(
                   'editClassname',
                   'attributes',
                   'cssclasses'
                 );
               }}
-              style={{ padding: '0px', margin: '0px', width: '100%' }}
               onMouseOver={() => {
                 console.log('open');
                 setAnnoyingPopupOpen(true);
@@ -197,14 +196,18 @@ function ContextMenu({
                 setAnnoyingPopupOpen(false);
               }}
             >
-              edit class list
-            </button>
+              Add classes
+            </div>
           )}
           {openMenu === 'editClassname' && (
-            <input
-              type="text"
-              autoFocus
+            <TextField
+              id="outlined-basic"
+              label="Add Classes"
+              variant="outlined"
+              size="small"
               value={singleMenuValue}
+              autoComplete="off"
+              sx={{ width: '156px', display: 'block', marginLeft: '8px' }}
               onChange={(event) => {
                 singleMenuValueChange(
                   event,
@@ -213,38 +216,36 @@ function ContextMenu({
                   'cssclasses'
                 );
               }}
-              style={{
-                border: 'none',
-                padding: '0px',
-                margin: '0px',
-                marginTop: '1px',
-                width: `${CONTEXT_MENU_WIDTH - CONTEXT_MENU_PADDING * 2}px`,
-                height: ELEMENT_HEIGHT_SIZE,
-                backgroundColor: `rgba(0, 0, 0, 0)`,
-                overflow: 'hidden'
-              }}
-            ></input>
+            />
           )}
-          <hr style={{ fontSize: '8px' }} />
+
           {openMenu !== 'editText' && (
-            <button
+            <div
+              className="popUpButtons"
               onClick={() => {
                 handleStandardFieldButtonClick(
                   'editText',
                   'attributes',
                   'comptext'
                 );
               }}
-              style={{ padding: '0px', margin: '0px', width: '100%' }}
             >
-              edit text
-            </button>
+              Edit inner text
+            </div>
           )}
           {openMenu === 'editText' && (
-            <input
-              type="text"
-              autoFocus
+            <TextField
+              id="outlined-basic"
+              label="Edit Inner Text"
+              variant="outlined"
               value={singleMenuValue}
+              autoComplete="off"
+              size="small"
+              sx={{
+                width: '156px',
+                display: 'block',
+                marginLeft: '8px'
+              }}
               onChange={(event) => {
                 singleMenuValueChange(
                   event,
@@ -253,37 +254,31 @@ function ContextMenu({
                   'comptext'
                 );
               }}
-              style={{
-                border: 'none',
-                padding: '0px',
-                margin: '0px',
-                marginTop: '1px',
-                width: `${CONTEXT_MENU_WIDTH - CONTEXT_MENU_PADDING * 2}px`,
-                height: ELEMENT_HEIGHT_SIZE,
-                backgroundColor: `rgba(0, 0, 0, 0)`,
-                overflow: 'hidden'
-              }}
-            ></input>
+            />
           )}
           {openMenu !== 'editLink' && (
-            <button
+            <div
+              className="popUpButtons"
               onClick={() => {
                 handleStandardFieldButtonClick(
                   'editLink',
                   'attributes',
                   'complink'
                 );
               }}
-              style={{ padding: '0px', margin: '0px', width: '100%' }}
             >
-              edit link (?)
-            </button>
+              Add a link
+            </div>
           )}
           {openMenu === 'editLink' && (
-            <input
-              type="text"
-              autoFocus
+            <TextField
+              id="outlined-basic"
+              label="Edit Link"
+              variant="outlined"
+              size="small"
               value={singleMenuValue}
+              autoComplete="off"
+              sx={{ width: '156px', display: 'block', marginLeft: '8px' }}
               onChange={(event) => {
                 singleMenuValueChange(
                   event,
@@ -292,38 +287,32 @@ function ContextMenu({
                   'complink'
                 );
               }}
-              style={{
-                border: 'none',
-                padding: '0px',
-                margin: '0px',
-                marginTop: '1px',
-                width: `${CONTEXT_MENU_WIDTH - CONTEXT_MENU_PADDING * 2}px`,
-                height: ELEMENT_HEIGHT_SIZE,
-                backgroundColor: `rgba(0, 0, 0, 0)`,
-                overflow: 'hidden'
-              }}
-            ></input>
+            />
           )}
-          <hr style={{ fontSize: '8px' }} />
+
           {openMenu !== 'editBackgroundColor' && (
-            <button
+            <div
+              className="popUpButtons"
               onClick={() => {
                 handleStandardFieldButtonClick(
                   'editBackgroundColor',
                   'style',
                   'backgroundColor'
                 );
               }}
-              style={{ padding: '0px', margin: '0px', width: '100%' }}
             >
-              set background color
-            </button>
+              Set background color
+            </div>
           )}
           {openMenu === 'editBackgroundColor' && (
-            <input
-              type="text"
-              autoFocus
+            <TextField
+              id="outlined-basic"
+              label="Set Background Color"
+              variant="outlined"
+              size="small"
               value={singleMenuValue}
+              autoComplete="off"
+              sx={{ width: '156px', display: 'block', marginLeft: '8px' }}
               onChange={(event) => {
                 singleMenuValueChange(
                   event,
@@ -332,17 +321,7 @@ function ContextMenu({
                   'backgroundColor'
                 );
               }}
-              style={{
-                border: 'none',
-                padding: '0px',
-                margin: '0px',
-                marginTop: '1px',
-                width: `${CONTEXT_MENU_WIDTH - CONTEXT_MENU_PADDING * 2}px`,
-                height: ELEMENT_HEIGHT_SIZE,
-                backgroundColor: `rgba(0, 0, 0, 0)`,
-                overflow: 'hidden'
-              }}
-            ></input>
+            />
           )}
         </div>
       )}