Add a button to delete the current entity; make the clear button more obvious

macrovision.css

@@ -295,6 +295,11 @@ body.toggle-scale #display {
     font-size: 150%;
 }
 
+.options-row .symbol-button {
+    height: 75px;
+    width: 75px;
+    font-size: 70px;
+}
 .options-row .options-button {
     flex: 1;
     width: 100%;

macrovision.html

@@ -152,6 +152,12 @@
           <option id="options-selected-entity-none">None</option>
         </select>
       </div>
+      <div class="options-row">
+        <button id="delete-entity">
+          <i class="fas fa-trash-alt symbol-button"></i>
+            <span class="sr-only">Delete Entity</span>
+        </button>
+      </div>
       <h3 class="options-header" id="entity-category-header">Entity options</h3>
       <div class="options-category" id="entity-category">
         <div class="options-label">

macrovision.js

@@ -416,6 +416,8 @@ function deselect() {
     clearViewList();
     clearEntityOptions();
     clearViewOptions();
+    
+    document.querySelector("#delete-entity").disabled = true;
 }
 
 function select(target) {
@@ -432,6 +434,8 @@ function select(target) {
     configViewList(selectedEntity, selectedEntity.view);
     configEntityOptions(selectedEntity, selectedEntity.view);
     configViewOptions(selectedEntity, selectedEntity.view);
+    
+    document.querySelector("#delete-entity").disabled = false;
 }
 
 function configViewList(entity, selectedView) {
@@ -1083,7 +1087,7 @@ function prepareMenu() {
             {
                 name: "Clear",
                 id: "menu-clear",
-                icon: "fas fa-trash-alt"
+                icon: "fas fa-file"
             }
         ],
         [
@@ -1473,6 +1477,14 @@ document.addEventListener("DOMContentLoaded", () => {
     document.querySelector("#menu-clear").addEventListener("click", e => {
         removeAllEntities();
     });
+    
+    document.querySelector("#delete-entity").disabled = true;
+    document.querySelector("#delete-entity").addEventListener("click", e => {
+        if (selected) {
+            removeEntity(selected);
+            selected = null;
+        }
+    });
 
     document.querySelector("#menu-order-height").addEventListener("click", e => {
         const order = Object.keys(entities).sort((a, b) => {