fix: show archived records greyed out to make them distinguishable from active records (#2505)

fixes #2229

Author: sadaf895

src/app/child-dev-project/children/child-block/child-block.component.scss

@@ -1,4 +1,5 @@
 @use "variables/sizes";
+@use "variables/colors";
 
 .child-pic {
   width: sizes.$icon-block;
@@ -11,7 +12,7 @@
 }
 
 .inactive {
-  color: grey;
+  color: colors.$inactive;
 }
 
 .container {
@@ -24,7 +25,6 @@
   font-size: 1em;
   margin-right: 3px;
   font-weight: 500;
-  color: #262626;
 }
 
 .subnote {

src/app/core/basic-datatypes/entity/entity-block/entity-block.component.html

@@ -1,6 +1,9 @@
 <span
   class="block-height truncate-text"
-  [ngClass]="{ clickable: !linkDisabled }"
+  [ngClass]="{
+    clickable: !linkDisabled,
+    '.inactive': !entityToDisplay?.isActive,
+  }"
   (click)="showDetailsPage()"
 >
   @if (entityBlockComponent) {

src/app/core/basic-datatypes/entity/entity-block/entity-block.component.scss

@@ -1,4 +1,5 @@
 @use "variables/sizes";
+@use "variables/colors";
 
 .clickable {
   pointer-events: all;
@@ -11,3 +12,7 @@
 .block-height {
   line-height: sizes.$icon-block;
 }
+
+.inactive {
+  color: colors.$inactive;
+}

src/app/core/common-components/entities-table/entities-table.component.html

@@ -78,6 +78,7 @@
     <tr
       mat-row
       *matRowDef="let row; columns: _columnsToDisplay"
+      [class.inactive-row]="!row.record.isActive"
       [style.background-color]="getBackgroundColor?.(row.record)"
       class="table-row"
       (click)="onRowClick(row)"

src/app/core/common-components/entities-table/entities-table.component.scss

@@ -35,3 +35,7 @@
   background-color: white;
   border-top: none;
 }
+
+.inactive-row {
+  color: colors.$inactive;
+}

src/styles/variables/_colors.scss

@@ -27,6 +27,9 @@ $disabled: rgba(0, 0, 0, 0.38);
 $disabled-transparent: $grey-transparent;
 $border-color: $grey-darker;
 
+/* color for inactive or archived elements */
+$inactive: grey;
+
 /* background for the main view */
 $background: white;
 /* background for the sidebar */
@@ -72,16 +75,16 @@ $w-levels: (
 
 /* Levels that are used when describing attendance values */
 $attendance-levels: (
-  P: #c8e6c9,
   /* Present */
+  P: #c8e6c9,
+  /* Holiday */
   H: #cfd8dc,
-  /* ? */
-  L: #ffecb3,
   /* Late */
-  E: #d7ccc8,
+  L: #ffecb3,
   /* Excused */
-  A: #ff8a65,
+  E: #d7ccc8,
   /* Absent */
-  U: #dddddd,
+  A: #ff8a65,
   /* Unknown */
+  U: #dddddd,
 );