From 1bf9584612d50b9b54414a22c3833332b3bcc655 Mon Sep 17 00:00:00 2001
From: Sam David <samd948@gmail.com>
Date: Tue, 24 Sep 2024 19:46:01 +0530
Subject: [PATCH] page not found refactor

---
 app/components/ak-link/index.hbs         |  1 +
 app/components/ak-link/index.ts          |  1 +
 app/components/page-not-found/index.hbs  | 46 ++++++++++++++++++++++++
 app/components/page-not-found/index.scss | 23 ++++++++++++
 app/components/page-not-found/index.ts   |  9 +++++
 app/styles/_component-variables.scss     |  8 +++++
 app/templates/not-found.hbs              | 14 ++------
 7 files changed, 90 insertions(+), 12 deletions(-)
 create mode 100644 app/components/page-not-found/index.hbs
 create mode 100644 app/components/page-not-found/index.scss
 create mode 100644 app/components/page-not-found/index.ts

diff --git a/app/components/ak-link/index.hbs b/app/components/ak-link/index.hbs
index 34e897107..4d8acf556 100644
--- a/app/components/ak-link/index.hbs
+++ b/app/components/ak-link/index.hbs
@@ -14,6 +14,7 @@
   @route={{@route}}
   @models={{this.modelOrModels}}
   @query={{this.query}}
+  @replace={{@replace}}
 >
   {{#if (has-block 'leftIcon')}}
     <div data-test-ak-link-left-icon local-class='ak-link-left-icon'>
diff --git a/app/components/ak-link/index.ts b/app/components/ak-link/index.ts
index fb52ffdbd..3ca8af937 100644
--- a/app/components/ak-link/index.ts
+++ b/app/components/ak-link/index.ts
@@ -32,6 +32,7 @@ export interface AkLinkSignatureArgs {
   models?: string[];
   linkTextClass?: string;
   query?: Record<string, unknown>;
+  replace?: boolean;
 }
 
 export interface AkLinkSignature {
diff --git a/app/components/page-not-found/index.hbs b/app/components/page-not-found/index.hbs
new file mode 100644
index 000000000..a54c7afb6
--- /dev/null
+++ b/app/components/page-not-found/index.hbs
@@ -0,0 +1,46 @@
+<AkStack
+  local-class='page-not-found-container'
+  @width='full'
+  @alignItems='center'
+  @justifyContent='center'
+>
+  <AkStack
+    local-class='page-not-found-card'
+    @direction='column'
+    @alignItems='center'
+    @justifyContent='center'
+    @spacing='6'
+  >
+    <AkStack
+      @alignItems='center'
+      @justifyContent='center'
+      @width='full'
+      local-class='logo-container'
+    >
+      <AuthAssets />
+    </AkStack>
+
+    <AkSvg::NoResult />
+
+    <AkStack
+      @direction='column'
+      @alignItems='center'
+      @justifyContent='center'
+      @spacing='2'
+    >
+      <AkTypography @variant='h5'>
+        {{t 'pageNotFound'}}
+      </AkTypography>
+
+      <AkLink @route='authenticated.index' @replace={{true}}>
+        <AkButton>
+          <:leftIcon>
+            <AkIcon @iconName='home' />
+          </:leftIcon>
+
+          <:default>{{t 'gotoHome'}}</:default>
+        </AkButton>
+      </AkLink>
+    </AkStack>
+  </AkStack>
+</AkStack>
\ No newline at end of file
diff --git a/app/components/page-not-found/index.scss b/app/components/page-not-found/index.scss
new file mode 100644
index 000000000..c0dcfc008
--- /dev/null
+++ b/app/components/page-not-found/index.scss
@@ -0,0 +1,23 @@
+.page-not-found-card {
+  background-color: var(--page-not-found-card-background-color);
+  border-radius: var(--page-not-found-card-border-radius);
+  border: 1px solid var(--page-not-found-card-border-color);
+  box-shadow: var(--page-not-found-card-box-shadow);
+  min-width: 32em;
+  padding-bottom: 2em;
+}
+
+.page-not-found-container {
+  height: 100vh;
+  background-color: var(--page-not-found-container-background-color);
+}
+
+.logo-container {
+  padding: 1.5em 0em 1em 0em;
+  border-bottom: 1px solid var(--page-not-found-border-color);
+
+  img {
+    max-width: 12em;
+    max-height: 7em;
+  }
+}
diff --git a/app/components/page-not-found/index.ts b/app/components/page-not-found/index.ts
new file mode 100644
index 000000000..5abc90fc7
--- /dev/null
+++ b/app/components/page-not-found/index.ts
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class PageNotFoundComponent extends Component {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    PageNotFound: typeof PageNotFoundComponent;
+  }
+}
diff --git a/app/styles/_component-variables.scss b/app/styles/_component-variables.scss
index c7a865df8..10f366418 100644
--- a/app/styles/_component-variables.scss
+++ b/app/styles/_component-variables.scss
@@ -1919,4 +1919,12 @@ body {
   --dynamic-scan-action-expiry-container-background-color: var(
     --neutral-grey-100
   );
+
+  // variables for page-not-found
+  --page-not-found-container-background-color: var(--background-light);
+  --page-not-found-card-background-color: var(--background-main);
+  --page-not-found-card-border-color: var(--border-color-1);
+  --page-not-found-card-border-radius: var(--border-radius);
+  --page-not-found-card-box-shadow: var(--box-shadow-2);
+  --page-not-found-border-color: var(--border-color-1);
 }
diff --git a/app/templates/not-found.hbs b/app/templates/not-found.hbs
index cec167e15..0dce0cb61 100644
--- a/app/templates/not-found.hbs
+++ b/app/templates/not-found.hbs
@@ -1,13 +1,3 @@
-{{page-title "Not Found"}}
+{{page-title 'Not Found'}}
 
-<div class="error-page">
-  <h1>404</h1>
-  <h2>{{t "pageNotFound"}}</h2>
-  <div>
-    <LinkTo @route="authenticated.index" class="button is-primary">
-      <AkIcon @iconName="home" @size="small" />
-      &nbsp;
-      {{t "gotoHome"}}
-    </LinkTo>
-  </div>
-</div>
+<PageNotFound />
\ No newline at end of file