Backdrop for new plate modal

assets/css/global.css

@@ -6,6 +6,12 @@
 	font: inherit;
 	vertical-align: baseline;
 }
+h1, h2, h3 {
+	padding: 0;
+	margin: 0;
+	margin-bottom: 0.4em;
+	margin-top: 0.4em;
+}
 
 div.main_container {
 	height: 95vh;
@@ -42,3 +48,10 @@ div.plate_container {
 	grid-column: right / right;
 	grid-row: upper / 3;
 }
+
+.dialog {
+	padding: 1em;
+}
+.dialog::backdrop {
+	background: rgba(0,125,255,0.3);
+}

src/components/new_plate_dialog.rs

@@ -2,7 +2,7 @@ use yew::prelude::*;
 use yewdux::prelude::*;
 
 use wasm_bindgen::JsCast;
-use web_sys::{EventTarget, HtmlFormElement, FormData};
+use web_sys::{EventTarget, HtmlFormElement, FormData, HtmlDialogElement};
 
 use crate::data::{plate_instances::PlateInstance, transfer::Transfer};
 use crate::data::plate::*;
@@ -33,7 +33,8 @@ pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
                         "96" => PlateFormat::W96,
                         _ => PlateFormat::W6,
                     };
-                    let plate_type = match form_data.get("new_plate_type").as_string().unwrap().as_str() {
+                    if let Some(pt_string) = form_data.get("new_plate_type").as_string() {
+                        let plate_type = match pt_string.as_str() {
                             "src" => PlateType::Source,
                             "dest" => PlateType::Destination,
                             _ => PlateType::Source,
@@ -47,11 +48,24 @@ pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
                         });
                     }
                 }
+            }
         })
     };
 
+    // This whole section is optional, only if you want the backdrop
+    let dialog_ref = use_node_ref();
+    {
+        let dialog_ref = dialog_ref.clone();
+
+        use_effect_with_deps(|dialog_ref| {
+            dialog_ref.cast::<HtmlDialogElement>().unwrap().show_modal().ok();
+        },
+        dialog_ref);
+    }
+
     html! {
-        <dialog open=true>
+        <dialog ref={dialog_ref} class="dialog new_plate_dialog">
+            <h2>{"Create a plate:"}</h2>
             <form onsubmit={new_plate_callback}>
             <input type="text" name="new_plate_name" placeholder="Name"/>
             <select name="plate_format">