From 9d7442b33d7109266ec401e4303408e8b744740b Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Mon, 26 Jul 2021 11:10:48 +0800 Subject: [PATCH 1/3] fix: new design for not found page --- .../assets/images/error-page.svg | 140 ++++++++++++++++++ .../src/not-found/not-found.component.scss | 43 +++++- .../src/not-found/not-found.component.ts | 27 +++- 3 files changed, 194 insertions(+), 16 deletions(-) create mode 100644 projects/assets-library/assets/images/error-page.svg diff --git a/projects/assets-library/assets/images/error-page.svg b/projects/assets-library/assets/images/error-page.svg new file mode 100644 index 000000000..f358cbec5 --- /dev/null +++ b/projects/assets-library/assets/images/error-page.svg @@ -0,0 +1,140 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/components/src/not-found/not-found.component.scss b/projects/components/src/not-found/not-found.component.scss index bb94ddd0b..7e83e0792 100644 --- a/projects/components/src/not-found/not-found.component.scss +++ b/projects/components/src/not-found/not-found.component.scss @@ -3,16 +3,43 @@ .not-found-container { display: flex; - flex-direction: column; - align-items: center; justify-content: center; + align-items: center; - .not-found-message { - @include header-3; - padding-bottom: 64px; - } + .not-found-content { + display: flex; + padding: 52px; + box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.08); + border-radius: 8px; + max-width: 748px; + max-height: 348px; + + .not-found-message-wrapper { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + padding-left: 40px; + + .not-found-text-wrapper { + margin-bottom: 36px; + } + + .not-found-message { + @include header-4; + margin-bottom: 16px; + } + + .not-found-description { + @include body-2-medium(); + color: #657277; - .navigate-home-button { - height: 2em; + .contact-us-link { + @include body-2-medium($blue-5); + margin-left: 8px; + text-decoration: none; + } + } + } } } diff --git a/projects/components/src/not-found/not-found.component.ts b/projects/components/src/not-found/not-found.component.ts index 51a4dcc74..ef91d1c84 100644 --- a/projects/components/src/not-found/not-found.component.ts +++ b/projects/components/src/not-found/not-found.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { NavigationService } from '@hypertrace/common'; -import { ButtonStyle } from '../button/button'; +import { ButtonStyle, ButtonRole } from '../button/button'; @Component({ selector: 'ht-not-found', @@ -8,13 +8,24 @@ import { ButtonStyle } from '../button/button'; styleUrls: ['./not-found.component.scss'], template: `
-
The requested page is not available
- +
+ not found page +
+
+
Page not found
+
+ The requested page is not available. This may be an unknown URL. +
+
+ +
+
` }) From 18566b1cef32f88057f0cc6d7b961869632ebe97 Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Mon, 26 Jul 2021 11:25:57 +0800 Subject: [PATCH 2/3] fix: for lint issues --- projects/components/src/not-found/not-found.component.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/projects/components/src/not-found/not-found.component.ts b/projects/components/src/not-found/not-found.component.ts index ef91d1c84..b5963a383 100644 --- a/projects/components/src/not-found/not-found.component.ts +++ b/projects/components/src/not-found/not-found.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { NavigationService } from '@hypertrace/common'; -import { ButtonStyle, ButtonRole } from '../button/button'; +import { ButtonRole, ButtonStyle } from '../button/button'; @Component({ selector: 'ht-not-found', @@ -13,9 +13,7 @@ import { ButtonStyle, ButtonRole } from '../button/button';
Page not found
-
- The requested page is not available. This may be an unknown URL. -
+
The requested page is not available. This may be an unknown URL.
Date: Mon, 26 Jul 2021 11:33:04 +0800 Subject: [PATCH 3/3] fix: for lint issues --- .../components/src/not-found/not-found.component.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/projects/components/src/not-found/not-found.component.scss b/projects/components/src/not-found/not-found.component.scss index 7e83e0792..4f85cd965 100644 --- a/projects/components/src/not-found/not-found.component.scss +++ b/projects/components/src/not-found/not-found.component.scss @@ -32,13 +32,7 @@ .not-found-description { @include body-2-medium(); - color: #657277; - - .contact-us-link { - @include body-2-medium($blue-5); - margin-left: 8px; - text-decoration: none; - } + color: $gray-5; } } }