(fix) Tweak billing header UI (#67)

* (fix) Tweak billing header UI * Fixup
palladiumkenya · Nov 28, 2023 · dc1c83e · dc1c83e
1 parent 97f533c
commit dc1c83e
Showing 7 changed files with 14 additions and 12 deletions.
diff --git a/...g-app/src/billing-dashboard.component.tsx → ...dashboard/billing-dashboard.component.tsx b/...g-app/src/billing-dashboard.component.tsx → ...dashboard/billing-dashboard.component.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Layer, Tile } from '@carbon/react';
 import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import BillingHeader from '../billing-header/billing-header.component';
 import styles from './billing-dashboard.scss';
-import BillingHeader from './billing-header/billing-header.component';
-import { useTranslation } from 'react-i18next';
 
 export function BillingDashboard() {
   const { t } = useTranslation();
 
   return (
     <>
-      <BillingHeader title={t('billing', 'Billing')} />
+      <BillingHeader title={t('home', 'Home')} />
       <Layer className={styles.emptyStateContainer}>
         <Tile className={styles.tile}>
           <div className={styles.illo}>

diff --git a/...sm-billing-app/src/billing-dashboard.scss → .../billing-dashboard/billing-dashboard.scss b/...sm-billing-app/src/billing-dashboard.scss → .../billing-dashboard/billing-dashboard.scss
@@ -18,7 +18,6 @@
   @include type.type-style('heading-compact-01');
   color: colors.$gray-70;
   margin-top: layout.$spacing-05;
-  margin-bottom: layout.$spacing-03;
 }
 
 .tile {

diff --git a/...illing-app/src/billing-dashboard.test.tsx → ...ling-dashboard/billing-dashboard.test.tsx b/...illing-app/src/billing-dashboard.test.tsx → ...ling-dashboard/billing-dashboard.test.tsx
diff --git a/packages/esm-billing-app/src/billing-header/billing-header.component.tsx b/packages/esm-billing-app/src/billing-header/billing-header.component.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Calendar, Location, UserFollow } from '@carbon/react/icons';
 import { formatDate, useSession } from '@openmrs/esm-framework';
-import styles from './billing-header.scss';
 import BillingIllustration from './billing-illustration.component';
-import { Calendar, Location, UserFollow } from '@carbon/react/icons';
+import styles from './billing-header.scss';
 
 interface BillingHeaderProps {
   title: string;

diff --git a/packages/esm-billing-app/src/billing-header/billing-header.scss b/packages/esm-billing-app/src/billing-header/billing-header.scss
@@ -11,27 +11,31 @@
   border-bottom: 1px solid $ui-03;
   display: flex;
   justify-content: space-between;
+  padding: spacing.$spacing-05;
 }
 
 .left-justified-items {
   display: flex;
   flex-direction: row;
   align-items: center;
   cursor: pointer;
+  align-items: center;
 }
 
 .right-justified-items {
   @include type.type-style('body-compact-02');
   color: $text-02;
-  margin: spacing.$spacing-03;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .page-name {
   @include type.type-style('heading-04');
 }
 
 .page-labels {
-  margin: spacing.$spacing-05 0;
+  margin: spacing.$spacing-05;
 
   p:first-of-type {
     margin-bottom: spacing.$spacing-02;
@@ -47,8 +51,7 @@
 .userContainer {
   display: flex;
   justify-content: flex-end;
-  margin-bottom: spacing.$spacing-03;
-  gap: spacing.$spacing-05; 
+  gap: spacing.$spacing-05;
 }
 
 .value {

diff --git a/packages/esm-billing-app/src/billing-header/billing-illustration.component.tsx b/packages/esm-billing-app/src/billing-header/billing-illustration.component.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const BillingIllustration: React.FC = () => {
   return (
-    <svg width="92" height="94" viewBox="0 0 92 94" xmlns="http://www.w3.org/2000/svg">
+    <svg width="64" height="64" viewBox="10 10 60 60.02">
       <title>Billing module illustration</title>
       <g fill="none" fillRule="evenodd">
         <path

diff --git a/packages/esm-billing-app/src/root.component.tsx b/packages/esm-billing-app/src/root.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { BillingDashboard } from './billing-dashboard.component';
+import { BillingDashboard } from './billing-dashboard/billing-dashboard.component';
 
 const RootComponent: React.FC = () => {
   const baseName = window.getOpenmrsSpaBase() + 'home/billing';