From f77aea809bb4070327d4e1fa6587e26e9a65c894 Mon Sep 17 00:00:00 2001
From: profjellybean <valentin.cello@gmail.com>
Date: Fri, 23 Dec 2022 10:27:41 +0100
Subject: [PATCH] #59: Styled buttons and tree, fixed bug in legend

Bug: legend was position absolute and would therfore be displayed on the main config also, changed to flex-end
---
 .../file-tree-comparison/components/tree.css  | 32 +++++++++++++++----
 .../legacy/file-tree-comparison/config.css    |  3 +-
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/ui/src/visualizations/legacy/file-tree-comparison/components/tree.css b/ui/src/visualizations/legacy/file-tree-comparison/components/tree.css
index 388707a6..85758d85 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/components/tree.css
+++ b/ui/src/visualizations/legacy/file-tree-comparison/components/tree.css
@@ -4,18 +4,29 @@
   padding: 5px;
   margin-top: 5px;
   background-color: white;
+  border-radius: 10px;
 }
 
 .tree{
   background-color: lightgrey;
+  border: 1px solid black;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  overflow-y: auto;
+  max-height: 50em;
 }
 
 li:not(:last-child) {
   margin-bottom: 5px;
   margin-left: 5px;
+  width: fit-content;
+  padding: 2px;
 }
 li:last-child {
+  margin-bottom: 5px;
   margin-left: 5px;
+  width: fit-content;
+  padding: 2px;
 }
 .space {
   margin: 5px;
@@ -35,12 +46,19 @@ li:last-child {
   background-color: #bd981d;
   border-radius: 5px;
 }
-
-ul {
-  border: 1px solid black;
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-  overflow-y: auto;
-  max-height: 50em;
+button {
+  background-color: white;
+  border: 1px solid #555555;
+  color: #555555;
+  padding: 5px 10px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  border-radius: 10px;
+  transition-duration: 0.2s;
+}
+button:hover {
+  background-color: #555555;
+  color: white;
 }
 
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/config.css b/ui/src/visualizations/legacy/file-tree-comparison/config.css
index fa775504..27271d19 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/config.css
+++ b/ui/src/visualizations/legacy/file-tree-comparison/config.css
@@ -1,7 +1,6 @@
 .legend {
   padding: 0;
-  position: absolute;
-  bottom: 0;
+  align-self: flex-end;
   list-style: none;
   border: 1px black;
   overflow: hidden;