From 52b28aabb1118d4431592b274285d749c11a6a80 Mon Sep 17 00:00:00 2001
From: Emilia <contact@emiliaallison.com>
Date: Fri, 9 Aug 2024 22:35:00 -0400
Subject: [PATCH] fix: Button styling updates

---
 .../assets/scss/default_theme/_button.scss    | 27 +++++++++++++++++
 .../components/_transfer_menu.scss            |  8 ++++-
 .../scss/default_theme/components/_tree.scss  | 30 ++++++-------------
 plate-tool-web/src/components/tree.rs         | 10 ++++---
 4 files changed, 49 insertions(+), 26 deletions(-)
 create mode 100644 plate-tool-web/assets/scss/default_theme/_button.scss

diff --git a/plate-tool-web/assets/scss/default_theme/_button.scss b/plate-tool-web/assets/scss/default_theme/_button.scss
new file mode 100644
index 0000000..8a8fd32
--- /dev/null
+++ b/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);
+	}
+}
diff --git a/plate-tool-web/assets/scss/default_theme/components/_transfer_menu.scss b/plate-tool-web/assets/scss/default_theme/components/_transfer_menu.scss
index 830ae40..6701d1f 100644
--- a/plate-tool-web/assets/scss/default_theme/components/_transfer_menu.scss
+++ b/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
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 3430c7f..b36975d 100644
--- a/plate-tool-web/assets/scss/default_theme/components/_tree.scss
+++ b/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;
-	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;
+	@include standard_button;
 
 	&::before {
-		text-align: center;
-		vertical-align: middle;
-		content: "+"; // Nicer X
-	}
-	&:hover {
-		background: rgba(1,1,1,0.1);
-		transition: background 0.1s;
+		content: "Add";
 	}
 }
diff --git a/plate-tool-web/src/components/tree.rs b/plate-tool-web/src/components/tree.rs
index 12097eb..f15210e 100644
--- a/plate-tool-web/src/components/tree.rs
+++ b/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>