From c8403c04a3f4598822b26989d977e15094a75473 Mon Sep 17 00:00:00 2001
From: Edan Bainglass <edan.bainglass@gmail.com>
Date: Fri, 3 Jan 2025 07:52:14 +0000
Subject: [PATCH] Update styles

---
 .../app/result/components/status/status.py    | 46 +++++++++----------
 src/aiidalab_qe/app/static/styles/custom.css  |  9 +++-
 .../app/static/styles/variables.css           |  1 +
 3 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/aiidalab_qe/app/result/components/status/status.py b/src/aiidalab_qe/app/result/components/status/status.py
index a434a35ce..bd01e594f 100644
--- a/src/aiidalab_qe/app/result/components/status/status.py
+++ b/src/aiidalab_qe/app/result/components/status/status.py
@@ -167,12 +167,14 @@ def update(self, node=None):
     def _build_header(self, node, level):
         self.level = level
         self.title = self._humanize_title(node)
-        self.indentation = ipw.HTML(self._get_indentation(self.level))
+        self.indentation = self._get_indentation(level)
         self.emoji = ipw.HTML()
         self.state = ipw.HTML()
+        self.header = ipw.HBox()
+        self.header.add_class("tree-node-header")
 
     def _get_indentation(self, level=0):
-        return "&nbsp;" * 6 * level
+        return ipw.HTML(layout=ipw.Layout(width=f"{22 * level}px"))
 
     def _get_emoji(self, state):
         return {
@@ -258,19 +260,16 @@ def _build_header(self, node, level):
         self.toggle.on_click(self._toggle_branches)
         self.label = ipw.HTML(self.title)
         self.tally = ipw.HTML()
-        self.header = ipw.HBox(
-            children=[
-                self.indentation,
-                self.toggle,
-                self.emoji,
-                self.label,
-                ipw.HTML(" | "),
-                self.state,
-                ipw.HTML(" | "),
-                self.tally,
-            ],
-            layout=ipw.Layout(align_items="center"),
-        )
+        self.header.children = [
+            self.indentation,
+            self.toggle,
+            self.emoji,
+            self.label,
+            ipw.HTML(" | "),
+            self.state,
+            ipw.HTML(" | "),
+            self.tally,
+        ]
 
     def _add_children(self, node):
         for child in node.called:
@@ -327,16 +326,13 @@ def _build_header(self, node, level):
         )
         self.label.add_class("calculation-link")
         self.label.on_click(self._on_label_click)
-        self.header = ipw.HBox(
-            children=[
-                self.indentation,
-                self.emoji,
-                self.label,
-                ipw.HTML(" | "),
-                self.state,
-            ],
-            layout=ipw.Layout(align_items="center"),
-        )
+        self.header.children = [
+            self.indentation,
+            self.emoji,
+            self.label,
+            ipw.HTML(" | "),
+            self.state,
+        ]
 
     def _on_label_click(self, _):
         if self.on_inspect is None:
diff --git a/src/aiidalab_qe/app/static/styles/custom.css b/src/aiidalab_qe/app/static/styles/custom.css
index a39383c38..ec8800f37 100644
--- a/src/aiidalab_qe/app/static/styles/custom.css
+++ b/src/aiidalab_qe/app/static/styles/custom.css
@@ -113,6 +113,11 @@ footer {
   min-width: fit-content !important;
 }
 
+.simplified-process-tree .tree-node-header {
+  align-items: center;
+  padding-left: 12px;
+}
+
 .simplified-process-tree .widget-html-content {
   line-height: 1.5;
 }
@@ -148,7 +153,7 @@ footer {
 }
 
 .simplified-process-tree .tree-node-toggle {
-  margin-right: 6px;
+  margin: 0 6px 0 -16px;
 }
 
 .simplified-process-tree .tree-node-toggle:hover:enabled,
@@ -162,7 +167,7 @@ footer {
 }
 
 .simplified-process-tree .calculation-link {
-  color: var(--color-info);
+  color: var(--color-link);
 }
 
 .simplified-process-tree .calculation-link:hover:enabled,
diff --git a/src/aiidalab_qe/app/static/styles/variables.css b/src/aiidalab_qe/app/static/styles/variables.css
index 3238f89d6..67ff02e0a 100644
--- a/src/aiidalab_qe/app/static/styles/variables.css
+++ b/src/aiidalab_qe/app/static/styles/variables.css
@@ -1,4 +1,5 @@
 :root {
+  --color-link: #0000ee;
   --color-init: #eee;
   --color-ready: #fcf8e3;
   --color-active: #d9edf7;