Improve the look of custom attributes

This also adds an option to enable editing *any* attribute

macrovision.css

@@ -1124,12 +1124,21 @@ body.screenshot-mode .scroll-button {
 
 .attribute-label {
     display: flex;
+    justify-content: space-between;
     text-align: center;
     user-select: none;
     -webkit-user-select: none;
     margin-top: 12px;
     margin-bottom: 4px;
+    font-size: 18pt;
 }
 
 .attribute-edit-button {
+    margin: auto;
+}
+
+#options-view,
+#options-entity {
+    display: flex;
+    flex-direction: column;
 }

macrovision.js

@@ -2330,7 +2330,7 @@ function configViewOptions(entity, view) {
     Object.entries(entity.views[view].attributes).forEach(([key, val]) => {
         if (val.editing) {
             const name = document.createElement("input");
-            name.placeholder = "Enter name...";
+            name.placeholder = "Name";
             name.value = val.name;
             holder.appendChild(name);
 
@@ -2339,7 +2339,7 @@ function configViewOptions(entity, view) {
             });
 
             const input = document.createElement("input");
-            input.placeholder = "Enter measurement...";
+            input.placeholder = "Measurement (e.g. '3 feet')";
             input.value = val.text;
             holder.appendChild(input);
 
@@ -2389,28 +2389,37 @@ function configViewOptions(entity, view) {
             });
         } else {
             const label = document.createElement("div");
-            label.classList.add("attribute-label");
+            label.classList.add("options-label");
             label.innerText = val.name;
 
             holder.appendChild(label);
-            
-            const editButton = document.createElement("button");
-            editButton.classList.add("attribute-edit-button");
-            const editButtonIcon = document.createElement("i");
-            editButtonIcon.classList.add("fas");
-            editButtonIcon.classList.add("fa-edit");
-
-            editButton.addEventListener("click", e => {
-                entity.currentView.attributes[key] = {
-                    name: val.name,
-                    text: entity.currentView[key],
-                    editing: true
-                }
-                configViewOptions(entity, view);
-            });
+            if (config.editDefaultAttributes || val.custom) {
+                const editButton = document.createElement("button");
+                editButton.classList.add("attribute-edit-button");
+                editButton.innerText = "Edit Attribute";
+                editButton.addEventListener("click", e => {
+                    entity.currentView.attributes[key] = {
+                        name: val.name,
+                        text: entity.currentView[key],
+                        editing: true
+                    }
+                    configViewOptions(entity, view);
+                });
+    
+                holder.appendChild(editButton);
+            }
 
-            editButton.appendChild(editButtonIcon);
-            label.appendChild(editButton);
+            if (val.custom) {
+                const deleteButton = document.createElement("button");
+                deleteButton.classList.add("attribute-edit-button");
+                deleteButton.innerText = "Delete Attribute";
+                deleteButton.addEventListener("click", e => {
+                    delete entity.currentView.attributes[key];
+                    configViewOptions(entity, view);
+                });
+    
+                holder.appendChild(deleteButton);
+            }
 
             const row = document.createElement("div");
             row.classList.add("options-row");
@@ -3699,6 +3708,22 @@ const settingsData = {
             config.autoSwallowSize = param;
         },
     },
+    "edit-default-attributes": {
+        name: "Edit Default Attributes",
+        desc: "Lets you edit non-custom attributes",
+        type: "toggle",
+        default: false,
+        get value() {
+            return config.editDefaultAttributes
+        },
+        set value(param) {
+            config.editDefaultAttributes = param;
+            if (selected) {
+                const entity = entities[selected.dataset.key]
+                configViewOptions(entity, entity.view);
+            }
+        }
+    }
 };
 
 function prepareSettings(userSettings) {