update email modal

src/app/cdk/alert-message/alert-message.component.html

@@ -0,0 +1,9 @@
+<div>
+  <mat-icon class="large-material-icon" role="presentation"
+    >error_outline</mat-icon
+  >
+</div>
+
+<div class="alert-container">
+  <ng-content></ng-content>
+</div>

src/app/cdk/modal/alert-message/alert-message.component.scss → src/app/cdk/alert-message/alert-message.component.scss

@@ -1,8 +1,8 @@
 :host {
-  border: solid 1px;
+  border: solid 2px;
+  border-radius: 4px;
   padding: 16px;
   display: flex;
-  width: 100%;
 }
 
 mat-icon {

src/app/cdk/modal/alert-message/alert-message.component.scss-theme.scss → src/app/cdk/alert-message/alert-message.component.scss-theme.scss

@@ -9,10 +9,17 @@
   $background: map-get($theme, background);
 
   :host {
-    border-color: mat.get-color-from-palette($foreground, state-notice-darkest);
+    border-color: mat.get-color-from-palette(
+      $foreground,
+      'state-notice-dark'
+    ) !important;
+    background-color: rgba($state-notice-light, 0.15);
   }
   mat-icon {
-    color: mat.get-color-from-palette($foreground, state-notice-darkest);
+    color: mat.get-color-from-palette(
+      $foreground,
+      'state-notice-dark'
+    ) !important;
   }
 }
 

src/app/cdk/alert-message/alert-message.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { AlertMessageComponent } from './alert-message.component'
+import { MatIconModule } from '@angular/material/icon'
+
+@NgModule({
+  declarations: [AlertMessageComponent],
+  imports: [CommonModule, MatIconModule],
+  exports: [AlertMessageComponent],
+})
+export class AlertMessageModule {}

src/app/cdk/modal/modal.module.ts

@@ -9,15 +9,13 @@ import { ModalFooterComponent } from './modal-footer/modal-footer.component'
 import { ModalHeaderComponent } from './modal-header/modal-header.component'
 import { ModalSideBarComponent } from './modal-side-bar/modal-side-bar.component'
 import { ModalComponent } from './modal/modal.component'
-import { AlertMessageComponent } from './alert-message/alert-message.component'
 
 @NgModule({
   declarations: [
     ModalComponent,
     ModalHeaderComponent,
     ModalFooterComponent,
     ModalSideBarComponent,
-    AlertMessageComponent,
   ],
   imports: [
     CommonModule,
@@ -31,7 +29,6 @@ import { AlertMessageComponent } from './alert-message/alert-message.component'
     ModalHeaderComponent,
     ModalFooterComponent,
     ModalSideBarComponent,
-    AlertMessageComponent,
   ],
 })
 export class ModalModule {}