From 665453cf1369ff726d4cf63c43d0f130eb2e0c56 Mon Sep 17 00:00:00 2001 From: Adam Refaey Date: Thu, 1 May 2025 19:40:24 +0300 Subject: [PATCH 1/4] Update styles for results cells and enhance null safety for medical comments --- frontend/src/pages/Reports/ReportDetailPage.scss | 8 ++++++-- .../src/pages/Reports/components/OriginalReportTab.tsx | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Reports/ReportDetailPage.scss b/frontend/src/pages/Reports/ReportDetailPage.scss index b13900a..14eb719 100644 --- a/frontend/src/pages/Reports/ReportDetailPage.scss +++ b/frontend/src/pages/Reports/ReportDetailPage.scss @@ -554,10 +554,11 @@ &__results-cell--test { flex: 2; font-size: 12px; - min-width: 160px; + min-width: 40px; overflow-wrap: break-word; white-space: normal; // Allow text to wrap word-break: break-word; // Ensure long words break + line-height: 1.4em; } &__results-cell--value { @@ -579,11 +580,14 @@ white-space: normal; // Allow text to wrap word-break: break-word; // Ensure long words break overflow-wrap: break-word; + line-height: 1.4em; + margin-left: 6px; + margin-top: 4px; + margin-bottom: 4px; } &__results-cell-header--test { flex: 2; - min-width: 160px; overflow-wrap: break-word; white-space: normal; // Allow text to wrap word-break: break-word; // Ensure long words break diff --git a/frontend/src/pages/Reports/components/OriginalReportTab.tsx b/frontend/src/pages/Reports/components/OriginalReportTab.tsx index b6e18a2..6850e1e 100644 --- a/frontend/src/pages/Reports/components/OriginalReportTab.tsx +++ b/frontend/src/pages/Reports/components/OriginalReportTab.tsx @@ -77,7 +77,7 @@ const OriginalReportTab: React.FC = ({ reportData }) => {/* Medical Comments Section */} - {reportData.medicalComments.length > 0 && ( + {reportData.medicalComments?.length > 0 && (

Medical Comments:

{reportData.medicalComments}
From 366c28121046ac1f6ef1d7aef04eeca248e93f82 Mon Sep 17 00:00:00 2001 From: Adam Refaey Date: Thu, 1 May 2025 19:55:20 +0300 Subject: [PATCH 2/4] Update empty state message and remove background color from empty section --- frontend/src/common/utils/i18n/resources/en/reportDetail.json | 2 +- frontend/src/pages/Reports/ReportDetailPage.scss | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/common/utils/i18n/resources/en/reportDetail.json b/frontend/src/common/utils/i18n/resources/en/reportDetail.json index 04d559e..158aacf 100644 --- a/frontend/src/common/utils/i18n/resources/en/reportDetail.json +++ b/frontend/src/common/utils/i18n/resources/en/reportDetail.json @@ -67,7 +67,7 @@ }, "normal-values": { "title": "Normal values", - "empty": "No values available.", + "empty": "No values to display", "empty-description": "No normal values within the normal range were detected." }, "conclusion": { diff --git a/frontend/src/pages/Reports/ReportDetailPage.scss b/frontend/src/pages/Reports/ReportDetailPage.scss index 14eb719..422fa3a 100644 --- a/frontend/src/pages/Reports/ReportDetailPage.scss +++ b/frontend/src/pages/Reports/ReportDetailPage.scss @@ -193,7 +193,6 @@ &__section-empty { padding: 24px 16px 32px; - background-color: #fff; } &__section-empty-content { From 26ef397cfe979710091453e43fd80a64598811e3 Mon Sep 17 00:00:00 2001 From: Adam Refaey Date: Thu, 1 May 2025 20:40:20 +0300 Subject: [PATCH 3/4] Add missing horizontal rule in ReportHeader component --- frontend/src/pages/Reports/components/ReportHeader.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/pages/Reports/components/ReportHeader.tsx b/frontend/src/pages/Reports/components/ReportHeader.tsx index 385d286..79bee5d 100644 --- a/frontend/src/pages/Reports/components/ReportHeader.tsx +++ b/frontend/src/pages/Reports/components/ReportHeader.tsx @@ -22,6 +22,8 @@ const ReportHeader: React.FC = ({ reportData, onClose }) => {
+
+ {/* Category & Title */}
From 7e546fcdf541fba29031334dd09362ba899e8111 Mon Sep 17 00:00:00 2001 From: Adam Refaey Date: Thu, 1 May 2025 21:03:10 +0300 Subject: [PATCH 4/4] Refactor styles in ProcessingPage component for improved layout and readability --- .../src/pages/Processing/ProcessingPage.scss | 33 +++++++++++-------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/frontend/src/pages/Processing/ProcessingPage.scss b/frontend/src/pages/Processing/ProcessingPage.scss index 796c995..28e398a 100644 --- a/frontend/src/pages/Processing/ProcessingPage.scss +++ b/frontend/src/pages/Processing/ProcessingPage.scss @@ -6,7 +6,7 @@ border-radius: 32px; height: 100%; margin: 0; - padding: 24px; + padding: 20px; display: flex; flex-direction: column; position: relative; @@ -24,6 +24,7 @@ // Styles for the Avatar component .ls-avatar { --size: 60px !important; + margin: 0; // This makes sure even round avatars are sized correctly @@ -42,7 +43,7 @@ &__subtitle { font-size: 20px; color: #9ba1ab; - margin: 0 0 5px 0; + margin: 0 0 5px; font-weight: 400; } @@ -64,6 +65,7 @@ width: 230px; height: 230px; animation: pulse 2s infinite ease-in-out; + margin: auto; } // Error component styling - final adjustments @@ -86,24 +88,24 @@ } &__error-header { - margin-bottom: 40px; + margin-bottom: 120px; text-align: left; align-self: flex-start; width: 100%; } &__error-oops { - font-size: 24px; + font-size: 18px; font-weight: 400; color: #8e8e93; margin: 0 0 4px; } &__error-title { - font-size: 34px; - font-weight: 700; + font-size: 26px; + font-weight: 600; margin: 0; - color: #1c1c1e; + color: #313e4c; line-height: 1.2; } @@ -146,19 +148,20 @@ flex-direction: row; gap: 12px; width: 100%; - padding: 0 8px; // Reduced side padding to make buttons wider - max-width: 450px; // Increased max-width from 400px + padding: 0 5px; margin-left: auto; margin-right: auto; - margin-bottom: 8px; // Further reduced from 20px to 8px + margin-bottom: 8px; ion-button { margin: 0; - height: 48px; + height: 54px; + --border-radius: 8px; --border-width: 1px; --padding-top: 0; --padding-bottom: 0; + font-size: 16px; font-weight: 600; text-transform: none; @@ -171,10 +174,10 @@ --color: #4361ee; --border-color: #4361ee; --background: transparent; - --background-hover: rgba(67, 97, 238, 0.1); - --background-activated: rgba(67, 97, 238, 0.2); + --background-hover: rgb(67 97 238 / 10%); + --background-activated: rgb(67 97 238 / 20%); --box-shadow: none; - --ripple-color: rgba(67, 97, 238, 0.1); + --ripple-color: rgb(67 97 238 / 10%); } &__upload-btn { @@ -192,10 +195,12 @@ transform: scale(0.95); opacity: 0.8; } + 50% { transform: scale(1); opacity: 1; } + 100% { transform: scale(0.95); opacity: 0.8;