Center the Compendium Data header title

webapp/src/components/DataPage.tsx

 import React, { ReactElement } from "react";
 import { Container, Row } from "react-bootstrap";
-import { Link } from "react-router-dom";
 
 import OrganizationSidebar from "./OrganizationSidebar";
 import PageHeader from "../components/global/PageHeader"
-import SectionLink from "../components/global/SectionLink";
 import SectionNavigation from "./SectionNavigation";
 import { Sections } from "../helpers/constants";
 import PolicySidebar from "./PolicySidebar";
@@ -28,13 +26,7 @@ function DataPage({ title, description, filter, children, category }: inputProps
         <>
             {category === Sections.Organisation && <OrganizationSidebar />}
             {category === Sections.Policy && <PolicySidebar />}
-            <PageHeader type={'data'} header={<h1 className={'bold-caps-30pt'}>
-                <Link to="/data" style={{ textDecoration: 'none', color: 'white' }}>
-                    <span>Compendium Data</span>
-                </Link>
-            </h1>}>
-                <SectionLink section={"Reports"} />
-            </PageHeader>
+            <PageHeader type={'data'} />
             <SectionNavigation activeCategory={category} />
             <Container className="grow">
                 <Row>

webapp/src/components/global/PageHeader.tsx

 import React, { ReactElement } from "react";
 import { Container, Row, Col } from "react-bootstrap";
+import { Link } from "react-router-dom";
+
+import SectionLink from "./SectionLink";
+
 
 interface inputProps {
-    type: string,
-    header: ReactElement,
-    children: ReactElement
+    type: string
 }
 
-function CompendiumHeader({ type, header, children }: inputProps): ReactElement {
+function CompendiumHeader({ type }: inputProps): ReactElement {
     let className = ''
     if (type == 'data') {
         className += ' compendium-data-header'
@@ -20,10 +22,14 @@ function CompendiumHeader({ type, header, children }: inputProps): ReactElement
             <Container>
                 <Row>
                     <Col sm={8}>
-                        {header}
+                        <h1 className={'bold-caps-30pt'} style={{'marginTop': '0.5rem'}}>
+                            <Link to={type === 'data' ? "/data" : "/"} style={{ textDecoration: 'none', color: 'white' }}>
+                                <span>Compendium {type === 'data' ? 'Data' : 'Reports'}</span>
+                            </Link>
+                        </h1>
                     </Col>
                     <Col sm={4}>
-                        {children}
+                        <SectionLink section={"Reports"} />
                     </Col>
                 </Row>
             </Container>

webapp/src/pages/CompendiumData.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement } from "react";
 import { Container, Row } from "react-bootstrap";
 import CollapsibleBox from "../components/CollapsibleBox";
 import PageHeader from "../components/global/PageHeader"
-import SectionLink from "../components/global/SectionLink";
 import Banner from "../components/global/Banner";
 import { Link } from "react-router-dom";
 import { Sections } from "../helpers/constants";
@@ -10,13 +9,7 @@ import { Sections } from "../helpers/constants";
 function CompendiumData(): ReactElement {
     return (
         <main className="content" style={{ backgroundColor: "white" }}>
-            <PageHeader type={'data'} header={<h1 className={'bold-caps-30pt'}>
-                <Link to="/data" style={{ textDecoration: 'none', color: 'white' }}>
-                    <span>Compendium Data</span>
-                </Link>
-            </h1>}>
-                <SectionLink section={"Reports"} />
-            </PageHeader>
+            <PageHeader type={'data'}/>
             <Banner type={'data'}>
                 <p className="wordwrap">
                     The GÉANT Compendium provides an authoritative reference source for anyone with an