From 659c27c4e552e8921fd75433431c915aef6986c8 Mon Sep 17 00:00:00 2001
From: Emilia <contact@emiliaallison.com>
Date: Tue, 6 Jun 2023 18:46:04 -0400
Subject: [PATCH] Close buttons for dialogs

Resolves #4
---
 .../default_theme/components/_dialog.scss     | 29 +++++++++++++++++++
 .../scss/default_theme/components/_index.scss |  1 +
 src/components/new_plate_dialog.rs            |  1 +
 src/components/tree.rs                        |  5 ++--
 4 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 assets/scss/default_theme/components/_dialog.scss

diff --git a/assets/scss/default_theme/components/_dialog.scss b/assets/scss/default_theme/components/_dialog.scss
new file mode 100644
index 0000000..e5f6d1e
--- /dev/null
+++ b/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
+		}
+	}
+}
diff --git a/assets/scss/default_theme/components/_index.scss b/assets/scss/default_theme/components/_index.scss
index e0c2b5a..a279b73 100644
--- a/assets/scss/default_theme/components/_index.scss
+++ b/assets/scss/default_theme/components/_index.scss
@@ -4,3 +4,4 @@
 @forward "tree";
 @forward "transfer_menu";
 @forward "upper_menu";
+@forward "dialog";
diff --git a/src/components/new_plate_dialog.rs b/src/components/new_plate_dialog.rs
index cf72834..99a89cd 100644
--- a/src/components/new_plate_dialog.rs
+++ b/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>
     }
 }
diff --git a/src/components/tree.rs b/src/components/tree.rs
index 0ac8302..d85029b 100644
--- a/src/components/tree.rs
+++ b/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>
     }
 }