changed styling of form group for textfields for module panel, turned header buttons into separate modules

Author: enigmawun

app/src/components/left/HTMLPanel.tsx

@@ -113,14 +113,15 @@ const HTMLPanel = (props): JSX.Element => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-
+    console.log('did submit');
     if (tag.trim() === '' || name.trim() === '') return triggerError('empty');
     if (!tag.charAt(0).match(/[a-zA-Z]/) || !name.charAt(0).match(/[a-zA-Z]/))
       return triggerError('letters');
     if (!alphanumeric(tag) || !alphanumeric(name))
       return triggerError('symbolsDetected');
     if (checkNameDupe(tag) || checkNameDupe(name)) return triggerError('dupe');
     if (name.length > 10) return triggerError('length');
+    setAlertOpen(true);
     createOption(tag, name);
     resetError();
   };
@@ -143,8 +144,6 @@ const HTMLPanel = (props): JSX.Element => {
     };
   }, []);
 
-  const handleAlertOpen = () => setAlertOpen(true);
-
   const handleAlertClose = (
     event: React.SyntheticEvent | Event,
     reason?: string
@@ -162,126 +161,84 @@ const HTMLPanel = (props): JSX.Element => {
 
   return (
     <>
-      <div className="HTMLItemCreate">
-        <div className={`${classes.addComponentWrapper}`}>
-          <div className={classes.inputWrapper}>
-            <form onSubmit={handleSubmit} className="customForm">
-              <TextField
-                id="outlined-basic"
-                label="Element Name"
-                variant="outlined"
-                size="small"
-                value={name}
-                autoComplete="off"
-                placeholder="Element Name"
-                sx={{ width: '80%' }}
-                onChange={handleNameChange}
-                helperText={errorMsg}
-              />
-              <div
-                style={{ display: 'flex', alignItems: 'center', width: '100%' }}
-              >
-                <TextField
-                  id="outlined-basic"
-                  label="HTML Tag"
-                  variant="outlined"
-                  size="small"
-                  value={tag}
-                  autoComplete="off"
-                  placeholder="HTML Tag"
-                  sx={{ width: '80%' }}
-                  onChange={handleTagChange}
-                  helperText={errorMsg}
-                />
-                <Fab
-                  id="submitButton"
-                  type="submit"
-                  color="primary"
-                  aria-label="add"
-                  size="small"
-                  value="Add Element"
-                  sx={{ width: '15%', height: 40, borderRadius: 1 }}
-                  onClick={handleAlertOpen}
-                >
-                  <AddIcon />
-                </Fab>
-              </div>
-            </form>
-          </div>
+      <form onSubmit={handleSubmit} className={classes.customForm}>
+        <div className={classes.inputWrapper}>
+          <TextField
+            id="outlined-basic"
+            label="Element Name"
+            variant="outlined"
+            size="small"
+            value={name}
+            autoComplete="off"
+            sx={{ width: '80%' }}
+            onChange={handleNameChange}
+            helperText={errorMsg}
+          />
         </div>
-      </div>
-      <>
-        <Snackbar
-          open={alertOpen}
-          autoHideDuration={3000}
-          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        <div className={classes.inputWrapper}>
+          <TextField
+            id="outlined-basic"
+            label="HTML Tag"
+            variant="outlined"
+            size="small"
+            value={tag}
+            autoComplete="off"
+            sx={{ width: '80%' }}
+            onChange={handleTagChange}
+            helperText={errorMsg}
+          />
+          <Fab
+            id="submitButton"
+            type="submit"
+            color="primary"
+            aria-label="add"
+            size="small"
+            value="Add Element"
+            sx={{ width: '15%', height: 40, borderRadius: 1 }}
+            onClick={handleSubmit}
+          >
+            <AddIcon />
+          </Fab>
+        </div>
+      </form>
+
+      <Snackbar
+        open={alertOpen}
+        autoHideDuration={3000}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        onClose={handleAlertClose}
+      >
+        <Alert
           onClose={handleAlertClose}
+          severity="success"
+          sx={{ width: '100%', color: 'white', backgroundColor: '#f88e16' }}
         >
-          <Alert
-            onClose={handleAlertClose}
-            severity="success"
-            sx={{ width: '100%', color: 'white', backgroundColor: '#f88e16' }}
-          >
-            HTML Tag Created!
-          </Alert>
-        </Snackbar>
-      </>
+          HTML Tag Created!
+        </Alert>
+      </Snackbar>
     </>
   );
 };
 
 const useStyles = makeStyles({
-  inputField: {
-    marginTop: '10px',
-    borderRadius: '5px',
-    whiteSpace: 'nowrap',
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    backgroundColor: 'rgba(255,255,255,0.15)',
-    margin: '0px 0px 0px 10px',
-    width: '100%',
-    height: '30px'
+  customForm: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'start'
   },
   inputWrapper: {
+    display: 'flex',
     width: '100%',
     marginBottom: '10px', // was originally 10px, decreased to 0 to decrease overall menu height
-    alignItems: 'center'
-  },
-  addComponentWrapper: {
-    width: '100%'
-  },
-  input: {
-    width: '500px',
-    whiteSpace: 'nowrap',
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    margin: '0px 0px 0px 0px',
-    alignSelf: 'center'
-  },
-  lightThemeFontColor: {
-    color: 'white',
-    '& .MuiInputBase-root': {
-      color: 'rgba (0, 0, 0, 0.54)'
-    }
-  },
-  darkThemeFontColor: {
-    color: '#ffffff',
-    '& .MuiInputBase-root': {
-      color: '#fff'
-    }
+    justifyContent: 'start'
   },
   errorMessage: {
     display: 'flex',
-    alignSelf: 'center',
+    alignSelf: 'start',
     fontSize: '11px',
     marginTop: '10px',
-    width: '150px'
-  },
-  errorMessageLight: {
-    color: '#6B6B6B'
-  },
-  errorMessageDark: {
-    color: 'white'
+    width: '150px',
+    borderRadius: '5px'
   }
 });
 

app/src/components/left/HeaderButton.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Popover, { PopoverProps } from '@mui/material/Popover';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import Button from '@mui/material/Button';
+import HelpIcon from '@mui/icons-material/Help';
+
+const HeaderButton = (props) => {
+  const [anchorEl, setAnchorEl] =
+    React.useState<PopoverProps['anchorEl']>(null);
+  const classes = useStyles();
+  const handleClickPopover = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  const id = open ? open : undefined;
+
+  return (
+    <div className={classes.headerButton}>
+      <Button
+        component="label"
+        aria-label={id}
+        id={id}
+        onClick={handleClickPopover}
+      >
+        {'Create Modules'}
+        <Popover
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'center'
+          }}
+          transformOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center'
+          }}
+        >
+          <div className={classes.popover}>
+            <div>
+              <HelpIcon id={id} size="small" />
+            </div>
+            <div>
+              Add modules to create a canvas for grouping your components.
+            </div>
+          </div>
+        </Popover>
+      </Button>
+    </div>
+  );
+};
+
+const useStyles = makeStyles({
+  popover: {
+    backgroundColor: 'white',
+    width: '200px',
+    color: 'black',
+    fontSize: '0.8rem',
+    padding: '10px'
+  }
+});
+export default HeaderButton;

