Change alarm details field color to primary color hue

ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss

@@ -16,12 +16,12 @@
 @use '@angular/material' as mat;
 @import '../theme.scss';
 
-$main-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.4);
+$primary-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.4);
 $border: 1px solid mat.get-color-from-palette($tb-primary);
 
 :host {
   .tb-alarm-comments {
-    background-color: $main-color;
+    background-color: $primary-color;
     max-width: 600px;
     width: 100%;
 
@@ -32,7 +32,7 @@ $border: 1px solid mat.get-color-from-palette($tb-primary);
       .inner-wrap {
         border: $border;
         padding: 0 24px;
-        background-color: $main-color;
+        background-color: $primary-color;
       }
 
       &.oldest-first {
@@ -83,7 +83,7 @@ $border: 1px solid mat.get-color-from-palette($tb-primary);
 
       &-container {
         padding: 0 24px;
-        background-color: $main-color;
+        background-color: $primary-color;
         border: $border;
         border-bottom: none;
         border-radius: 8px 8px 0px 0px;
@@ -132,7 +132,7 @@ $border: 1px solid mat.get-color-from-palette($tb-primary);
       padding: 4px;
       border-radius: 8px;
       &:hover {
-        background-color: $main-color;
+        background-color: $primary-color;
       }
     }
 

ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts

@@ -123,8 +123,7 @@ export class AlarmCommentComponent implements OnInit {
             displayDataElement.edit = false;
             displayDataElement.isEdited = alarmComment.comment.edited;
             displayDataElement.editedTime = alarmComment.comment.editedOn;
-            displayDataElement.editedDateAgo = this.dateAgoPipe.transform(alarmComment.comment.editedOn) +
+            displayDataElement.editedDateAgo = this.dateAgoPipe.transform(alarmComment.comment.editedOn) + '\n';
-              ' ' + this.translate.instant('alarm-activity.ago') + '\n';
             displayDataElement.showActions = false;
             displayDataElement.isSystemComment = false;
             displayDataElement.avatarBgColor = this.utilsService.stringToHslColor(displayDataElement.displayName,

ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.scss

@@ -13,7 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@use '@angular/material' as mat;
+@import '../theme.scss';
+
 :host ::ng-deep {
+  .mat-mdc-text-field-wrapper.mdc-text-field {
+    background-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.4);
+  }
   .assignee-field {
     .mat-form-field-label-wrapper {
       overflow: visible;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -501,7 +501,8 @@
         "any-type": "Any type",
         "search-propagated-alarms": "Search propagated alarms",
         "comments": "Alarm comments",
-        "show-more": "Show more"
+        "show-more": "Show more",
+        "additional-info": "Additional info"
     },
     "alarm-activity": {
         "add": "Add a comment...",
@@ -511,7 +512,6 @@
         "refresh": "Refresh",
         "oldest-first": "Oldest first",
         "newest-first": "Newest first",
-        "ago": "ago",
         "activity": "Activity",
         "export":  "Export to CSV"
     },