Skip to content

Commit 52a1424

Browse files
adamrefaeyadamrefaey
committed
Refactor styles and structure for flagged and normal values sections to enhance layout and readability
1 parent 9b7b1e5 commit 52a1424

File tree

4 files changed

+187
-30
lines changed

4 files changed

+187
-30
lines changed

‎frontend/src/pages/Reports/ReportDetailPage.scss‎

Lines changed: 150 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,6 @@
128128
padding: 14px 16px;
129129
margin: 0 16px 16px;
130130
align-items: flex-start;
131-
background-color: rgba(201, 58, 84, 0.08);
132131
gap: 12px;
133132
}
134133

@@ -162,6 +161,8 @@
162161
padding: 16px;
163162
cursor: pointer;
164163
background-color: rgba(235, 238, 248, 0.5);
164+
margin-left: -15px;
165+
margin-bottom: 14px;
165166
}
166167

167168
&__section-icon {
@@ -250,16 +251,14 @@
250251
display: flex;
251252
flex-wrap: wrap;
252253
align-items: center;
253-
padding: 16px;
254-
background-color: #fff;
254+
padding: 16px 16px 16px 24px; // Increased left padding from 16px to 24px
255+
background-color: #fff; // Keep default background white
255256

256257
&--high {
257-
background-color: rgba(201, 58, 84, 0.08);
258258
border-bottom: 1px solid rgba(201, 58, 84, 0.15);
259259
}
260260

261261
&--low {
262-
background-color: rgba(250, 173, 113, 0.08);
263262
border-bottom: 1px solid rgba(250, 173, 113, 0.15);
264263
}
265264
}
@@ -303,7 +302,12 @@
303302
&__item-details {
304303
color: #444;
305304
padding: 16px;
306-
background-color: rgba(248, 249, 251, 0.6);
305+
background-color: rgba(248, 249, 251, 0.6); // Default background
306+
307+
&.details--high, // Target details when high
308+
&.details--low { // Target details when low
309+
background-color: transparent; // Remove specific background for flagged item details
310+
}
307311
}
308312

309313
&__item-section {
@@ -747,6 +751,139 @@
747751
}
748752
}
749753

754+
// Modify styles for both flagged and normal values sections
755+
.flagged-values-section,
756+
.normal-values-section {
757+
background-color: transparent !important;
758+
border: none !important;
759+
box-shadow: none !important;
760+
761+
.report-detail-page__section-header {
762+
background-color: transparent !important;
763+
padding: 2px 16px !important;
764+
border-radius: 0 !important;
765+
766+
.report-detail-page__section-title {
767+
font-size: 13px !important;
768+
line-height: 1.1 !important;
769+
}
770+
}
771+
772+
.flagged-values-content,
773+
.normal-values-content {
774+
padding: 0;
775+
background-color: transparent;
776+
}
777+
}
778+
779+
// Updated lab value item styles with smaller text and reduced height
780+
.lab-value-item {
781+
border-radius: 16px;
782+
margin-bottom: 14px; // Slightly reduced from 16px
783+
overflow: hidden;
784+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
785+
border: 1px solid #ebeef8;
786+
787+
&__header {
788+
display: flex;
789+
align-items: center;
790+
justify-content: space-between;
791+
background-color: #fefefe;
792+
padding: 8px 16px 8px 28px; // Shrink header vertical padding to 2px for even smaller heading height
793+
}
794+
795+
&--low &__header {
796+
background-color: #feF8f2; // Light orange for "Low" background
797+
}
798+
799+
&--high &__header {
800+
background-color: #fef2f2; // Light red for "High" background
801+
}
802+
803+
&__name {
804+
font-weight: 500;
805+
font-size: 13px; // Further reduce font size for heading
806+
letter-spacing: 0.26px;
807+
line-height: 16px; // Reduce line-height for compactness
808+
color: #313e4c;
809+
flex: 1;
810+
}
811+
812+
&__status-value {
813+
display: flex;
814+
align-items: center;
815+
gap: 12px;
816+
}
817+
818+
&__status {
819+
font-size: 11px; // Reduced from 12px for smaller badge
820+
padding: 2px 7px; // Reduced from 3px 10px for smaller badge
821+
border-radius: 12px;
822+
font-weight: 600;
823+
text-transform: capitalize;
824+
825+
&.report-detail-page__item-level--high {
826+
background-color: #c93a54;
827+
color: white;
828+
}
829+
830+
&.report-detail-page__item-level--low {
831+
background-color: #f5b77b;
832+
color: white;
833+
}
834+
}
835+
836+
&__value {
837+
font-weight: 600;
838+
font-size: 15px; // Reduced from 16px
839+
white-space: nowrap;
840+
color: #313e4c;
841+
}
842+
843+
&__details {
844+
padding: 14px 16px 14px 28px; // Reduced from 16px to 14px vertical padding
845+
}
846+
847+
&__section {
848+
margin-bottom: 16px; // Reduced from 20px
849+
850+
&:last-child {
851+
margin-bottom: 0;
852+
}
853+
854+
h4 {
855+
font-size: 14px; // Reduced from 15px
856+
color: #313e4c;
857+
margin: 0 0 6px 0; // Reduced from 8px
858+
font-weight: 600;
859+
}
860+
861+
p {
862+
margin: 0;
863+
font-size: 13px; // Reduced from 14px
864+
line-height: 1.4; // Reduced from 1.5
865+
color: #5c6d80;
866+
}
867+
}
868+
869+
&__list {
870+
margin: 0;
871+
padding-left: 20px;
872+
font-size: 13px; // Reduced from 14px
873+
line-height: 1.4; // Reduced from 1.5
874+
color: #5c6d80;
875+
876+
li {
877+
margin-bottom: 8px; // Reduced from 10px
878+
padding-left: 4px;
879+
880+
&:last-child {
881+
margin-bottom: 0;
882+
}
883+
}
884+
}
885+
}
886+
750887
// Media Queries for responsiveness
751888
@media (min-width: 768px) {
752889
.report-detail-page {
@@ -781,5 +918,12 @@
781918
margin-left: auto;
782919
margin-right: auto;
783920
}
921+
922+
.flagged-values-section,
923+
.lab-value-item {
924+
max-width: 600px;
925+
margin-left: auto;
926+
margin-right: auto;
927+
}
784928
}
785929
}

