Merge pull request #14 from oslabs-beta/jon-canvasRemove

Fix delete button for canvas components and nested components

Author: johnwage

app/src/components/main/DeleteButton.tsx

@@ -4,8 +4,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
 import { emitEvent } from '../../helperFunctions/socket';
+import { Delete } from '@mui/icons-material';
 
-function DeleteButton({ id, name }: DeleteButtons) {
+function DeleteButton({ id, name, onClickHandler }: DeleteButtons) {
   const contextParam = useSelector((store: RootState) => store.contextSlice);
 
   const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
@@ -33,10 +34,11 @@ function DeleteButton({ id, name }: DeleteButtons) {
         id={'btn' + id}
         onClick={(event) => {
           event.stopPropagation();
+          onClickHandler(event);
           deleteHTMLtype(id);
         }}
       >
-        x
+        <Delete className="deleteIcon" />
       </button>
     </div>
   );

app/src/components/main/DirectChildHTML.tsx

@@ -80,6 +80,7 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
         <DeleteButton
           id={childId}
           name={name[0].toLowerCase() + name.slice(1)}
+          onClickHandler={onClickHandler}
         />
       </span>
     </div>

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -225,7 +225,11 @@ function DirectChildHTMLNestable({
           {attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
         </strong>
         {routeButton}
-        <DeleteButton id={childId} name={name} />
+        <DeleteButton
+          id={childId}
+          name={name}
+          onClickHandler={onClickHandler}
+        />
       </span>
       {renderChildren(children)}
     </div>

app/src/interfaces/Interfaces.ts

@@ -116,6 +116,7 @@ export interface LoginInt {
 export interface DeleteButtons {
   id: number;
   name: string;
+  onClickHandler: (event: any) => void;
 }
 export interface StatePropsPanelProps {
   selectHandler: (table: any) => void;

app/src/public/styles/style.css

@@ -727,9 +727,14 @@ CANVAS WINDOW
     0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
 }
 
-.delete-button-empty:hover {
+.deleteIcon {
+  font-size: 18px;
+  color: #4a4a4a;
+  cursor: pointer;
+}
+
+.deleteIcon:hover {
   color: white;
-  background-color: rgba(0, 100, 0, 0.4);
 }
 
 .componentContainer {