From b540a34b2dbeb525f0f485b1cfc7c84347367280 Mon Sep 17 00:00:00 2001
From: Michael Queyrichon <michael.queyrichon@digdir.no>
Date: Wed, 4 Oct 2023 16:31:17 +0200
Subject: [PATCH] Replace h1 with Heading

---
 .../administration/components/Administration.module.css   | 8 ++++----
 .../features/administration/components/Administration.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/app-development/features/administration/components/Administration.module.css b/frontend/app-development/features/administration/components/Administration.module.css
index e4e0b32de10..f0ae4886b3a 100644
--- a/frontend/app-development/features/administration/components/Administration.module.css
+++ b/frontend/app-development/features/administration/components/Administration.module.css
@@ -27,14 +27,14 @@
 }
 
 .header {
-  color: var(--primary-color-700);
   font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  margin: 0;
-  font-size: 37.5px;
   padding: var(--fds-spacing-6) 0 var(--fds-spacing-6) 0;
 }
 
+.header h1 {
+  color: var(--primary-color-700);
+}
+
 .content {
   background-color: white;
   border-radius: 6px;
diff --git a/frontend/app-development/features/administration/components/Administration.tsx b/frontend/app-development/features/administration/components/Administration.tsx
index 1adfe2e9677..1a35aceb3cc 100644
--- a/frontend/app-development/features/administration/components/Administration.tsx
+++ b/frontend/app-development/features/administration/components/Administration.tsx
@@ -3,6 +3,7 @@ import classes from './Administration.module.css';
 import { useAppConfigQuery } from 'app-development/hooks/queries';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 import { PageSpinner } from 'app-shared/components/PageSpinner';
+import { Heading } from '@digdir/design-system-react';
 
 export const Administration = () => {
   const { org, app } = useStudioUrlParams();
@@ -13,7 +14,9 @@ export const Administration = () => {
   return (
     <div className={classes.administration}>
       <div className={classes.container}>
-        <h1 className={classes.header}>{appConfigData.serviceName}</h1>
+        <div className={classes.header}>
+          <Heading size='xlarge'>{appConfigData.serviceName}</Heading>
+        </div>
         <div className={classes.content}>
           <main className={classes.main}>
             <div className={classes.placeholder}>{/* APP STATUS PLACEHOLDER */}</div>