#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
INSO-TUWien · Dec 23, 2022 · f77aea8 · f77aea8
1 parent f99e7d3
commit f77aea8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 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
@@ -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
@@ -1,7 +1,6 @@
 .legend {
   padding: 0;
-  position: absolute;
-  bottom: 0;
+  align-self: flex-end;
   list-style: none;
   border: 1px black;
   overflow: hidden;