Merge pull request #1462 from appknox/page-not-found-fix

page not found refactor

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'>

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 {

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>

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;
+  }
+}

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;
+  }
+}

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);
 }

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 />