style changes

Author: enigmawun

app/src/components/left/CreateContainer.tsx

@@ -70,7 +70,7 @@ const CreateContainer = (props): JSX.Element => {
         justifyContent: 'top',
         color: '#f7f4dc',
         textAlign: 'center',
-        marginLeft: '15px',
+        marginLeft: '15px'
       }}
     >
       <CreateMenu />

app/src/components/left/CreateMenu.tsx

@@ -20,7 +20,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import InsertPhoto from '@mui/icons-material/InsertPhoto';
 import MUIItem from './MUIItem';
 import HTMLItem from './HTMLItem';
-import HTMLPanel from "./HTMLPanel";
+import HTMLPanel from './HTMLPanel';
 import ComponentDrag from './ComponentDrag';
 
 /**
@@ -42,15 +42,15 @@ const CreateMenu = (props): JSX.Element => {
 
   const [menuAnchor, setMenuAnchor] = React.useState<null | HTMLElement>(null);
   const [activeCategory, setActiveCategory] = React.useState<string | null>(
-    null,
+    null
   );
   const [menuLocked, setMenuLocked] = useState(false);
 
   const [isCreatingModule, setCreateModule] = useState(false);
   const [MUIMode, setMUIMode] = useState(false);
   const handleMenuOpen = (
     event: React.MouseEvent<HTMLButtonElement>,
-    category: string,
+    category: string
   ) => {
     setActiveCategory(category);
     setMenuAnchor(event.currentTarget);
@@ -81,24 +81,23 @@ const CreateMenu = (props): JSX.Element => {
     if (roomCode) {
       emitEvent('deleteElementAction', roomCode, {
         id,
-        contextParam,
+        contextParam
       });
     }
   };
 
   const handleClickAdd = () => {
     setCreateModule(true);
   };
-  // create a function to which you can pass in an array of strings, search
-  // both state.HTMLTypes and state.MUITypes to see if any of their type.names match
-  // an item in the array and return the item if so, depending on which list it originates from.
 
   const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
       handleClickAdd();
     }
   };
-
+  // create a function to which you can pass in an array of strings, search
+  // both state.HTMLTypes and state.MUITypes to see if any of their type.names match
+  // an item in the array and return the item if so, depending on which list it originates from.
   const findTypes = function (array) {
     if (MUIMode === true)
       return state.HTMLTypes.filter((type) => array.includes(type.name))
@@ -121,7 +120,7 @@ const CreateMenu = (props): JSX.Element => {
                 icon={option.icon}
                 handleDelete={handleDelete}
               />
-            ),
+            )
           )
         );
     else
@@ -134,7 +133,7 @@ const CreateMenu = (props): JSX.Element => {
             icon={option.icon}
             handleDelete={handleDelete}
           />
-        ),
+        )
       );
   };
   const HTMLElements = findTypes([
@@ -144,7 +143,7 @@ const CreateMenu = (props): JSX.Element => {
     'Header 2',
     'Span',
     'Label',
-    'Link',
+    'Link'
   ]);
 
   const InputElements = findTypes(['Input', 'Form', 'Button']);
@@ -153,7 +152,7 @@ const CreateMenu = (props): JSX.Element => {
     'Icon',
     'Avatar',
     'Badge',
-    'Img',
+    'Img'
   ]);
 
   const textComponents = findTypes([
@@ -162,7 +161,7 @@ const CreateMenu = (props): JSX.Element => {
     'Header 2',
     'Span',
     'Label',
-    'Link',
+    'Link'
   ]);
 
   // create containers - box/container/stack
@@ -172,7 +171,7 @@ const CreateMenu = (props): JSX.Element => {
     'Box',
     'Container',
     'Stack',
-    'Dividers',
+    'Dividers'
   ]);
 
   // create buttons -- button/floating button/chips
@@ -188,25 +187,25 @@ const CreateMenu = (props): JSX.Element => {
     'Checkbox',
     'Switch',
     'Rating',
-    'Slider',
+    'Slider'
   ]);
 
   // create lists - OL, UL, LI, TransferList
 
-  const lists = findTypes(['Ordered List', 'Unordered List', 'List']);
+  const lists = findTypes(['Ordered List', 'List', 'Unordered List']);
   //create forms -- Form, ButtonGroup, ToggleButtonGroup, Select, AutoComplete
   const HTMLlists = findTypes([
     'Ordered List',
-    'Unordered List',
     'List',
-    'Menu',
+    'Unordered List',
+    'Menu'
   ]);
   const forms = findTypes([
     'Form',
     'ButtonGroup',
     'ToggleButtonGroup',
     'Select',
-    'AutoComplete',
+    'AutoComplete'
   ]);
   // create displays --- Modal, POpover, Popper, Transition
   const displays = findTypes(['Modal', 'Popover', 'Popper', 'Transition']);
@@ -218,7 +217,7 @@ const CreateMenu = (props): JSX.Element => {
     'AppBar',
     'Tabs',
     'Card',
-    'Paper',
+    'Paper'
   ]);
   // create navigation -- menu, bottomnav, breadcrumbs, drawer, stepper, tabs, speeddial
   const navComponents = findTypes([
@@ -227,7 +226,7 @@ const CreateMenu = (props): JSX.Element => {
     'Breadcrumbs',
     'Drawer',
     'Stepper',
-    'Speed Dial',
+    'Speed Dial'
   ]);
 
   const makeMenuCategory = function (typeArray, name, idx) {
@@ -236,14 +235,10 @@ const CreateMenu = (props): JSX.Element => {
         <Box
           sx={{
             fontSize: '2rem',
-            textAlign: 'center',
+            textAlign: 'center'
           }}
         >
-          <Button
-            component="label"
-            id={name + '-button'}
-            key={name + idx}
-          >
+          <Button component="label" id={name + '-button'} key={name + idx}>
             {name}
           </Button>
         </Box>
@@ -268,46 +263,40 @@ const CreateMenu = (props): JSX.Element => {
             icon={option.icon}
             handleDelete={handleDelete}
           />
-        )),
+        ))
       ])}
       <FormGroup>
         <Box display="flex" alignItems="center" justifyContent="center">
-          <p style={{ fontSize: '0.8rem' }}>HTML</p>
+          <p className="smallerText blueText">HTML</p>
           <Switch
             checked={MUIMode}
             onChange={() => setMUIMode(!MUIMode)}
             inputProps={{ 'aria-label': 'HTML + MUI switch' }}
             sx={{ margin: '0 10px' }} // Adjust spacing between text and switch
           />
-          <p style={{ fontSize: '0.8rem' }}>HTML + MUI</p>
+          <p className="smallerText">
+            <span className="blueText">HTML + </span>
+            <span className="switchText-MUI orangeText"> MUI</span>
+          </p>
         </Box>
-        {/* <FormControlLabel
-          control={
-            <Switch
-              checked={MUIMode}
-              onChange={() => MUIMode === true ? setMUIMode(false) : setMUIMode(true)}
-            />
-          }
-          label={MUIMode ? 'HTML + MUI' : 'HTML'}
-        /> */}
       </FormGroup>
       {MUIMode
         ? [
-          [visualComponents, 'visual'],
-          [containers, 'containers'],
-          [buttons, 'buttons'],
-          [textComponents, 'text'],
-          [lists, 'lists'],
-          [displays, 'displays'],
-          [layouts, 'layouts'],
-          [forms, 'forms'],
-          [navComponents, 'navigation'],
-        ].map((item, idx) => makeMenuCategory(item[0], item[1], idx))
+            [visualComponents, 'visual'],
+            [containers, 'containers'],
+            [buttons, 'buttons'],
+            [textComponents, 'text'],
+            [lists, 'lists'],
+            [displays, 'displays'],
+            [layouts, 'layouts'],
+            [forms, 'forms'],
+            [navComponents, 'navigation']
+          ].map((item, idx) => makeMenuCategory(item[0], item[1], idx))
         : [
-          [HTMLElements, 'Text and Visual'],
-          [InputElements, 'Forms and Inputs'],
-          [HTMLlists, 'lists'],
-        ].map((item, idx) => makeMenuCategory(item[0], item[1], idx))}
+            [HTMLElements, 'Text and Visual'],
+            [InputElements, 'Forms and Inputs'],
+            [HTMLlists, 'lists']
+          ].map((item, idx) => makeMenuCategory(item[0], item[1], idx))}
     </div>
   );
 };

