fix: CSS for plate add buttons

Some improvement, still not great

plate-tool-web/assets/scss/default_theme/components/_tree.scss

@@ -53,3 +53,30 @@ div.tree li {
 		background: color.change($color-light, $alpha: 0.2);
 	}
 }
+
+div.tree button {
+	position: relative;
+	top: -0.15em;
+
+	display: inline;
+	margin-left: 0;
+	margin-bottom: 0.4rem;
+	border: 2px solid transparent;
+	background: transparent;
+
+	user-select: none;
+	list-style: none;
+	line-height: 1em;
+
+	aspect-ratio: 1;
+
+	&::before {
+		text-align: center;
+		vertical-align: middle;
+		content: "+"; // Nicer X
+	}
+	&:hover {
+		background: rgba(1,1,1,0.1);
+		transition: background 0.1s;
+	}
+}

plate-tool-web/src/components/tree.rs

@@ -103,7 +103,7 @@ pub fn Tree(props: &TreeProps) -> Html {
             <button onclick={
                 let open_new_plate_callback = props.open_new_plate_callback.clone();
                 move |_| {open_new_plate_callback.emit(NewPlateDialogType::SourceOnly)}
-            }>{"+"}</button>
+            } />
             </h3>
             <ul>
                 {source_plates}
@@ -114,7 +114,7 @@ pub fn Tree(props: &TreeProps) -> Html {
             <button onclick={
                 let open_new_plate_callback = props.open_new_plate_callback.clone();
                 move |_| {open_new_plate_callback.emit(NewPlateDialogType::DestinationOnly)}
-            }>{"+"}</button>
+            } />
             </h3>
             <ul>
                 {dest_plates}