fix: better highlighting of buttons

closes #1743
Aam-Digital · Mar 2, 2023 · 4d22ceb · 4d22ceb
1 parent a0a6180
commit 4d22ceb
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 10 deletions.
diff --git a/src/app/core/entity-components/entity-details/form/form.component.html b/src/app/core/entity-components/entity-details/form/form.component.html
@@ -2,6 +2,7 @@
   <button
     *ngIf="form?.enabled"
     mat-raised-button
+    color="accent"
     (click)="saveClicked()"
     i18n="Save button for forms"
   >
@@ -10,7 +11,7 @@
 
   <button
     *ngIf="form?.enabled"
-    mat-raised-button
+    mat-stroked-button
     (click)="cancelClicked()"
     i18n="Cancel button for forms"
   >

diff --git a/src/app/core/entity-components/entity-subrecord/row-details/row-details.component.html b/src/app/core/entity-components/entity-subrecord/row-details/row-details.component.html
@@ -31,13 +31,22 @@
 <mat-dialog-actions>
   <button
     mat-raised-button
+    color="accent"
     (click)="save()"
     [disabled]="form.disabled"
     i18n="Save button for forms"
   >
     Save
   </button>
 
+  <button
+    mat-stroked-button
+    mat-dialog-close
+    i18n="Generic cancel button"
+  >
+    Cancel
+  </button>
+
   <button
     *ngIf="data.entity.isNew"
     mat-icon-button

diff --git a/src/app/core/form-dialog/form-dialog-wrapper/form-dialog-wrapper.component.html b/src/app/core/form-dialog/form-dialog-wrapper/form-dialog-wrapper.component.html
@@ -6,7 +6,8 @@
 
 <mat-dialog-actions *ngIf="!readonly && ('update' | able: entity)">
   <button
-    mat-stroked-button
+    mat-raised-button
+    color="accent"
     [disabled]="!contentForm.form.dirty"
     (click)="save()"
     angulartics2On="click"

diff --git a/src/app/core/user/user-security/user-security.component.html b/src/app/core/user/user-security/user-security.component.html
@@ -23,7 +23,7 @@
   <div class="padding-bottom-small flex-row gap-small align-self-end flex-wrap" *ngIf="user">
     <button
       *ngIf="editing && user?.enabled"
-      mat-raised-button
+      mat-stroked-button
       color="warn"
       (click)="toggleAccount(false)"
       matTooltip="User will not be able to login again, no information will be lost"
@@ -34,6 +34,7 @@
     <button
       *ngIf="editing && !user?.enabled"
       mat-raised-button
+      color="accent"
       (click)="toggleAccount(true)"
       matTooltip="User can login again with the previously used credentials"
       i18n="button to enable a user"
@@ -43,6 +44,7 @@
     <button
       *ngIf="editing && user?.enabled"
       mat-raised-button
+      color="accent"
       class="action-button"
       (click)="updateAccount()"
       i18n="Save button for forms"
@@ -51,7 +53,7 @@
     </button>
     <button
       *ngIf="editing"
-      mat-raised-button
+      mat-stroked-button
       class="action-button"
       (click)="disableForm()"
       i18n="Cancel button for forms"

diff --git a/src/app/features/matching-entities/matching-entities/matching-entities.component.html b/src/app/features/matching-entities/matching-entities/matching-entities.component.html
@@ -31,7 +31,7 @@
 </div>
 
 <div class="margin-bottom-large flex-column gap-small">
-  <button mat-stroked-button color="accent" style="width: 100%"
+  <button mat-raised-button color="accent" style="width: 100%"
           (click)="createMatch()"
           [disabled]="!sideDetails?.[0].selected || !sideDetails?.[1].selected || lockedMatching">
     {{ matchActionLabel }}

diff --git a/.../progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html b/.../progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
@@ -36,7 +36,7 @@
       </mat-error>
     </mat-form-field>
 
-    <button mat-button color="accent" (click)="removePart(index)">
+    <button mat-icon-button color="accent" (click)="removePart(index)">
       <fa-icon
         class="button-icon"
         aria-label="remove element"
@@ -110,7 +110,8 @@
 </mat-dialog-content>
 <mat-dialog-actions>
   <button
-    mat-stroked-button
+    mat-raised-button
+    color="accent"
     [mat-dialog-close]="outputData.value"
     [disabled]="outputData.invalid"
   >
@@ -119,7 +120,7 @@
       [matTooltipDisabled]="outputData.valid"
       i18n-matTooltip="Shown when there are errors that prevent saving"
       i18n
-      >Save</span
+    >Save</span
     >
   </button>
   <button mat-stroked-button mat-dialog-close i18n>Cancel</button>

diff --git a/src/app/features/todos/todo-details/todo-details.component.html b/src/app/features/todos/todo-details/todo-details.component.html
@@ -18,11 +18,11 @@ <h1 *ngIf="entity.isNew" mat-dialog-title i18n="Todo details heading for new rec
     *ngIf="!entity.isNew"
   ></app-todo-completion>
   <!-- TODO: move these form actions into a reusable component (taking the entity + form as input)? -->
-  <button mat-raised-button (click)="save()" i18n="Save button for forms">
+  <button mat-raised-button color="accent" (click)="save()" i18n="Save button for forms">
     Save
   </button>
 
-  <button mat-raised-button i18n="Cancel button for forms" mat-dialog-close="">
+  <button mat-stroked-button i18n="Cancel button for forms" mat-dialog-close="">
     Cancel
   </button>