Merge pull request #5 from gtandersen/castaway/1463_username_identity

style(identities): Improve formatting of username identity and warnings.
shadow-dot-cat · Mar 19, 2024 · d2708d3 · d2708d3
2 parents 24b4b82 + 3de0f4a
commit d2708d3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/src/app/profiles/profiles.editor.modal.html b/src/app/profiles/profiles.editor.modal.html
@@ -123,14 +123,14 @@
 
     <mat-card-actions class="action-buttons">
         <span class="delete-button">
-            <button *ngIf="identity.type !== 'main' && identity.type !== 'aliases' && identity.from_priority !== 0" mat-raised-button (click)="delete()" color="warn">DELETE</button>
+            <button *ngIf="identity.type !== 'main' && identity.type !== 'aliases' && identity.from_priority !== 0" mat-raised-button (click)="delete()" color="warn">Delete</button>
             <span *ngIf="identity.type === 'main' || identity.type === 'aliases' || identity.from_priority === 0">
-                This Identity cannot be deleted
+                This Identity cannot be deleted.
             </span>
         </span>
         <span>
-            <button mat-raised-button (click)="close()" color="accent">CANCEL</button>
-            <button id="save" mat-raised-button (click)="save()" color="primary">SAVE</button>
+            <button mat-raised-button (click)="close()" color="accent">Cancel</button>
+            <button id="save" mat-raised-button (click)="save()" color="primary">Save</button>
         </span>
     </mat-card-actions>
 </mat-card>
diff --git a/src/app/profiles/profiles.lister.html b/src/app/profiles/profiles.lister.html
@@ -6,7 +6,7 @@
         <mat-card-content class="profile-content">
             <mat-grid-list cols="{{mobile?6:7}}" rowHeight="15px">
                 <mat-grid-tile *ngIf="item.type === 'main'" colspan="6" rowspan="2">
-                    <h4>Username Identity</h4>
+                    <h3>Username Identity</h3>
                 </mat-grid-tile>
                 <mat-grid-tile colspan="2" rowspan="2">
                     <span class="float-right">Email:</span>
@@ -43,7 +43,7 @@ <h4>Username Identity</h4>
                 </mat-grid-tile>
                 <mat-grid-tile colspan="{{mobile?6:7}}" rowspan="1"
                     *ngIf="item.reference_type === 'preference' && item.reference.status === 1">
-                    <span class="identity-warning">Email not validated.</span>
+                    <span class="warning">Email not validated.</span>
                 </mat-grid-tile>
                 <mat-grid-tile colspan="{{mobile?6:7}}" rowspan="1" *ngIf="mobile">
                     <mat-divider></mat-divider>

diff --git a/src/app/profiles/profiles.lister.scss b/src/app/profiles/profiles.lister.scss
@@ -47,7 +47,3 @@
         height: 50px;
     }
 }
-.identity-warning {
-    font-weight: bold;
-    color: crimson;
-}
diff --git a/src/styles.scss b/src/styles.scss
@@ -20,6 +20,8 @@
 $rmm-default-primary:    mat.define-palette(mat.$light-blue-palette, 900, A400, A700);
 $rmm-default-accent:     mat.define-palette(mat.$blue-palette, 200, 100, 400);
 $rmm-default-warn:       mat.define-palette(mat.$orange-palette, 500, A400, A700);
+$rmm-default-caution:    mat.define-palette(mat.$deep-orange-palette, 500, A400, A700);
+$rmm-default-error:      mat.define-palette(mat.$red-palette, 500, A400, A700);
 $rmm-default-foreground: mat.define-palette(mat.$light-blue-palette, 400, 200, 600);
 $rmm-default-highlight:  mat.define-palette(mat.$light-blue-palette, 100, 50, 200);
 $rmm-default-background: mat.define-palette(mat.$light-blue-palette, 900, A400, A700);
@@ -323,6 +325,22 @@ mat-grid-tile.tableTitle {
     font-size: 12px;
 }
 
++.warning {
+    color: mat.get-color-from-palette($rmm-default-warn);
+    font-weight: bold;
+}
+
+.caution {
+    color: mat.get-color-from-palette($rmm-default-caution);
+    font-weight: bold;
+}
+
+.error {
+    color: mat.get-color-from-palette($rmm-default-error);
+    font-weight: bold;
+}
+
+
 /* Palette colors */
 
 .themePalettePrimary {