app/src/components/left/ModulePanel.tsx

@@ -1,19 +1,21 @@
 import React, { useState } from 'react';
-
-import { Button, Box } from '@mui/material';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 import ComponentDrag from './ComponentDrag';
 import ComponentPanel from '../right/ComponentPanel';
 import { RootState } from '../../redux/store';
 import { useSelector } from 'react-redux';
 import ComponentsContainer from './ComponentsContainer';
 import CreatePanel from './CreatePanel';
+import HeaderButton from './HeaderButton';
 
 interface ModulePanelProps {
   isThemeLight: boolean;
 }
-
-const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
+const ModulePanel: React.FC<ModulePanelProps> = ({
+  isThemeLight
+}: ModulePanelProps) => {
   const state = useSelector((store: RootState) => store.appState);
   const [isCreatingModule, setIsCreatingModule] = useState(false);
   const [isEditingModule, setIsEditingModule] = useState(false);
@@ -30,26 +32,19 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
     setIsEditingModule(!isEditingModule);
   };
 
-  // Make visibility of custom components conditional ⭕️
-
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'top',
-        color: '#f7f4dc',
-        textAlign: 'center',
-        marginLeft: '15px'
-      }}
-    >
+    <div className="modulePanelContainer">
       {isEditingModule ? (
-        <CreatePanel isThemeLight={true} />
+        <CreatePanel />
       ) : (
-        <div>
-          <Button component="label">{'Create Modules'}</Button>
-          {/* {isCreatingModule ? ( */}
+        <div className="createComponent">
+          <HeaderButton
+            isThemeLight={true}
+            infoText={
+              'Add modules to create a canvas for grouping your components.'
+            }
+            headerName={'headerName'}
+          />
           <ComponentPanel
             setIsCreatingModule={setIsCreatingModule}
             isThemeLight={false}
@@ -59,7 +54,6 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
             isThemeLight={false}
             handleClickEditModule={handleClickEditModule}
           />
-
           {customComponents.length > 0 && (
             <div>
               <div
@@ -79,7 +73,7 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
           )}
         </div>
       )}
-    </Box>
+    </div>
   );
 };