From 3a28e03b6ac151d096069e236542fdfe02a5c70c Mon Sep 17 00:00:00 2001
From: Andreas Huber <andreas.huber@lucares.de>
Date: Sun, 26 Feb 2023 09:32:08 +0100
Subject: [PATCH] make main toolbar look a little bit more modern

---
 pdb-js/src/app/app.component.html                    | 12 +++++++++---
 pdb-js/src/app/app.component.scss                    | 11 +++++++----
 .../app/dashboard-page/dashboard-page.component.html |  2 +-
 .../dashboard/dashboard.component.html               |  6 +++---
 pdb-js/src/styles.scss                               |  9 +++++++++
 5 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/pdb-js/src/app/app.component.html b/pdb-js/src/app/app.component.html
index d61bc7a..11756ec 100644
--- a/pdb-js/src/app/app.component.html
+++ b/pdb-js/src/app/app.component.html
@@ -1,9 +1,15 @@
 
 
 <div id="main-toolbar">
-  <a href="/" title="Home"><img src="assets/img/home.svg" class="icon-small" aria-hidden="false" aria-label="go to home page" /></a>
-  <a href="/vis" title="Visualization"><img src="assets/img/scatter-chart2.svg" class="icon-small" aria-hidden="false" aria-label="go to visualization page" /></a>
-  <a href="/dashboard" title="Dashboards"><img src="assets/img/dashboard-line.svg" class="icon-small" aria-hidden="false" aria-label="go to dashboard page" /></a>
+  <!--
+    <a href="/">Home</a>
+    <a href="/"><img src="assets/img/home.svg" aria-hidden="false" aria-label="go to home page" /></a>
+    <a href="/vis" aria-label="go to visualization page">Visualization</a>
+    <a href="/dashboard" aria-label="go to dashboard page">Dashboards</a>
+  -->
+  <button mat-button [routerLink]="['/']"><img src="assets/img/home.svg"  aria-hidden="false" aria-label="go to home page" /></button>
+  <button mat-button [routerLink]="['/vis']">Visualization</button>
+  <button mat-button [routerLink]="['/dashboard']">Dashboards</button>
 </div>
 
 <router-outlet></router-outlet>
diff --git a/pdb-js/src/app/app.component.scss b/pdb-js/src/app/app.component.scss
index c031ad0..e4e3080 100644
--- a/pdb-js/src/app/app.component.scss
+++ b/pdb-js/src/app/app.component.scss
@@ -1,11 +1,14 @@
 
 
 #main-toolbar {
-  height: 2.0em;
+  line-height: 3em;
   width: 100%;
-  padding-bottom: 0.5em;
-  border-bottom: solid 1px black;
-  background-color: #eee;
+  border-bottom: solid 1px #bbb;
+}
+
+#main-toolbar button img {
+  width: 1.5rem;
+  vertical-align: sub;
 }
   
 .right{
diff --git a/pdb-js/src/app/dashboard-page/dashboard-page.component.html b/pdb-js/src/app/dashboard-page/dashboard-page.component.html
index 2421024..a8680aa 100644
--- a/pdb-js/src/app/dashboard-page/dashboard-page.component.html
+++ b/pdb-js/src/app/dashboard-page/dashboard-page.component.html
@@ -1,6 +1,6 @@
 
 <div class="toolbar">
-  <button mat-stroked-button (click)="createNewDashboard()">New</button>
+  <button mat-button (click)="createNewDashboard()">New</button>
 </div>
 <div *ngIf="loading">
   loading
diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
index 891a69f..845f89e 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
+++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
@@ -3,9 +3,9 @@
 </div>
 <div *ngIf="dashboard !== undefined" class="content">
   <div class="toolbar">
-    <button mat-stroked-button  (click)="addText()">Add Text</button>
-    <button mat-stroked-button (click)="addPlot()">Add Plot</button>
-    <button mat-stroked-button (click)="save()">Save Dashboard</button>
+    <button mat-button  (click)="addText()">Add Text</button>
+    <button mat-button (click)="addPlot()">Add Plot</button>
+    <button mat-button (click)="save()">Save Dashboard</button>
   </div>
   <h1>{{dashboard.name}}</h1>
   <p>{{dashboard.description}}</p>
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index 1fee3f7..4bddb4d 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -103,6 +103,15 @@ button[disabled] .icon-inline {
   background-color: #eee;
 }
 
+.icon-middle {
+  width: 2.5em;
+  height: 2.5em;
+  margin: 0.2em;
+}
+.icon-middle:hover {
+  background-color: #eee;
+}
+
 .icon-large {
   width: 8em;
   height: 8em;