(feat) Page header redesign

src/dashboard/dispensing-dashboard.component.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import { InlineNotification } from '@carbon/react';
-import Overlay from '../forms/overlay/overlay.component';
-import { PharmacyHeader } from '../pharmacy-header/pharmacy-header.component';
-import PrescriptionTabLists from '../prescriptions/prescription-tab-lists.component';
-import { useConfig } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
 import { type PharmacyConfig } from '../config-schema';
+import { PharmacyHeader } from '../pharmacy-header/pharmacy-header.component';
+import Overlay from '../forms/overlay/overlay.component';
+import PrescriptionTabLists from '../prescriptions/prescription-tab-lists.component';
 
 export default function DispensingDashboard() {
   const config = useConfig<PharmacyConfig>();
   const { t } = useTranslation();
+
   if (config.dispenseBehavior.restrictTotalQuantityDispensed && config.dispenseBehavior.allowModifyingPrescription) {
     return (
-      <div className={`omrs-main-content`}>
+      <div className="omrs-main-content">
         <InlineNotification
           title={t('dispensingAppError', 'Dispensing App Error')}
           subtitle={t(
@@ -24,7 +25,7 @@ export default function DispensingDashboard() {
     );
   } else {
     return (
-      <div className={`omrs-main-content`}>
+      <div className="omrs-main-content">
         <PharmacyHeader />
         {/* <DispensingTiles /> */}
         <PrescriptionTabLists />

src/pharmacy-header/pharmacy-header.component.tsx

@@ -1,26 +1,26 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Location } from '@carbon/react/icons';
-import { useConfig, useSession, formatDate } from '@openmrs/esm-framework';
-import PharmacyIllustration from './pharmacy-illustration.component';
+import {
+  formatDate,
+  useConfig,
+  useSession,
+  PageHeader,
+  PageHeaderContent,
+  PharmacyPictogram,
+} from '@openmrs/esm-framework';
 import { type PharmacyConfig } from '../config-schema';
 import styles from './pharmacy-header.scss';
 
 export const PharmacyHeader: React.FC = () => {
   const { t } = useTranslation();
-  const userSession = useSession();
   const config = useConfig<PharmacyConfig>();
+  const userSession = useSession();
   const userLocation = userSession?.sessionLocation?.display;
 
   return (
-    <div className={styles.header}>
-      <div className={styles['left-justified-items']}>
-        <PharmacyIllustration />
-        <div className={styles['page-labels']}>
-          <p>{t('appName', config.appName)}</p>
-          <p className={styles['page-name']}>{t('home', 'Home')}</p>
-        </div>
-      </div>
+    <PageHeader className={styles.header}>
+      <PageHeaderContent illustration={<PharmacyPictogram />} title={t('appName', config.appName)} />
       <div className={styles['right-justified-items']}>
         <div className={styles['date-and-location']}>
           <Location size={16} />
@@ -30,6 +30,6 @@ export const PharmacyHeader: React.FC = () => {
           <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
         </div>
       </div>
-    </div>
+    </PageHeader>
   );
 };

src/pharmacy-header/pharmacy-header.scss

@@ -1,12 +1,12 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
   @include type.type-style('body-compact-02');
-  color: $text-02;
-  height: spacing.$spacing-12;
   background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
+  color: $text-02;
   display: flex;
   justify-content: space-between;
 }

src/prescriptions/prescription-tab-lists.component.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { Tab, Tabs, TabList, TabPanels, Search, ComboBox } from '@carbon/react';
+import classNames from 'classnames';
+import { ComboBox, Search, Tab, Tabs, TabList, TabPanels } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import PrescriptionTabPanel from './prescription-tab-panel.component';
-import styles from './prescriptions.scss';
-import { useLocationForFiltering } from '../location/location.resource';
 import { useConfig } from '@openmrs/esm-framework';
 import { type SimpleLocation } from '../types';
 import { type PharmacyConfig } from '../config-schema';
+import { useLocationForFiltering } from '../location/location.resource';
+import PrescriptionTabPanel from './prescription-tab-panel.component';
+import styles from './prescriptions.scss';
 
 const PrescriptionTabLists: React.FC = () => {
   const { t } = useTranslation();
@@ -45,7 +46,7 @@ const PrescriptionTabLists: React.FC = () => {
   };
 
   return (
-    <main className={`omrs-main-content ${styles.prescriptionListContainer}`}>
+    <main className={classNames('omrs-main-content', styles.prescriptionListContainer)}>
       <section className={styles.prescriptionTabsContainer}>
         <Tabs
           className={styles.prescriptionTabs}

src/prescriptions/prescriptions.scss

@@ -3,17 +3,9 @@
 @import '~@openmrs/esm-styleguide/src/vars';
 @import '../root.scss';
 
-title {
-  width: 6.938rem;
-  height: 1.75rem;
-  margin: 0.438rem 22.875rem 0.813rem 0;
-  font-family: IBMPlexSans;
-  font-size: 1.25rem;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.4;
-  letter-spacing: normal;
+.prescriptionListContainer {
+  margin: spacing.$spacing-05 0;
+  background: $ui-01;
 }
 
 .link {
@@ -35,7 +27,7 @@ title {
 }
 
 .prescriptionTabs {
-  grid-column: 'span 2';
+  grid-column: span 2;
   padding: 0 spacing.$spacing-05;
 }
 
@@ -46,14 +38,17 @@ title {
 }
 
 .tabsContainer {
-  background-color: $ui-02;
+  padding: 0 spacing.$spacing-05;
+}
 
-  :global(.cds--tabs__nav-item--selected) {
-    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+.tab {
+  &:active,
+  &:focus {
+    outline: 2px solid var(--brand-03) !important;
   }
 
-  :global(.cds--tab--list) button {
-    max-width: 12rem !important;
+  &[aria-selected='true'] {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
   }
 }
 
@@ -68,7 +63,7 @@ title {
   height: 100%;
   margin: 0 spacing.$spacing-05;
   background-color: $ui-01;
-  border: 0.5px solid #e0e0e0;
+  border: 0.5px solid $ui-03;
 
   :global(.cds--data-table-container) {
     padding-top: 0 !important;
@@ -98,30 +93,30 @@ title {
   }
 
   :global(.cds--table-expand__button) {
-    height: 2rem !important;
+    height: spacing.$spacing-07 !important;
   }
 }
 
 .searchContainer {
   display: flex;
   align-items: center;
   flex-direction: row-reverse;
-  padding: 0.5rem 1rem 0;
+  padding: 0 spacing.$spacing-05 0;
 
   :global(.cds--search-magnifier-icon) {
     z-index: 0 !important;
   }
 
   input {
-    background-color: #fff;
+    background-color: white;
   }
 }
 
 .addPrescriptionBtn {
   width: 10rem !important;
-  padding: 0.5rem !important;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  padding: spacing.$spacing-03 !important;
+  margin-left: spacing.$spacing-05;
+  margin-right: spacing.$spacing-05;
 }
 
 .patientSearch {