Merge pull request #1779 from carbon-design-system/fix/page-not-found…

…-styling fix(web-app): fix page not found vertical spacing
carbon-design-system · Mar 14, 2024 · 59cbb98 · 59cbb98
2 parents 0f93ea5 + 898a136
commit 59cbb98
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 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
@@ -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,17 @@ 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 && (
           <>
+            <div className={styles.title}>↓</div>
             <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
@@ -5,15 +5,22 @@
  * 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;
 
 .title {
   @include type.type-style('fluid-display-01', true);
+
+  margin-top: 0;
 }
 
 .h1-container {
   &.h1-container {
     margin-top: spacing.$spacing-10;
   }
 }
+
+.button {
+  margin-top: spacing.$spacing-07;
+}