Modified create component menu styling and added a few comments for readability/understanding

Author: Spencer-Lau

app/src/components/left/DragDropPanel.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable max-len */
+// THIS IS THE ADD COMPONENT MENU FROM WHERE COMPONENTS ARE CLICKED AND DRAGGED TO BE PLACED ON THE CANVAS
 import { useDispatch, useSelector } from 'react-redux';
 import Grid from '@mui/material/Grid';
 import React from 'react';
@@ -74,7 +75,7 @@ const DragDropPanel = (props): JSX.Element => {
             id="panel1a-header"
             className={classes.accordionSummary}
           >
-            <h3>Root Components</h3>
+            <h3>Root</h3>
           </AccordionSummary>
           <AccordionDetails>
             <ComponentDrag isVisible={true} isThemeLight={props.isThemeLight} />
@@ -89,16 +90,16 @@ const DragDropPanel = (props): JSX.Element => {
             id="panel1a-header"
             className={classes.accordionSummary}
           >
-            <h3>HTML Elements</h3>
+            <h3>Containers</h3>
           </AccordionSummary>
           <AccordionDetails
             sx={{
               display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'space-around',
+              justifyContent: 'column',
+              alignItems: 'center',
             }}
           >
-            <Grid container justifyContent="space-around" columnSpacing={2}>
+            <Grid container direction="column" spacing={2}>
               {htmlTypesToRender.map((option) => {
                 if (
                   !['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(
@@ -133,11 +134,11 @@ const DragDropPanel = (props): JSX.Element => {
           <AccordionDetails
             sx={{
               display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'space-around',
+              justifyContent: 'column',
+              alignItems: 'center',
             }}
           >
-            <Grid container justifyContent="space-around" columnSpacing={2}>
+            <Grid container direction="column" spacing={2}>
               {htmlTypesToRender.map((option) => {
                 if (
                   (option.name === 'Switch' ||

app/src/public/styles/style.css

@@ -121,8 +121,8 @@ span.material-symbols-outlined {
   padding: 0px;
   display: flex;
   height: 100%;
-  width: 280px;
-  min-width: 225px;
+  width: 200px;
+  min-width: 140px;
   flex-direction: column;
   align-content: center;
   position: relative;
@@ -218,14 +218,16 @@ span.material-symbols-outlined {
   display: flex;
 }
 
+/* THIS IS STYLING THE BUTTONS ON THE CREATE MENU */
 #HTMLItem {
+  justify-content: flex-start; 
   transition: 0.3s;
   border: 1px solid transparent;
   color: #f2fbf8;
-  padding: 10%;
+  padding: 0%;
   border-radius: 10px;
   box-shadow: #191919;
-  width: 120px;
+  width: 110px;
   overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;

app/src/redux/store.ts

@@ -28,18 +28,18 @@ import rootReducer from './reducers/rootReducer';
  * Defines a type representing the Redux store itself for use in typing contexts where the store object is used.
  */
 const store = configureStore({
-  reducer: rootReducer,
+  reducer: rootReducer, // combine all reducers into one rootReducer
   middleware: (getDefaultMiddleware) => {
     let ignoredPaths: string[] = [];
 
-    for (let i = 0; i < 21; i++) {
+    for (let i = 0; i < 21; i++) { // iterate through paths of the state and ignore specific properties from serializability checks
       ignoredPaths.push(`appState.HTMLTypes.${i}.icon`);
       ignoredPaths.push(`appState.HTMLTypes.${i}.icon.$$typeof`);
     }
 
-    return getDefaultMiddleware({
+    return getDefaultMiddleware({ // return getDefaultMiddleware but with customized serializability check
       serializableCheck: {
-        ignoredPaths,
+        ignoredPaths, // specified paths to be ignored for serializability checks
       },
     });
   },