From 95a19ea9bab02030e5398bdf4668d6e807d7417b Mon Sep 17 00:00:00 2001
From: suubi-joshua <78343336+suubi-joshua@users.noreply.github.com>
Date: Fri, 8 Nov 2024 18:03:56 +0300
Subject: [PATCH] (feat) O3-3848 Enable Admission request bar to always be
 displayed.  (#1364)

* Enable Admission request bar to always be displayed

* Clean up
---
 .../admission-requests-bar.component.tsx             |  6 ++++--
 .../src/ward-view-header/admission-requests.scss     | 12 +++++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.component.tsx b/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.component.tsx
index 40d0acec0..49fe8f596 100644
--- a/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.component.tsx
+++ b/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.component.tsx
@@ -16,7 +16,7 @@ const AdmissionRequestsBar: React.FC<AdmissionRequestsBarProps> = ({ wardPending
   const { t } = useTranslation();
   const layout = useLayoutType();
 
-  if (isLoading || !inpatientRequests?.length) {
+  if (isLoading || !inpatientRequests) {
     return null;
   }
 
@@ -31,7 +31,9 @@ const AdmissionRequestsBar: React.FC<AdmissionRequestsBarProps> = ({ wardPending
   }
 
   return (
-    <div className={styles.admissionRequestsContainer}>
+    <div className={`${styles.admissionRequestsContainer} ${
+      inpatientRequests?.length ? styles.blackBackground : styles.lightBlueBackground
+    }`}>
       <Movement className={styles.movementIcon} size="24" />
       <span className={styles.content}>
         {t('admissionRequestsCount', '{{count}} admission request', {
diff --git a/packages/esm-ward-app/src/ward-view-header/admission-requests.scss b/packages/esm-ward-app/src/ward-view-header/admission-requests.scss
index f8fb13c37..bc386daac 100644
--- a/packages/esm-ward-app/src/ward-view-header/admission-requests.scss
+++ b/packages/esm-ward-app/src/ward-view-header/admission-requests.scss
@@ -30,8 +30,18 @@
   margin-right: layout.$spacing-03;
 }
 
+.blackBackground {
+  background-color: black;
+  color: white;
+}
+
+.lightBlueBackground {
+  background-color: white;
+  border-left:4px solid $color-blue-60-2;
+  color: black;
+}
+
 .content {
   @include type.type-style('heading-compact-01');
-  color: $ui-02;
   margin-right: layout.$spacing-03;
 }