Add CSS styling and Material UI delete icon

Author: johnwage

app/src/components/main/DeleteButton.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { DeleteButtons } from '../../interfaces/Interfaces';
 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, onClickHandler }: DeleteButtons) {
   const contextParam = useSelector((store: RootState) => store.contextSlice);
@@ -37,7 +38,7 @@ function DeleteButton({ id, name, onClickHandler }: DeleteButtons) {
           deleteHTMLtype(id);
         }}
       >
-        x
+        <Delete className="deleteIcon" />
       </button>
     </div>
   );

app/src/public/styles/style.css

@@ -746,9 +746,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 {