From 2ccb84041b20a50abe6e2908591c461858e574a3 Mon Sep 17 00:00:00 2001
From: Emilia <contact@emiliaallison.com>
Date: Fri, 9 Aug 2024 20:58:27 -0400
Subject: [PATCH] fix: CSS for plate add buttons

Some improvement, still not great
---
 .../scss/default_theme/components/_tree.scss  | 27 +++++++++++++++++++
 plate-tool-web/src/components/tree.rs         |  4 +--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/plate-tool-web/assets/scss/default_theme/components/_tree.scss b/plate-tool-web/assets/scss/default_theme/components/_tree.scss
index 7ef8833..3430c7f 100644
--- a/plate-tool-web/assets/scss/default_theme/components/_tree.scss
+++ b/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;
+	}
+}
diff --git a/plate-tool-web/src/components/tree.rs b/plate-tool-web/src/components/tree.rs
index 434704d..12097eb 100644
--- a/plate-tool-web/src/components/tree.rs
+++ b/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}