andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

use the primary color (blue) for save buttons instead of the Amazon orange

Browse Source
This commit is contained in:
Andreas Huber
2024-10-13 19:42:39 +02:00
parent 768962aa43
commit 64725de8b9
4 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html
View File

@@ -18,5 +18,5 @@
<div mat-dialog-actions align="end"> <div mat-dialog-actions align="end">
<button mat-button mat-dialog-close >Cancel</button> <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> </div>

2
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html
View File

@@ -34,5 +34,5 @@
</div> </div>
<div mat-dialog-actions align="end"> <div mat-dialog-actions align="end">
<button mat-button mat-dialog-close (click)="close()">Cancel</button> <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> </div>

2
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
View File

@@ -85,7 +85,7 @@
<div class="toolbar"> <div class="toolbar">
<button mat-button (click)="addText()">Add Text</button> <button mat-button (click)="addText()">Add Text</button>
<button mat-button (click)="addPlot()">Add Plot</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"> <div id="filter-date-range">
Date range: <app-date-picker #datePicker (dateValueSelected)="updateDateRange($event)" ></app-date-picker> Date range: <app-date-picker #datePicker (dateValueSelected)="updateDateRange($event)" ></app-date-picker>
</div> </div>

15
pdb-js/src/styles.scss
View File

@@ -65,6 +65,8 @@ grey
*/ */
$background-color: #CBD7F4; $background-color: #CBD7F4;
.mat-mdc-option span.mdc-list-item__primary-text, .mat-mdc-option span.mdc-list-item__primary-text,
.mdc-list-item__primary-text { .mdc-list-item__primary-text {
font-size: 1rem; font-size: 1rem;
@@ -78,6 +80,12 @@ mat-form-field .mat-mdc-option span.mdc-list-item__primary-text{
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
box-sizing: border-box; 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 { h1 {
@@ -105,13 +113,6 @@ button[disabled] .icon-inline {
opacity: 0.5; opacity: 0.5;
} }
button.save-button {
background-color: #ff9900;
}
button.save-button:disabled {
background-color: inherit;
}
.icon-tiny { .icon-tiny {
width: 1em; width: 1em;
height: 1em; height: 1em;