improved sidepanel

martins5225 · martins5225 · commit 24ec51491048 · 2023-08-18T05:42:06.000+03:00
diff --git a/app/src/components/left/ContentArea.tsx b/app/src/components/left/ContentArea.tsx
@@ -14,7 +14,7 @@ const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
   return <Box hidden={value !== index}>{value === index && children}</Box>;
 };
 
-function ContentArea({ value }: { value: number | null }) {
+const ContentArea: React.FC<{ value: number | null }> = ({ value }) => {
   if (value === null) {
     return null;
   }
@@ -37,6 +37,6 @@ function ContentArea({ value }: { value: number | null }) {
       </div>
     </div>
   );
-}
+};
 
 export default ContentArea;
diff --git a/app/src/components/left/DragDropPanel.tsx b/app/src/components/left/DragDropPanel.tsx
@@ -38,11 +38,14 @@ const DragDropPanel = (props): JSX.Element => {
   return (
     <div className={`${!isDarkMode ? 'HTMLItems' : 'HTMLItemsDark'}`}>
       <div id="HTMLItemsTopHalf">
+        <h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>
+          HTML Elements
+        </h3>
         <Grid
           container
-          spacing={{ xs: 1, md: 1 }}
+          spacing={{ xs: 0.5, md: 0.5 }}
           columns={{ xs: 4, sm: 4, md: 4 }}
-          sx={{ maxWidth: '200px' }}
+          justifyContent="center"
         >
           {htmlTypesToRender.map((option) => {
             if (
@@ -66,27 +69,36 @@ const DragDropPanel = (props): JSX.Element => {
         </Grid>
         {state.projectType === 'Classic React' ? (
           <h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>
-            REACT ROUTER
+            React Router
           </h3>
         ) : null}
-        {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
+          container
+          spacing={{ xs: 0.5, md: 0.5 }}
+          columns={{ xs: 4, sm: 4, md: 4 }}
+          justifyContent="center"
+        >
+          {htmlTypesToRender.map((option) => {
+            if (
+              (option.name === 'Switch' ||
+                option.name === 'LinkTo' ||
+                option.name === 'Route') &&
+              state.projectType === 'Classic React'
+            ) {
+              return (
+                <Grid item xs={2} sm={2} md={2}>
+                  <HTMLItem
+                    name={option.name}
+                    key={`html-${option.name}`}
+                    id={option.id}
+                    Icon={option.icon}
+                    handleDelete={handleDelete}
+                  />
+                </Grid>
+              );
+            }
+          })}
+        </Grid>
 
         {state.projectType === 'Next.js' ? (
           <h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>Next.js</h3>
diff --git a/app/src/components/left/ElementsContainer.tsx b/app/src/components/left/ElementsContainer.tsx
@@ -1,4 +1,4 @@
-import { Drawer, List, ListItem, ListItemIcon } from '@mui/material';
+import { Box, Drawer, List, ListItem, ListItemIcon } from '@mui/material';
 import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -38,13 +38,22 @@ const ElementsContainer = (props): JSX.Element => {
   }, []);
 
   return (
-    <Grid container direction="column" alignItems="center">
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'top',
+        color: '#ffffff',
+        textAlign: 'center'
+      }}
+    >
       <h4>Drag and Drop</h4>
       <DragDropPanel />
       <div id={'CompBottomHalf'}>
         <ComponentDrag isThemeLight={props.isThemeLight} />
       </div>
-    </Grid>
+    </Box>
   );
 };
 
diff --git a/app/src/components/left/HTMLPanel.tsx b/app/src/components/left/HTMLPanel.tsx
@@ -1,13 +1,11 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import { Button, InputLabel } from '@mui/material';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+
+import { RootState } from '../../redux/store';
+import TextField from '@mui/material/TextField';
 import { addElement } from '../../redux/reducers/slice/appStateSlice';
 import makeStyles from '@mui/styles/makeStyles';
-import {
-  Button,
-  InputLabel
-} from '@mui/material';
-import TextField from '@mui/material/TextField';
-import { RootState } from '../../redux/store';
 
 /*
 DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -30,8 +28,10 @@ const HTMLPanel = (props): JSX.Element => {
   const [name, setName] = useState('');
   const [errorMsg, setErrorMsg] = useState('');
   const [errorStatus, setErrorStatus] = useState(false);
-  const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
-  const state = useSelector((store:RootState) => store.appState);
+  const isDarkMode = useSelector(
+    (store: RootState) => store.darkMode.isDarkMode
+  );
+  const state = useSelector((store: RootState) => store.appState);
   const dispatch = useDispatch();
   let startingID = 0;
   state.HTMLTypes.forEach((element) => {
@@ -338,7 +338,7 @@ const useStyles = makeStyles({
     alignSelf: 'center'
   },
   lightThemeFontColor: {
-    color: '#155084',
+    color: '#C6C6C6',
     '& .MuiInputBase-root': {
       color: 'rgba (0, 0, 0, 0.54)'
     }
diff --git a/app/src/components/right/ComponentPanel.tsx b/app/src/components/right/ComponentPanel.tsx
@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import { Button, Checkbox, FormControlLabel, InputLabel } from '@mui/material';
-import TextField from '@mui/material/TextField';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { addComponent } from '../../redux/reducers/slice/appStateSlice';
+
 import { RootState } from '../../redux/store';
+import TextField from '@mui/material/TextField';
+import { addComponent } from '../../redux/reducers/slice/appStateSlice';
+import makeStyles from '@mui/styles/makeStyles';
 
 // The component panel section of the left panel displays all components and has the ability to add new components
 const ComponentPanel = ({ isThemeLight }): JSX.Element => {
@@ -274,7 +275,7 @@ const useStyles = makeStyles({
     borderColor: '#186BB4'
   },
   newComponent: {
-    color: '#155084',
+    color: '#C6C6C6',
     fontSize: '95%',
     marginBottom: '20px'
   },
@@ -302,7 +303,7 @@ const useStyles = makeStyles({
     fontSize: '0.85rem'
   },
   lightThemeFontColor: {
-    color: '#155084',
+    color: '#C6C6C6',
     '& .MuiInputBase-root': {
       color: 'rgba (0, 0, 0, 0.54)'
     }
diff --git a/app/src/components/right/ComponentPanelRoutingItem.tsx b/app/src/components/right/ComponentPanelRoutingItem.tsx
@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
+
 import Grid from '@mui/material/Grid';
-import makeStyles from '@mui/styles/makeStyles';
-import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
+// ------------------------------------------------
+import MenuItem from '@mui/material/MenuItem';
+import { RootState } from '../../redux/store';
 import Select from '@mui/material/Select';
+import makeStyles from '@mui/styles/makeStyles';
+import { useDrag } from 'react-dnd';
 import { useSelector } from 'react-redux';
-import { RootState } from '../../redux/store';
 
-// ------------------------------------------------
-import MenuItem from '@mui/material/MenuItem';
 // ------------------------------------------------
 
 /*
@@ -75,7 +76,7 @@ const ComponentPanelRoutingItem: React.FC<{}> = () => {
       ref={drag}
       xs={8}
       style={{
-        color: '#155084',
+        color: '#C6C6C6',
         backgroundColor: 'transparent',
         height: '75px',
         marginBottom: '15px',
diff --git a/app/src/containers/CustomizationPanel.tsx b/app/src/containers/CustomizationPanel.tsx
@@ -1,41 +1,41 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { DataGrid} from '@mui/x-data-grid';
 import {
-  FormControl,
-  TextField,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
+  FormControl,
   List,
   ListItem,
-  ListItemText
+  ListItemText,
+  TextField
 } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-import ClearIcon from '@mui/icons-material/Clear';
-import createModal from '../components/right/createModal';
-import ErrorMessages from '../constants/ErrorMessages';
-import ProjectManager from '../components/right/ProjectManager';
-import FormSelector from '../components/form/Selector';
-import UseStateModal from '../components/bottom/UseStateModal';
-import { useDispatch, useSelector } from 'react-redux';
-
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   changeTailwind,
-  updateStateUsed,
-  updateUseContext,
-  updateCss,
-  updateEvents,
+  deleteChild,
   deleteEventAction,
   deletePage,
   deleteReusableComponent,
-  updateAttributes,
-  deleteChild,
+  redo,
   undo,
-  redo
+  updateAttributes,
+  updateCss,
+  updateEvents,
+  updateStateUsed,
+  updateUseContext
 } from '../redux/reducers/slice/appStateSlice';
+import { useDispatch, useSelector } from 'react-redux';
+
+import ClearIcon from '@mui/icons-material/Clear';
+import { DataGrid } from '@mui/x-data-grid';
+import ErrorMessages from '../constants/ErrorMessages';
+import FormSelector from '../components/form/Selector';
+import ProjectManager from '../components/right/ProjectManager';
+import UseStateModal from '../components/bottom/UseStateModal';
+import createModal from '../components/right/createModal';
+import makeStyles from '@mui/styles/makeStyles';
 
 // Previously named rightContainer, Renamed to Customizationpanel this now hangs on BottomTabs
 // need to pass in props to use the useHistory feature of react router
@@ -981,7 +981,7 @@ const useStyles = makeStyles({
   select: {
     fontSize: '1em',
     '> .MuiSelect-icon': {
-      color: '#155084'
+      color: '#C6C6C6'
     }
   },
   selectInput: {
diff --git a/app/src/public/styles/style.css b/app/src/public/styles/style.css
@@ -174,7 +174,7 @@ span.material-symbols-outlined {
   flex-direction: column;
   justify-content: space-around;
   flex-wrap: wrap;
-  /* width: 90%; */
+  width: 90%;
   flex-grow: 1;
   /* border: 3px solid #C6C6C6; */
   /* border-radius: 10px; */
@@ -197,16 +197,34 @@ span.material-symbols-outlined {
   flex-direction: column;
   justify-content: space-around;
   flex-wrap: wrap;
-  width: 90%;
   flex-grow: 1;
   border: 3px solid white;
 }
 
 #HTMLItemsTopHalf {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-right: 20px;
+  justify-content: top;
   height: 52vh;
+  text-align: center;
+  overflow-x: hidden;
   overflow-y: auto;
 }
 
+#HTMLItemsTopHalf::-webkit-scrollbar {
+  width: .5rem;
+  height: .5rem;
+}
+
+#HTMLItemsTopHalf::-webkit-scrollbar-thumb {
+  transition: .3s ease all;
+  border-color: transparent;
+  background-color: rgba(255, 255, 255, 0.1);
+  z-index: 40;
+}
+
 #CompBottomHalf {
   flex-grow: 1;
   overflow-y: auto;
@@ -221,6 +239,8 @@ span.material-symbols-outlined {
 }
 
 #HTMLItemsGrid {
+  display: flex;
+
   /* margin-left: 35px; */
 }
 
