From 53458387449ed928ef585c3f83e89162ccd60dc1 Mon Sep 17 00:00:00 2001
From: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Date: Tue, 26 Sep 2023 14:23:15 +0200
Subject: [PATCH] [AAE-16353] - Refactoring error component to get typography
 from theme (#8932)

* [AAE-16353] - Refactoring error component to get typography from theme

* AAE-16353: updated class list
---
 .../error-content.component.html              | 28 ++++++------
 .../error-content.component.scss              | 45 +++++--------------
 .../error-content/error-content.component.ts  | 11 ++++-
 3 files changed, 35 insertions(+), 49 deletions(-)

diff --git a/lib/core/src/lib/templates/error-content/error-content.component.html b/lib/core/src/lib/templates/error-content/error-content.component.html
index 39f2d0afa0..8799694371 100644
--- a/lib/core/src/lib/templates/error-content/error-content.component.html
+++ b/lib/core/src/lib/templates/error-content/error-content.component.html
@@ -1,13 +1,15 @@
-<div class="adf-error-content">
-    <p class="adf-error-content-code">
-        {{ errorCodeTranslated }}
-    </p>
-    <div class="adf-error-content-shadow"></div>
-    <p class="adf-error-content-title">
-        {{ 'ERROR_CONTENT.' + errorCodeTranslated + '.TITLE' | translate }}
-    </p>
-    <p class="adf-error-content-description">
-        {{ 'ERROR_CONTENT.' + errorCodeTranslated + '.DESCRIPTION' | translate }}
-    </p>
-    <ng-content select="[adf-error-content-actions]"></ng-content>
-</div>
+<ng-container *ngIf="{ isSmallScreen: isSmallScreen$ | async } as screenSize">
+    <div class="adf-error-content">
+        <p class="adf-error-content-code {{ screenSize.isSmallScreen ? 'adf-error-content-code--small mat-display-3': 'mat-display-4' }}">
+            {{ errorCodeTranslated }}
+        </p>
+        <div class="adf-error-content-shadow {{ screenSize.isSmallScreen ? 'adf-error-content-shadow--small': '' }}"></div>
+        <p class="adf-error-content-title {{ screenSize.isSmallScreen ? 'mat-headline': 'mat-display-2' }}">
+            {{ 'ERROR_CONTENT.' + errorCodeTranslated + '.TITLE' | translate }}
+        </p>
+        <p class="adf-error-content-description {{ screenSize.isSmallScreen ? 'mat-subheading-2': 'mat-headline' }}">
+            {{ 'ERROR_CONTENT.' + errorCodeTranslated + '.DESCRIPTION' | translate }}
+        </p>
+        <ng-content select="[adf-error-content-actions]"></ng-content>
+    </div>
+</ng-container>
\ No newline at end of file
diff --git a/lib/core/src/lib/templates/error-content/error-content.component.scss b/lib/core/src/lib/templates/error-content/error-content.component.scss
index a6b4b749d6..2230f48dcf 100644
--- a/lib/core/src/lib/templates/error-content/error-content.component.scss
+++ b/lib/core/src/lib/templates/error-content/error-content.component.scss
@@ -3,12 +3,15 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    text-align: center;
 
     &-code {
-        font-size: 110px;
-        font-weight: 300;
         margin-top: 200px;
-        margin-bottom: 45px;
+
+        &--small {
+            margin-top: 100px;
+            margin-bottom: 25px;
+        }
     }
 
     &-shadow {
@@ -16,44 +19,16 @@
         height: 3px;
         opacity: 0.54;
         box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.39);
-    }
+        margin-bottom: 40px;
 
-    &-title {
-        font-size: 46px;
-        font-weight: normal;
-        margin-top: 40px;
-        margin-bottom: 10px;
+        &--small {
+            width: 100px;
+        }
     }
 
     &-description {
-        font-size: var(--theme-headline-font-size);
-        font-weight: normal;
-        text-align: center;
         width: 50%;
         min-width: 250px;
         margin-bottom: 60px;
-        line-height: 30px;
-    }
-}
-
-@media screen and (max-width: 959px) {
-    .adf-error-content {
-        &-code {
-            margin-top: 100px;
-            font-size: 50px;
-            margin-bottom: 25px;
-        }
-
-        &-shadow {
-            width: 100px;
-        }
-
-        &-title {
-            font-size: var(--theme-headline-font-size);
-        }
-
-        &-description {
-            font-size: var(--theme-subheading-2-font-size);
-        }
     }
 }
diff --git a/lib/core/src/lib/templates/error-content/error-content.component.ts b/lib/core/src/lib/templates/error-content/error-content.component.ts
index 6d67046f01..49e16ded64 100644
--- a/lib/core/src/lib/templates/error-content/error-content.component.ts
+++ b/lib/core/src/lib/templates/error-content/error-content.component.ts
@@ -24,6 +24,10 @@ import {
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { TranslationService } from '../../translation/translation.service';
+import { Observable } from 'rxjs';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { map } from 'rxjs/operators';
+
 @Component({
     selector: 'adf-error-content',
     templateUrl: './error-content.component.html',
@@ -41,9 +45,12 @@ export class ErrorContentComponent implements OnInit {
     errorCode: string = ErrorContentComponent.UNKNOWN_ERROR;
 
     errorCodeTranslated: string;
+    isSmallScreen$: Observable<boolean>;
 
     constructor(private route: ActivatedRoute,
-                private translateService: TranslationService) {
+                private translateService: TranslationService,
+                private breakpointObserver: BreakpointObserver
+                ) {
     }
 
     ngOnInit() {
@@ -54,6 +61,8 @@ export class ErrorContentComponent implements OnInit {
                 this.errorCodeTranslated =  errorHasTranslation ? code : ErrorContentComponent.UNKNOWN_ERROR;
             });
         }
+
+        this.isSmallScreen$ = this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).pipe(map(({ matches }) => matches));
     }
 
     checkErrorExists(errorCode: string ) {