From e5395906721238900b5dd8a3e5a2aabd6a03edf6 Mon Sep 17 00:00:00 2001
From: asewilhelmsen <101637785+asewilhelmsen@users.noreply.github.com>
Date: Tue, 3 Sep 2024 09:40:07 +0200
Subject: [PATCH] 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
---
 tavla/app/demo/components/CreateUserButton.tsx | 6 ++++--
 tavla/app/demo/components/DemoBoard.tsx        | 6 ++++--
 tavla/app/demo/page.tsx                        | 3 +--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/tavla/app/demo/components/CreateUserButton.tsx b/tavla/app/demo/components/CreateUserButton.tsx
index fb0644bf6..59cb10a97 100644
--- 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
index 81616ce9f..15a7cbb6c 100644
--- 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
index 4c4424b57..ac5bec7ba 100644
--- 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>