From 655e8d39c7b26b17254abbbd97f0a606d347c9a8 Mon Sep 17 00:00:00 2001
From: Francine Lucca <francinelucca@hotmail.com>
Date: Wed, 6 Mar 2024 17:55:22 -0500
Subject: [PATCH 1/2] fix(web-app): fix page not found vertical spacing

---
 .../components/page-not-found/page-not-found.js        |  8 +++++---
 .../page-not-found/page-not-found.module.scss          | 10 ++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/services/web-app/components/page-not-found/page-not-found.js b/services/web-app/components/page-not-found/page-not-found.js
index 78bb43eb9..2a4c2f6ed 100644
--- a/services/web-app/components/page-not-found/page-not-found.js
+++ b/services/web-app/components/page-not-found/page-not-found.js
@@ -6,6 +6,7 @@
  */
 import { Button, Column, Grid } from '@carbon/react'
 import { ArrowRight } from '@carbon/react/icons'
+import { H1 } from '@carbon-platform/mdx-components'
 import { useEffect, useState } from 'react'
 
 import { useAuth } from '@/contexts/auth'
@@ -26,15 +27,16 @@ export const PageNotFound = () => {
   return (
     <Grid className={styles.grid}>
       <Column className={styles.column} sm={4} md={8} lg={6}>
-        <h1 className={styles.title}>Page not found.</h1>
+        <H1 headingClassName={styles.title} className={styles['h1-container']}>
+          Page not found.
+        </H1>
         {!isAuthorized && (
           <>
             <h2 className={styles.title}>Log in to view all pages.</h2>
             <Grid>
               <Column sm={4}>
-                <Button className={styles.button} as="a" href="/api/login">
+                <Button className={styles.button} as="a" href="/api/login" renderIcon={ArrowRight}>
                   Log in
-                  <ArrowRight size={16} />
                 </Button>
               </Column>
             </Grid>
diff --git a/services/web-app/components/page-not-found/page-not-found.module.scss b/services/web-app/components/page-not-found/page-not-found.module.scss
index eb0a20706..d66c9af84 100644
--- a/services/web-app/components/page-not-found/page-not-found.module.scss
+++ b/services/web-app/components/page-not-found/page-not-found.module.scss
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/react/scss/breakpoint' as breakpoint;
 @use '@carbon/react/scss/spacing' as spacing;
 @use '@carbon/react/scss/type' as type;
 
@@ -17,3 +18,12 @@
     margin-top: spacing.$spacing-10;
   }
 }
+
+// override carbon max-width and padding-right
+.button {
+  margin-top: spacing.$spacing-07;
+
+  @include breakpoint.breakpoint('md') {
+    margin-top: spacing.$spacing-10;
+  }
+}

From 898a136839c14f0c9fe1729d59455b762389f297 Mon Sep 17 00:00:00 2001
From: Francine Lucca <francinelucca@hotmail.com>
Date: Wed, 13 Mar 2024 11:58:20 -0400
Subject: [PATCH 2/2] fix: page not found styling

---
 .../web-app/components/page-not-found/page-not-found.js    | 1 +
 .../components/page-not-found/page-not-found.module.scss   | 7 ++-----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/services/web-app/components/page-not-found/page-not-found.js b/services/web-app/components/page-not-found/page-not-found.js
index 2a4c2f6ed..66c415e59 100644
--- a/services/web-app/components/page-not-found/page-not-found.js
+++ b/services/web-app/components/page-not-found/page-not-found.js
@@ -32,6 +32,7 @@ export const PageNotFound = () => {
         </H1>
         {!isAuthorized && (
           <>
+            <div className={styles.title}>↓</div>
             <h2 className={styles.title}>Log in to view all pages.</h2>
             <Grid>
               <Column sm={4}>
diff --git a/services/web-app/components/page-not-found/page-not-found.module.scss b/services/web-app/components/page-not-found/page-not-found.module.scss
index d66c9af84..560868555 100644
--- a/services/web-app/components/page-not-found/page-not-found.module.scss
+++ b/services/web-app/components/page-not-found/page-not-found.module.scss
@@ -11,6 +11,8 @@
 
 .title {
   @include type.type-style('fluid-display-01', true);
+
+  margin-top: 0;
 }
 
 .h1-container {
@@ -19,11 +21,6 @@
   }
 }
 
-// override carbon max-width and padding-right
 .button {
   margin-top: spacing.$spacing-07;
-
-  @include breakpoint.breakpoint('md') {
-    margin-top: spacing.$spacing-10;
-  }
 }