fix: new design for not found page (#1022)

* fix: new design for not found page

* fix: for lint issues

* fix: for lint issues

Will push nit fixes in another pr

Author: alok-traceable

projects/assets-library/assets/images/error-page.svg

@@ -3,16 +3,37 @@
 
 .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;
+      }
 
-  .navigate-home-button {
-    height: 2em;
+      .not-found-description {
+        @include body-2-medium();
+        color: $gray-5;
+      }
+    }
   }
 }

projects/components/src/not-found/not-found.component.scss

@@ -1,20 +1,29 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NavigationService } from '@hypertrace/common';
-import { ButtonStyle } from '../button/button';
+import { ButtonRole, ButtonStyle } from '../button/button';
 
 @Component({
   selector: 'ht-not-found',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./not-found.component.scss'],
   template: `
     <div class="not-found-container fill-container">
-      <div class="not-found-message">The requested page is not available</div>
-      <ht-button
-        class="navigate-home-button"
-        label="Take me home"
-        (click)="this.goHome()"
-        display="${ButtonStyle.Bordered}"
-      ></ht-button>
+      <div class="not-found-content">
+        <img class="not-found-image" src="assets/images/error-page.svg" loading="lazy" alt="not found page" />
+        <div class="not-found-message-wrapper">
+          <div class="not-found-text-wrapper">
+            <div class="not-found-message">Page not found</div>
+            <div class="not-found-description">The requested page is not available. This may be an unknown URL.</div>
+          </div>
+          <ht-button
+            class="navigate-home-button"
+            label="Go to dashboard"
+            (click)="this.goHome()"
+            display="${ButtonStyle.Solid}"
+            role="${ButtonRole.Primary}"
+          ></ht-button>
+        </div>
+      </div>
     </div>
   `
 })