chore(webapp): improve visibility of add document and rename document…

… nav buttons
fynnfluegge · Dec 19, 2024 · 489dc80 · 489dc80
1 parent 257033a
commit 489dc80
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git 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
@@ -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;