Merge branch 'prod' into noahReduceBranch

Author: noahFavelo

CHANGE_LOG.md

@@ -8,19 +8,31 @@
 ### Potential Changes:
 
 - Export code does not actually build what it says it does - Bug fix: tags which are nested do not display accurate code in code preview
-- Delete all electron-related files and dependencies
-- Delete all webpack-related files and dependencies
 - Fully retire jest tests
 - Complete Vitest testing suite
-- Adding link for creation panel to reusable components tab
 - Make bottom panel only display context-relevant tabs
 - Moving chat link from bottom panel to upper right (would this require making it into a pop up?)
 - Migrate more state pieces into redux store??
 - Decluttering by adding right click and hover functionality
 - Move elements of tutorial into hover functionality
-- Get OAuth fully functional
 - Add built-in component templates to the marketplace
 
+### Changes:
+
+- Deleted all electron-related files and dependencies
+- Deleted all webpack-related files and dependencies
+- Deleted all babel-related files and dependencies (SL)
+- Deleted all jest-related files and dependencies (SL)
+- Migrated create create custom HTML component to left panel and completely removed from bottom panel (SL)
+- Migrated create create custom module component to left panel and completely removed from bottom panel (SL)
+- Migrated clear canvas to canvas container from nav bar and completely removed from nav bar (SL)
+- Removed page up and page down buttons and code from canvas container (SL)
+- OAuth fully functional
+
+### Recommendations for Future Enhancements:
+- Unify styling, we utilized a lot of inline styling to override prior version styling due to time
+- Light/Dark mode, suggest removing current code regarding it and reimplement from the ground up for light/dark themes
+
 ## Version 21.0.0 Changes
 
 ### Changes:

app/src/Dashboard/styles.css

@@ -30,7 +30,7 @@
   flex-direction: column-reverse;
   flex-flow: row wrap;
   flex-grow: 1;
-  overflow-y: scroll; 
+  overflow-y: scroll;
 }
 
 .projectInfo {
@@ -75,7 +75,7 @@
 }
 
 .header {
-  background-color: #0671e3;
+  background-color: #f88e16;
   color: rgba(255, 255, 255, 0.897);
   width: 100%;
   position: relative;

app/src/components/CustomEditIcon.tsx

@@ -5,24 +5,23 @@ import makeStyles from '@mui/styles/makeStyles';
 const useStyles = makeStyles({
   editIconContainer: {
     position: 'absolute',
-    right: '30%',
+    right: '5%',
     top: '50%',
     transform: 'translateY(-50%)',
     cursor: 'pointer',
     color: 'white',
     '&:hover': {
-      color: '#f88e16'
+      color: '#f88e16',
     },
-    fontSize: '6px'
-  }
+  },
 });
 
