From 64725de8b9229ee22698451944d02f976bc184e7 Mon Sep 17 00:00:00 2001
From: Andreas Huber <andreas.huber@lucares.de>
Date: Sun, 13 Oct 2024 19:42:39 +0200
Subject: [PATCH] use the primary color (blue) for save buttons instead of the
 Amazon orange

---
 .../add-plot-dialog.component.html                |  2 +-
 .../add-text-dialog.component.html                |  2 +-
 .../dashboard/dashboard.component.html            |  2 +-
 pdb-js/src/styles.scss                            | 15 ++++++++-------
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html
index 3120799..ff5f5e9 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html
+++ b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html
@@ -18,5 +18,5 @@
 
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close >Cancel</button>
-  <button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()">Save</button>
+  <button class="save-button" mat-flat-button mat-dialog-close (click)="onSaveClick()">Save</button>
 </div>
diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html
index 09fbe1d..45a28cc 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html
+++ b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html
@@ -34,5 +34,5 @@
 </div>
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close (click)="close()">Cancel</button>
-  <button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()">Save</button>
+  <button class="save-button" mat-flat-button mat-dialog-close (click)="onSaveClick()">Save</button>
 </div>
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 e60a9fc..5fd6fa4 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
+++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
@@ -85,7 +85,7 @@
   <div class="toolbar">
     <button mat-button  (click)="addText()">Add Text</button>
     <button mat-button (click)="addPlot()">Add Plot</button>
-    <button class="save-button" mat-button (click)="save()" [disabled]="!isDirty()">Save</button>
+    <button class="save-button" mat-flat-button (click)="save()" [disabled]="!isDirty()">Save</button>
     <div id="filter-date-range">
       Date range: <app-date-picker #datePicker (dateValueSelected)="updateDateRange($event)" ></app-date-picker>
     </div>
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index 86990d36..6ed0f58 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -65,6 +65,8 @@ grey
 */
 $background-color: #CBD7F4;
 
+
+
 .mat-mdc-option span.mdc-list-item__primary-text,
 .mdc-list-item__primary-text {
   font-size: 1rem;
@@ -78,6 +80,12 @@ mat-form-field .mat-mdc-option span.mdc-list-item__primary-text{
   font-size: 14px;
   margin: 0;
   box-sizing: border-box;
+
+  // set colors for flat buttons (directive mat-flat-button)
+  // make them blue with white text when active and transparent with the default text color of light grey when disabled
+  --mdc-filled-button-label-text-color: white;
+  --mdc-filled-button-container-color: #005cbb;
+  --mdc-filled-button-disabled-container-color: none;
 }
 
 h1 {
@@ -105,13 +113,6 @@ button[disabled] .icon-inline {
   opacity: 0.5;
 }
 
-button.save-button {
-  background-color: #ff9900;
-}
-button.save-button:disabled {
-  background-color: inherit;
-}
-
 .icon-tiny {
   width: 1em;
   height: 1em;