added back headerbutton on modulepanel, fixed custom elements panel headerbutton centering when it was accessed from the module panel

Author: enigmawun

app/src/components/left/CreatePanel.tsx

@@ -220,14 +220,15 @@ const CreatePanel = (props): JSX.Element => {
 
   return (
     <div className={'MUIItems'}>
-      {/* <HeaderButton
-        isThemeLight={props.isThemeLight}
-        infoText={`Add more HTML elements to drag and drop onto your canvas. 
-        Each element requires a tag. For a list of all possible HTML elements,
-        please refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element.`}
-        headerName={'Custom Elements'}
-        id={'CustomElementsBtn'}
-      /> */}
+      <Button
+        component="label"
+        aria-label="Custom Elements"
+        id="customElements"
+        key="customElements-header"
+        textAlign="center"
+      >
+        Custom Elements
+      </Button>
       <HTMLPanel isThemeLight={props.isThemeLight} />
       {makeMenuCategory([
         state.HTMLTypes.filter((type) => type.id > 10000).map(

app/src/components/left/HTMLPanel.tsx

@@ -206,7 +206,18 @@ const HTMLPanel = (props): JSX.Element => {
               vertical: 'bottom',
               horizontal: 'left'
             }}
-          ></Popover>
+          >
+            <div className={classes.popover}>
+              <div className={classes.popoverIcon}>
+                <HelpIcon id={id} size="small" />
+              </div>
+              <div>
+                Add modules to create a canvas for grouping your components.
+                Once created, you can drag modules into other modules to link
+                them. Each module will be exported as its own file.
+              </div>
+            </div>
+          </Popover>
         </div>
         <div className={classes.inputWrapper}>
           <TextField
@@ -272,6 +283,19 @@ const useStyles = makeStyles({
     marginTop: '10px',
     width: '150px',
     borderRadius: '5px'
+  },
+  popover: {
+    backgroundColor: '#ffdbbb',
+    display: 'flex',
+    color: 'black',
+    fontSize: '0.8rem',
+    padding: '8px',
+    width: '300px'
+  },
+  popoverIcon: {
+    paddingRight: '10px',
+    paddingLeft: '8px',
+    paddingTop: '10px'
   }
 });
 

app/src/components/left/ModulePanel.tsx

@@ -53,7 +53,15 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
   return (
     <div className="modulePanelContainer">
       {isEditingModule ? (
-        <CreatePanel />
+        <div
+          className="createComponent"
+          style={{
+            color: '#f7f4dc',
+            textAlign: 'center'
+          }}
+        >
+          <CreatePanel />
+        </div>
       ) : (
         <div
           className="createComponent"
@@ -94,34 +102,42 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
               <ComponentsContainer
                 handleClickEditModule={handleClickEditModule}
               />
-              <HeaderButton
-                headerName="Add Router"
-                infoText="Turn a module into a single page app with a router."
-              />
-              <Grid container justifyContent="space-around" columnSpacing={2}>
-                {htmlTypesToRender.map((option) => {
-                  if (
-                    (option.name === 'Switch' ||
-                      option.name === 'LinkTo' ||
-                      option.name === 'Route') &&
-                    state.projectType === 'Classic React'
-                  ) {
-                    return (
-                      <HTMLItem
-                        name={option.name}
-                        key={`html-${option.name}`}
-                        id={option.id}
-                        icon={option.icon}
-                        handleDelete={handleDelete}
-                      />
-                    );
-                  }
-                })}
-              </Grid>
             </div>
           )}
         </div>
       )}
+      <div
+        className="createComponent"
+        style={{
+          color: '#f88e16',
+          textAlign: 'center'
+        }}
+      >
+        <HeaderButton
+          headerName="Add Router"
+          infoText="Turn a module into a single page app with a router."
+        />
+      </div>
+      <Grid container justifyContent="space-around" columnSpacing={2}>
+        {htmlTypesToRender.map((option) => {
+          if (
+            (option.name === 'Switch' ||
+              option.name === 'LinkTo' ||
+              option.name === 'Route') &&
+            state.projectType === 'Classic React'
+          ) {
+            return (
+              <HTMLItem
+                name={option.name}
+                key={`html-${option.name}`}
+                id={option.id}
+                icon={option.icon}
+                handleDelete={handleDelete}
+              />
+            );
+          }
+        })}
+      </Grid>
     </div>
   );
 };

app/src/components/right/ComponentPanelItem.tsx

@@ -82,8 +82,7 @@ const ComponentPanelItem: React.FC<{
         border: '2px solid',
         borderRadius: '10px',
         borderColor: '#2D313A',
-        margin: '5px 0px',
-        width: '100vw',
+        width: '200px',
         maxWidth: '240px',
         height: '3rem',
         boxSizing: 'border-box',