-const CustomEditIcon = () => {
+const CustomEditIcon = ({ handleClickEditModule }) => {
   const classes = useStyles();
   return (
     <div>
       <div className={classes.editIconContainer}>
-        <EditIcon fontSize="small" />
+        <EditIcon fontSize="small" onClick={handleClickEditModule}/>
       </div>
     </div>
   );

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -10,7 +10,7 @@ import {
   InputLabel,
   Select,
   TextField,
-  Button,
+  Button
 } from '@mui/material';
 import { addState } from '../../../../redux/reducers/slice/appStateSlice';
 import TableStateProps from './TableStateProps';
@@ -153,7 +153,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
       id: `${currentComponent.name}-${inputKey}`,
       key: inputKey,
       value: newVal,
-      type: inputType,
+      type: inputType
     };
 
     const setNewState = {
@@ -163,22 +163,22 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
         .toUpperCase()}${inputKey.slice(1)}`,
       key: `set${inputKey.slice(0, 1).toUpperCase()}${inputKey.slice(1)}`,
       value: '',
-      type: 'func',
+      type: 'func'
     };
     if (!inputTypeError) {
       dispatch(
         addState({
           newState: newState,
           setNewState: setNewState,
-          contextParam: contextParam,
-        }),
+          contextParam: contextParam
+        })
       );
 
       if (roomCode) {
         emitEvent('addStateAction', roomCode, {
           newState: newState,
           setNewState: setNewState,
-          contextParam: contextParam,
+          contextParam: contextParam
         });
       }
 
@@ -226,7 +226,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
             parentProps: currComponentCopy.stateProps,
             parentName: currComponentCopy.name,
             parentComponent: currComponentCopy,
-            parentPassedInProps: currComponentCopy.passedInProps,
+            parentPassedInProps: currComponentCopy.passedInProps
           };
         }
       }
@@ -301,7 +301,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
               style={{
                 height: '100%',
                 width: '100%',
-                margin: '0 auto',
+                margin: '0 auto'
               }}
             >
               <MenuItem value="" style={{ color: 'white' }}>
@@ -439,8 +439,8 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
             display: 'flex',
             flexDirection: 'column',
             width: `${40}px`,
-            color: '#0671E3',
-            justifyContent: 'center',
+            color: '#f88e16',
+            justifyContent: 'center'
           }}
         >
           <svg
@@ -488,35 +488,35 @@ const useStyles = makeStyles((theme: Theme) => ({
     margin: '0px 0px 0px 10px',
     width: '140px',
     height: '30px',
-    borderColor: 'white',
+    borderColor: 'white'
   },
   inputWrapper: {
     textAlign: 'center',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'space-between',
-    marginBottom: '15px',
+    marginBottom: '15px'
   },
   addComponentWrapper: {
     padding: 'auto',
     marginLeft: '21px',
     display: 'inline-block',
-    width: '100%',
+    width: '100%'
   },
   rootCheckBox: {
-    borderColor: '#0671e3',
-    padding: '0px',
+    borderColor: '#f88e16',
+    padding: '0px'
   },
   rootCheckBoxLabel: {
-    borderColor: '#0671e3',
+    borderColor: '#f88e16'
   },
   panelWrapper: {
     width: '100%',
     marginTop: '15px',
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   panelWrapperList: {
     minHeight: '120px',
@@ -525,34 +525,34 @@ const useStyles = makeStyles((theme: Theme) => ({
     width: '300px',
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   dragComponents: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     textAlign: 'center',
     width: '500px',
-    backgroundColor: '#0671e3',
-    border: '5px solid #0671e3',
+    backgroundColor: '#f88e16',
+    border: '5px solid #f88e16'
   },
   panelSubheader: {
     textAlign: 'center',
-    color: '#fff',
+    color: '#fff'
   },
   input: {},
   newComponent: {
     color: '#3c59ba',
     fontSize: '95%',
-    marginBottom: '20px',
+    marginBottom: '20px'
   },
   inputLabel: {
     fontSize: '1em',
-    marginLeft: '10px',
+    marginLeft: '10px'
   },
   btnGroup: {
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'column'
   },
   addComponentButton: {
     height: '42px',
@@ -563,71 +563,71 @@ const useStyles = makeStyles((theme: Theme) => ({
     margin: '-20px 0px 5px 150px',
     border: ' 1px solid #0671E3',
     borderRadius: '8px',
-    transition: '0.3s',
+    transition: '0.3s'
   },
   rootToggle: {
     color: '#696969',
-    fontSize: '0.85rem',
+    fontSize: '0.85rem'
   },
   lightThemeFontColor: {
-    color: 'white',
+    color: 'white'
   },
   darkThemeFontColor: {
-    color: '#fff',
+    color: '#fff'
   },
   greyThemeFontColor: {
-    color: 'white',
+    color: 'white'
   },
   formControl: {
     margin: '8px',
-    minWidth: 120,
+    minWidth: 120
   },
   selectEmpty: {
-    marginTop: '16px',
+    marginTop: '16px'
   },
   color: {
-    color: '#fff',
+    color: '#fff'
   },
   rootLight: {
     '& .MuiFormLabel-root': {
-      color: 'white',
+      color: 'white'
     },
-    margin: '5px',
+    margin: '5px'
   },
   rootDark: {
     '& .MuiFormLabel-root': {},
     '& .MuiOutlinedInput-notchedOutline': {},
-    margin: '5px',
+    margin: '5px'
   },
   underlineDark: {
-    borderBottom: '1px solid white',
+    borderBottom: '1px solid white'
   },
   rootUnderlineDark: {
     '& .-icon': {
-      color: '#fff',
+      color: '#fff'
     },
     '&::before': {
-      borderBottom: '1px solid #fff',
-    },
+      borderBottom: '1px solid #fff'
+    }
   },
   rootUnderlineLight: {
     '& .-icon': {
-      color: 'rgba(0,0,0,0.54)',
+      color: 'rgba(0,0,0,0.54)'
     },
     '&::before': {
-      borderBottom: '1px solid rgba(0,0,0,0.54)',
-    },
+      borderBottom: '1px solid rgba(0,0,0,0.54)'
+    }
   },
   inputTextDark: {
     '& .MuiInputBase-input': {
-      color: 'white',
-    },
+      color: 'white'
+    }
   },
   inputTextLight: {
     '& .MuiInputBase-input': {
-      color: 'white',
-    },
-  },
+      color: 'white'
+    }
+  }
 }));
 
 export default StatePropsPanel;

app/src/components/Tooltip.tsx

@@ -25,7 +25,6 @@ const Tooltip: React.FC<TooltipProps> = ({ label, isCollabTab, children }) => {
           style={{
             position: 'absolute',
             bottom: isCollabTab ? '120px' : 'none',
-            marginTop: !isCollabTab ? '45px' : 'none',
             left: '50%',
             transform: 'translateX(-50%)',
             padding: '5px 10px',