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

Update Delete Icon & CSS

Author: BrianYan7

app/src/components/main/DeleteButton.tsx

@@ -4,7 +4,7 @@ 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';
+import { Clear } from '@mui/icons-material';
 
 function DeleteButton({ id, name, onClickHandler }: DeleteButtons) {
   const contextParam = useSelector((store: RootState) => store.contextSlice);
@@ -38,7 +38,7 @@ function DeleteButton({ id, name, onClickHandler }: DeleteButtons) {
           deleteHTMLtype(id);
         }}
       >
-        <Delete className="deleteIcon" />
+        <Clear className="deleteIcon" />
       </button>
     </div>
   );

app/src/public/styles/style.css

@@ -718,13 +718,11 @@ CANVAS WINDOW
 
 .delete-button-empty {
   float: right;
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 15px;
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 50%;
   border: none;
   font-size: 15px;
   color: white;
-  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
-    0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
 }
 
 .deleteIcon {