‎frontend/src/pages/Reports/components/FlaggedValuesSection.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const FlaggedValuesSection: React.FC<FlaggedValuesSectionProps> = ({
1919
const { t } = useTranslation();
2020

2121
return (
22-
<div className="report-detail-page__section">
22+
<div className="report-detail-page__section flagged-values-section">
2323
<div className="report-detail-page__section-header" onClick={onToggle}>
2424
<div className="report-detail-page__section-icon">
2525
<img src={flaggedValuesIcon} alt="Flagged" />
@@ -32,7 +32,13 @@ const FlaggedValuesSection: React.FC<FlaggedValuesSectionProps> = ({
3232
</div>
3333
</div>
3434

35-
{isExpanded && flaggedValues.map((item, index) => <LabValueItem key={index} item={item} />)}
35+
{isExpanded && (
36+
<div className="flagged-values-content">
37+
{flaggedValues.map((item, index) => (
38+
<LabValueItem key={index} item={item} />
39+
))}
40+
</div>
41+
)}
3642
</div>
3743
);
3844
};

‎frontend/src/pages/Reports/components/LabValueItem.tsx‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { LabValue } from '../../../common/models/medicalReport';
4+
import classNames from 'classnames';
45

56
interface LabValueItemProps {
67
item: LabValue;
@@ -71,39 +72,42 @@ const LabValueItem: React.FC<LabValueItemProps> = ({ item }) => {
7172
};
7273

7374
const statusInfo = getStatusInfo();
75+
const isFlagged = item.status !== 'normal';
76+
const statusClass = item.status.toLowerCase(); // 'high' or 'low'
77+
78+
// Handle potential parenthesis in the name (e.g., "Low Hemoglobin (10.1 g/dL)")
79+
const itemName = item.name;
7480

7581
return (
76-
<div className="report-detail-page__item">
77-
<div
78-
className={`report-detail-page__item-header ${
79-
item.status !== 'normal'
80-
? `report-detail-page__item-header--${item.status.toLowerCase()}`
81-
: ''
82-
}`}
83-
>
84-
<div className="report-detail-page__item-name">{item.name}</div>
85-
{item.status !== 'normal' && (
86-
<div className={`report-detail-page__item-level ${statusInfo.className}`}>
87-
{statusInfo.text}
82+
<div
83+
className={classNames('lab-value-item', { [`lab-value-item--${statusClass}`]: isFlagged })}
84+
>
85+
<div className="lab-value-item__header">
86+
<div className="lab-value-item__name">{itemName}</div>
87+
<div className="lab-value-item__status-value">
88+
{item.status !== 'normal' && (
89+
<div className={`lab-value-item__status ${statusInfo.className}`}>
90+
{statusInfo.text}
91+
</div>
92+
)}
93+
<div className="lab-value-item__value">
94+
{item.value} {item.unit}
8895
</div>
89-
)}
90-
<div className="report-detail-page__item-value">
91-
{item.value} {item.unit}
9296
</div>
9397
</div>
94-
<div className="report-detail-page__item-details">
95-
<div className="report-detail-page__item-section">
98+
<div className="lab-value-item__details">
99+
<div className="lab-value-item__section">
96100
<h4>
97101
{t('report.conclusion.title', { ns: 'reportDetail', defaultValue: 'Conclusion' })}:
98102
</h4>
99103
<p>{item.conclusion}</p>
100104
</div>
101-
<div className="report-detail-page__item-section">
105+
<div className="lab-value-item__section">
102106
<h4>
103107
{t('report.suggestions.title', { ns: 'reportDetail', defaultValue: 'Suggestions' })}:
104108
</h4>
105109
{suggestionItems.length > 0 ? (
106-
<ul className="report-detail-page__item-list">
110+
<ul className="lab-value-item__list">
107111
{suggestionItems.map((suggestion, index) => (
108112
<li key={index}>{suggestion}</li>
109113
))}

‎frontend/src/pages/Reports/components/NormalValuesSection.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const NormalValuesSection: React.FC<NormalValuesSectionProps> = ({
2020
const { t } = useTranslation();
2121

2222
return (
23-
<div className="report-detail-page__section">
23+
<div className="report-detail-page__section normal-values-section">
2424
<div className="report-detail-page__section-header" onClick={onToggle}>
2525
<div
2626
className="report-detail-page__section-icon"
@@ -51,8 +51,11 @@ const NormalValuesSection: React.FC<NormalValuesSectionProps> = ({
5151
)}
5252

5353
{isExpanded &&
54-
normalValues.length > 0 &&
55-
normalValues.map((item, index) => <LabValueItem key={index} item={item} />)}
54+
normalValues.length > 0 && (
55+
<div className="normal-values-content">
56+
{normalValues.map((item, index) => <LabValueItem key={index} item={item} />)}
57+
</div>
58+
)}
5659
</div>
5760
);
5861
};

0 commit comments

Comments
 (0)