(feat) O3-3782: Use styleguide page header component in lab app

src/laboratory-dashboard.component.tsx

@@ -1,16 +1,26 @@
 import React from "react";
-import { LaboratoryHeader } from "./header/laboratory-header.component";
+import { useTranslation } from "react-i18next";
+import { PageHeader, LaboratoryPictogram } from "@openmrs/esm-framework";
 import Overlay from "./components/overlay/overlay.component";
 import LaboratoryOrdersTabs from "./lab-tabs/laboratory-tabs.component";
 import LaboratorySummaryTiles from "./lab-tiles/laboratory-summary-tiles.component";
+import styles from "./laboratory-dashboard.scss";
 
 const LaboratoryDashboard: React.FC = () => {
+  const { t } = useTranslation();
+
   return (
     <div className={`omrs-main-content`}>
-      <LaboratoryHeader />
-      <LaboratorySummaryTiles />
-      <LaboratoryOrdersTabs />
-      <Overlay />
+      <PageHeader
+        illustration={<LaboratoryPictogram />}
+        title={t("laboratory", "Laboratory")}
+        className={styles.pageHeader}
+      />
+      <div className={styles.container}>
+        <LaboratorySummaryTiles />
+        <LaboratoryOrdersTabs />
+        <Overlay />
+      </div>
     </div>
   );
 };

src/laboratory-dashboard.scss

@@ -0,0 +1,10 @@
+@use '@carbon/layout';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.pageHeader {
+  border-bottom: 1px solid $ui-03;
+}
+
+.container {
+  margin-top: layout.$spacing-07;
+}