Merge branch 'main' into enhnc/O3-3748

openmrs · Aug 7, 2024 · a4ddab8 · a4ddab8
2 parents cfc6b7b + f6c4493
commit a4ddab8
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 51 deletions.
diff --git a/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header-item.scss b/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header-item.scss
@@ -1,5 +1,7 @@
+@use '@carbon/colors';
 @use '@carbon/type';
-@import '@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   display: flex;
@@ -10,24 +12,30 @@
 }
 
 .abnormal-value {
-  border: 1px solid $ui-05;
-  background-color: white;
+  border: solid 1px colors.$orange-20-hover;
+  background-color: colors.$orange-10;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: fit-content;
-  padding: 0rem 0.25rem;
+  gap: layout.$spacing-02;
+  padding: layout.$spacing-02;
 }
 
 .critical-value {
   @extend .abnormal-value;
-  border: 2px solid $danger;
+  border: 1px solid colors.$red-60;
+  background-color: colors.$red-20;
 }
 
 .label-container {
+  flex-grow: 0;
+  flex-direction: row;
+  justify-content: flex-start;
   align-items: center;
   display: flex;
-  justify-content: space-between;
+  gap: layout.$spacing-02;
+  padding: 0;
 }
 
 .value-container {

diff --git a/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header.scss b/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header.scss
@@ -11,7 +11,7 @@
   justify-content: space-between;
   align-items: center;
   min-height: layout.$spacing-09;
-  margin: layout.$spacing-03 0 layout.$spacing-03 layout.$spacing-05;
+  margin: layout.$spacing-03 0 0 layout.$spacing-05;
   outline: none;
   pointer-events: visibleFill;
 }

diff --git a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx
@@ -39,35 +39,15 @@ const PaginatedVitals: React.FC<PaginatedVitalsProps> = ({
   const StyledTableCell = ({ interpretation, children }: { interpretation: string; children: React.ReactNode }) => {
     switch (interpretation) {
       case 'critically_high':
-        return (
-          <TableCell className={styles.criticallyHigh}>
-            <span>{children}</span>
-          </TableCell>
-        );
+        return <TableCell className={styles.criticallyHigh}>{children}</TableCell>;
       case 'critically_low':
-        return (
-          <TableCell className={styles.criticallyLow}>
-            <span>{children}</span>
-          </TableCell>
-        );
+        return <TableCell className={styles.criticallyLow}>{children}</TableCell>;
       case 'high':
-        return (
-          <TableCell className={styles.high}>
-            <span>{children}</span>
-          </TableCell>
-        );
+        return <TableCell className={styles.high}>{children}</TableCell>;
       case 'low':
-        return (
-          <TableCell className={styles.low}>
-            <span>{children}</span>
-          </TableCell>
-        );
+        return <TableCell className={styles.low}>{children}</TableCell>;
       default:
-        return (
-          <TableCell className={styles.normal}>
-            <span>{children}</span>
-          </TableCell>
-        );
+        return <TableCell>{children}</TableCell>;
     }
   };
 

diff --git a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss
@@ -9,12 +9,8 @@
 .table {
   td {
     white-space: nowrap;
-    padding: layout.$spacing-02;
-    > span {
-      width: 100%;
-      height: 100%;
-      display: inline-block;
-    }
+    border-bottom: none !important;
+    border-top: 1px solid colors.$gray-20;
   }
 }
 
@@ -24,18 +20,15 @@
   }
 }
 
-.criticallyHigh > span, .criticallyLow > span {
-  border: 2px solid colors.$red-60 !important;
-  padding: layout.$spacing-02 layout.$spacing-02 layout.$spacing-02 layout.$spacing-05;
+.criticallyHigh, .criticallyLow {
+  border-top: 1px solid colors.$red-20-hover !important;
+  background-color: colors.$red-20 !important;
 }
 
-.high > span, .low > span {
-  border: 1.5px solid colors.$black-100 !important;
-  padding: layout.$spacing-02 layout.$spacing-02 layout.$spacing-02 layout.$spacing-05;
-}
+.high, .low {
+  border-top: 1px solid colors.$orange-20 !important;
+  background-color: colors.$orange-10 !important;
 
-.normal > span {
-  padding-left: layout.$spacing-05;
 }
 
 .criticallyLow {
@@ -83,18 +76,18 @@
   @include type.type-style('heading-compact-01');
 }
 
-.criticallyLow > span::after {
+.criticallyLow::after {
   content: " ↓↓";
 }
 
-.criticallyHigh > span::after {
+.criticallyHigh::after {
   content: " ↑↑";
 }
 
-.low > span::after {
+.low::after {
   content: " ↓";
 }
 
-.high > span::after {
+.high::after {
   content: " ↑";
 }