feat(event): display pending date change notices

src/app/shared/components/event-date-notice-modal/event-date-notice-modal.component.html

@@ -1,17 +1,15 @@
-<article class="event-date-notice">
-  <h2 class="event-date-notice__title">{{ data.title }}</h2>
+<div class="event-date-notice-modal">
+  <h2>{{ notice.title }}</h2>
 
-  <p class="event-date-notice__description">
-    @for (part of data.message; track $index) {
-      @if (part.bold) {
-        <strong>{{ part.text }}</strong>
+  <p>
+    @for (segment of notice.message; track $index) {
+      @if (segment.bold) {
+        <b>{{ segment.text }}</b>
       } @else {
-        {{ part.text }}
+        <span>{{ segment.text }}</span>
       }
     }
   </p>
 
-  <div class="event-date-notice__actions">
-    <app-button (click)="close()">Cerrar</app-button>
-  </div>
-</article>
+  <app-button (click)="close()">Cerrar</app-button>
+</div>

src/app/shared/components/event-date-notice-modal/event-date-notice-modal.component.scss

@@ -1,33 +1,28 @@
-.event-date-notice {
+.event-date-notice-modal {
   display: grid;
-  gap: 20px;
-  justify-items: center;
+  gap: 1.5rem;
+  justify-items: stretch;
   text-align: center;
 }
 
-.event-date-notice__title,
-.event-date-notice__description {
+h2,
+p {
   margin: 0;
 }
 
-.event-date-notice__title {
-  color: var(--color-danger, #dc3545);
+h2 {
+  color: var(--tenant-danger);
   font-size: 16px;
   font-weight: 700;
   line-height: 1.25;
 }
 
-.event-date-notice__description {
+p {
   color: #666666;
   font-size: 15px;
-  font-weight: 400;
-  line-height: 1.4;
+  line-height: 1.35;
 }
 
-.event-date-notice__description strong {
+b {
   font-weight: 700;
 }
-
-.event-date-notice__actions {
-  width: 100%;
-}

src/app/shared/components/event-date-notice-modal/event-date-notice-modal.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
+import { EventDateNotice } from '../../../core/services/event-date-notice.service';
 import { MODAL_DATA, ModalRef } from '../../../core/services/modal.service';
-import { TenantEventDateNotice } from '../../../core/services/tenant.interface';
 import { ButtonComponent } from '../button/button.component';
 
 @Component({
@@ -12,7 +12,7 @@ import { ButtonComponent } from '../button/button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EventDateNoticeModalComponent {
-  protected readonly data = inject<TenantEventDateNotice>(MODAL_DATA);
+  protected readonly notice = inject<EventDateNotice>(MODAL_DATA);
   private readonly modalRef = inject<ModalRef<void>>(ModalRef);
 
   protected close(): void {