From 2021d445e361cd1c8170a4cacb92749b1a5a92ea Mon Sep 17 00:00:00 2001 From: Twiineenock Date: Tue, 6 Aug 2024 01:09:33 +0300 Subject: [PATCH 1/3] style abnormal vitals with new designs --- .../vitals-header-item.scss | 17 +++++++--- .../src/vitals/paginated-vitals.component.tsx | 30 +++--------------- .../src/vitals/paginated-vitals.scss | 31 +++++++------------ 3 files changed, 29 insertions(+), 49 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 index 329a0b5229..1659aaecd2 100644 --- 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,4 +1,5 @@ @use '@carbon/type'; +@use '@carbon/layout'; @import '@openmrs/esm-styleguide/src/vars'; .container { @@ -10,24 +11,30 @@ } .abnormal-value { - border: 1px solid $ui-05; - background-color: white; + border: solid 1px #ffc69e; + background-color: #fff2e8; 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: solid 1px #da1e28; + background-color: #ffd7d9; } .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/paginated-vitals.component.tsx b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx index 7c3b230081..ae91eb3b18 100644 --- 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 = ({ const StyledTableCell = ({ interpretation, children }: { interpretation: string; children: React.ReactNode }) => { switch (interpretation) { case 'critically_high': - return ( - - {children} - - ); + return {children}; case 'critically_low': - return ( - - {children} - - ); + return {children}; case 'high': - return ( - - {children} - - ); + return {children}; case 'low': - return ( - - {children} - - ); + return {children}; default: - return ( - - {children} - - ); + return {children}; } }; diff --git a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss index 6b75e14743..4c1f185854 100644 --- 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 #e0e0e0; } } @@ -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 #ffc2c5 !important; + background-color: #ffd7d9 !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 #ffd9be !important; + background-color: #fff2e8 !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: " ↑"; } From 643f7a762f5976b2a2adddd01f08039ccc550ad1 Mon Sep 17 00:00:00 2001 From: Twiineenock Date: Tue, 6 Aug 2024 16:12:44 +0300 Subject: [PATCH 2/3] use styleguide colors --- .../vitals-header-item.scss | 9 +++++---- .../src/vitals/paginated-vitals.scss | 10 +++++----- 2 files changed, 10 insertions(+), 9 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 index 1659aaecd2..36cc50ebf4 100644 --- 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,6 @@ @use '@carbon/type'; @use '@carbon/layout'; +@use '@carbon/colors'; @import '@openmrs/esm-styleguide/src/vars'; .container { @@ -11,8 +12,8 @@ } .abnormal-value { - border: solid 1px #ffc69e; - background-color: #fff2e8; + border: solid 1px colors.$orange-20-hover; + background-color: colors.$orange-10; display: flex; flex-direction: column; justify-content: center; @@ -23,8 +24,8 @@ .critical-value { @extend .abnormal-value; - border: solid 1px #da1e28; - background-color: #ffd7d9; + border: solid 1px colors.$red-60; + background-color: colors.$red-20; } .label-container { diff --git a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss index 4c1f185854..8739849781 100644 --- a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss +++ b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss @@ -10,7 +10,7 @@ td { white-space: nowrap; border-bottom: none !important; - border-top: 1px solid #e0e0e0; + border-top: 1px solid colors.$gray-20; } } @@ -21,13 +21,13 @@ } .criticallyHigh, .criticallyLow { - border-top: 1px solid #ffc2c5 !important; - background-color: #ffd7d9 !important; + border-top: 1px solid colors.$red-20-hover !important; + background-color: colors.$red-20 !important; } .high, .low { - border-top: 1px solid #ffd9be !important; - background-color: #fff2e8 !important; + border-top: 1px solid colors.$orange-20 !important; + background-color: colors.$orange-10 !important; } From 10eab8846a6e29d733bb7d8a1f2b400fd560a456 Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Wed, 7 Aug 2024 01:13:57 +0300 Subject: [PATCH 3/3] Fixup --- .../vitals-and-biometrics-header/vitals-header-item.scss | 6 +++--- .../src/vitals-and-biometrics-header/vitals-header.scss | 2 +- 2 files changed, 4 insertions(+), 4 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 index 36cc50ebf4..14802f5263 100644 --- 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,7 +1,7 @@ +@use '@carbon/colors'; @use '@carbon/type'; @use '@carbon/layout'; -@use '@carbon/colors'; -@import '@openmrs/esm-styleguide/src/vars'; +@use '@openmrs/esm-styleguide/src/vars' as *; .container { display: flex; @@ -24,7 +24,7 @@ .critical-value { @extend .abnormal-value; - border: solid 1px colors.$red-60; + border: 1px solid colors.$red-60; background-color: colors.$red-20; } 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 index 0bf45108a0..11b0693e4e 100644 --- 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; }