From 489dc808214c9a2c11adeb8b9e99613ff034cc8b Mon Sep 17 00:00:00 2001
From: fynnfluegge <fynnfluegge@gmx.de>
Date: Thu, 19 Dec 2024 23:06:13 +0100
Subject: [PATCH] chore(webapp): improve visibility of add document and rename
 document nav buttons

---
 .../navigation/sidenav.component.html         | 22 ++++++++++++-------
 .../navigation/sidenav.component.scss         |  9 ++++++++
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/webapp/src/app/component/navigation/sidenav.component.html b/webapp/src/app/component/navigation/sidenav.component.html
index 5ae606b7..7364c887 100644
--- a/webapp/src/app/component/navigation/sidenav.component.html
+++ b/webapp/src/app/component/navigation/sidenav.component.html
@@ -295,11 +295,14 @@
             style="width: 140px; height: 24px; font-size: 14px; padding: 4px"
           />
         </mat-form-field>
-        <button mat-icon-button (click)="saveNode(node, itemValue.value, true)">
-          <mat-icon>save</mat-icon>
+        <button
+          class="nav-item-button"
+          (click)="saveNode(node, itemValue.value, true)"
+        >
+          <i class="fas fa-save"></i>
         </button>
-        <button mat-icon-button (click)="deleteEmptyItem(node)">
-          <mat-icon>delete</mat-icon>
+        <button class="nav-item-button" (click)="deleteEmptyItem(node)">
+          <i class="fa fa-times-circle"></i>
         </button>
       </mat-tree-node>
 
@@ -321,13 +324,16 @@
           />
         </mat-form-field>
         <button
-          mat-icon-button
+          class="nav-item-button"
           (click)="saveNode(node, itemValue.value, false)"
         >
-          <mat-icon>save</mat-icon>
+          <i class="fas fa-save"></i>
         </button>
-        <button mat-icon-button (click)="cancelEditItem(node, itemValue.value)">
-          <mat-icon>cancel</mat-icon>
+        <button
+          class="nav-item-button"
+          (click)="cancelEditItem(node, itemValue.value)"
+        >
+          <i class="fa fa-times-circle"></i>
         </button>
       </mat-tree-node>
 
diff --git a/webapp/src/app/component/navigation/sidenav.component.scss b/webapp/src/app/component/navigation/sidenav.component.scss
index 2893cd21..b0885fcf 100644
--- a/webapp/src/app/component/navigation/sidenav.component.scss
+++ b/webapp/src/app/component/navigation/sidenav.component.scss
@@ -18,6 +18,15 @@ button {
   width: 24px;
 }
 
+.nav-item-button {
+  font-size: 20px;
+  color: lightgray;
+  background-color: transparent;
+  width: 16px;
+  padding-left: 0;
+  margin-left: 4px;
+}
+
 .mat-tree-node {
   height: 32px;
   border-bottom: 1px solid grey;