fix: Button styling updates

plate-tool-web/assets/scss/default_theme/_button.scss

@@ -0,0 +1,27 @@
+@use "sass:color";
+@use "./variables" as *;
+
+$selection-border-width: 2px;
+
+@mixin standard_button {
+	color: inherit;
+
+	display: inline;
+	margin-left: 3px;
+	border: 2px solid rgba(1,1,1,0.2);
+	background: transparent;
+
+	user-select: none;
+	list-style: none;
+	line-height: 1em;
+
+	&::before {
+		text-align: center;
+		vertical-align: middle;
+	}
+	&:hover {
+		background: color.change($color-light, $alpha: 0.08);
+		transition: background 0.1s;
+		border: $selection-border-width solid color.change($color-light, $alpha:0.3);
+	}
+}

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

@@ -1,5 +1,6 @@
 @use "sass:color";
 @use "../variables" as *;
+@use "../button" as *;
 
 div.transfer_menu {
 	position: relative;
@@ -40,6 +41,11 @@ div.transfer_menu {
 	}
 }
 
+div.transfer_menu input[type="button"] {
+	@include standard_button;
+}
+
+
 input {
 	text-align: center;
 	margin-left: 0.5em;
@@ -50,7 +56,7 @@ input {
 	padding: 0;
 
 	&[type="text"] {
-		width: 4em;
+		width: 6em;
 	}
 	&[name="name"] {
 		width: calc(100% - 6em); // Override above

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

@@ -1,5 +1,6 @@
 @use "sass:color";
 @use "../variables" as *;
+@use "../button" as *;
 
 $selection-border-width: 2px;
 
@@ -54,29 +55,16 @@ div.tree li {
 	}
 }
 
+div.tree--header {
+	margin-top: 1%;
+	display: flex;
+	align-items: center;
+}
+
 div.tree button {
-	position: relative;
+	@include standard_button;
-	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;
+		content: "Add";
-		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

@@ -99,23 +99,25 @@ pub fn Tree(props: &TreeProps) -> Html {
     html! {
         <div class="tree">
             <div id="source-plates">
-            <h3>{"Source Plates:"}
+            <div class="tree--header">
+            <h3>{"Source Plates:"}</h3>
             <button onclick={
                 let open_new_plate_callback = props.open_new_plate_callback.clone();
                 move |_| {open_new_plate_callback.emit(NewPlateDialogType::SourceOnly)}
             } />
-            </h3>
+            </div>
             <ul>
                 {source_plates}
             </ul>
             </div>
             <div id="destination-plates">
-            <h3>{"Destination Plates:"}
+            <div class="tree--header">
+            <h3>{"Destination Plates:"}</h3>
             <button onclick={
                 let open_new_plate_callback = props.open_new_plate_callback.clone();
                 move |_| {open_new_plate_callback.emit(NewPlateDialogType::DestinationOnly)}
             } />
-            </h3>
+            </div>
             <ul>
                 {dest_plates}
             </ul>