Close buttons for dialogs

Resolves #4

assets/scss/default_theme/components/_dialog.scss

@@ -0,0 +1,29 @@
+@use "sass:color";
+@use "../variables" as *;
+
+dialog {
+	border: 3px solid $color-dark;
+	border-radius: 2%;
+}
+
+dialog > form[method="dialog"] {
+	position: absolute;
+	top: 0;
+	right: 0;
+	line-height: 0px;
+
+	button {
+		padding-top: 5px;
+		padding-left: 3px;
+		font-size: 140%;
+		line-height: 0px;
+
+		border: 0;
+		background: transparent;
+		&::before {
+			text-align: center;
+			vertical-align: middle;
+			content: "\00d7"; // Nicer X
+		}
+	}
+}

assets/scss/default_theme/components/_index.scss

@@ -4,3 +4,4 @@
 @forward "tree";
 @forward "transfer_menu";
 @forward "upper_menu";
+@forward "dialog";

src/components/new_plate_dialog.rs

@@ -99,6 +99,7 @@ pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
             <label for="npt_dest">{"Destination"}</label>
             <input type="submit" name="new_plate_button" value="Create" />
             </form>
+            <form class="modal_close" method="dialog"><button /></form>
         </dialog>
     }
 }

src/components/tree.rs

@@ -270,10 +270,11 @@ fn PlateInfoModal(props: &PlateInfoModalProps) -> Html {
     }
 
     html! {
-        <dialog id="crab" ref={dialog_ref} class="dialog" onclose={onclose}>
+        <dialog ref={dialog_ref} class="dialog" onclose={onclose}>
             <h2>{"Plate Info"}</h2>
-            <h3 id="horse">{"Name: "}<input type="text" id="shrimp" value={plate_name} onchange={rename_onchange}/></h3>
+            <h3>{"Name: "}<input type="text" value={plate_name} onchange={rename_onchange}/></h3>
             <button onclick={delete_onclick}>{"Delete"}</button>
+            <form class="modal_close" method="dialog"><button /></form>
         </dialog>
     }
 }