style(demo): modify headings to align with hierarchical structure (#1629

) * style(demo): change header sizes * style(demo): change h3 to h2 (but looks like h3) * style(demo): remove lag demo-tavle heading and change h3 to h2
entur · Sep 3, 2024 · e539590 · e539590
1 parent 75b129b
commit e539590
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/tavla/app/demo/components/CreateUserButton.tsx b/tavla/app/demo/components/CreateUserButton.tsx
@@ -10,7 +10,9 @@ export const CreateUserButton = () => {
 
     return (
         <div>
-            <Heading3 margin="bottom">Opprett bruker</Heading3>
+            <Heading3 as="h2" margin="bottom">
+                Opprett bruker
+            </Heading3>
             <Paragraph margin="none">
                 Det er helt gratis å bruke Tavla!
             </Paragraph>
@@ -23,7 +25,7 @@ export const CreateUserButton = () => {
                     posthog.capture('LOGIN_BTN_DEMO_PAGE')
                 }}
             >
-                Opprett bruker / Logg inn
+                Opprett bruker
             </Button>
         </div>
     )

diff --git a/tavla/app/demo/components/DemoBoard.tsx b/tavla/app/demo/components/DemoBoard.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { Heading2 } from '@entur/typography'
+import { Heading2, Heading3 } from '@entur/typography'
 import { TileSelector } from 'app/(admin)/components/TileSelector'
 import { formDataToTile } from 'app/(admin)/components/TileSelector/utils'
 import { Preview } from 'app/(admin)/edit/[id]/components/Preview'
@@ -22,7 +22,9 @@ function DemoBoard() {
     return (
         <>
             <div className="flex flex-col gap-4">
-                <Heading2>Hvilke stoppesteder vil du vise i tavlen?</Heading2>
+                <Heading3 margin="none">
+                    Hvilke stoppesteder vil du vise i tavlen?
+                </Heading3>
                 <TileSelector
                     action={async (data: FormData) => {
                         const tile = formDataToTile(data)

diff --git a/tavla/app/demo/page.tsx b/tavla/app/demo/page.tsx
@@ -18,7 +18,7 @@ async function Demo() {
     return (
         <main className="container pt-8 pb-20 flex flex-col gap-10">
             <div>
-                <Heading1>Prøv og lag din egen avgangstavle!</Heading1>
+                <Heading1>Test ut Tavla!</Heading1>
                 <LeadParagraph margin="none" className="lg:w-4/5">
                     Dette er en demo-løsning hvor du kan prøve å opprette din
                     egen tavle. Du må logge inn for å lagre tavlen og få tilgang
@@ -29,7 +29,6 @@ async function Demo() {
             {!loggedIn && <CreateUserButton />}
 
             <div className="flex flex-col gap-10">
-                <Heading1 margin="none">Lag en demo-tavle</Heading1>
                 <DemoBoard />
             </div>
             <div>