app/src/public/styles/style.css

@@ -131,8 +131,8 @@ span.material-symbols-outlined {
   padding: 0px;
   display: flex;
   height: 100%;
-  width: 240px;
-  min-width: 140px;
+  width: 282px;
+  min-width: 282px;
   flex-direction: column;
   align-content: center;
   position: relative;
@@ -237,22 +237,19 @@ span.material-symbols-outlined {
   padding: 10%;
   border-radius: 10px;
   box-shadow: #191919;
-  width: 110px;
-  overflow: hidden;
-  text-overflow: clip;
+  width: 120px;
   white-space: nowrap;
 }
 
 #HTMLItem:hover {
   background-color: #474545a8;
   color: #8ca8ff;
+  border-radius: 4px;
 }
 
 /* placeholder until button resizing */
 #MUIItem {
-  overflow: hidden;
-  text-overflow: clip;
-  white-space: nowrap;
+  white-space: wrap;
   transition: 0.3s;
   border: 1px solid transparent;
   color: #f2fbf8;
@@ -262,9 +259,20 @@ span.material-symbols-outlined {
   width: 110px;
 }
 
+.smallerText {
+  font-size: 0.8rem;
+}
+
+.blueText {
+  color: #8ca8ff;
+}
+
+.orangeText {
+  color: #f08c00;
+}
 #MUIItem:hover {
   background-color: #474545a8;
-  color: #8ca8ff;
+  color: #f08c00;
 }
 
 #submitButton {