Skip to content

[ADE-203] UI fixes #140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GuidoBR merged 4 commits into from
May 1, 2025
Merged

[ADE-203] UI fixes #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
665453c
Update styles for results cells and enhance null safety for medical c…
adamrefaey May 1, 2025
366c281
Update empty state message and remove background color from empty sec…
adamrefaey May 1, 2025
26ef397
Add missing horizontal rule in ReportHeader component
adamrefaey May 1, 2025
7e546fc
Refactor styles in ProcessingPage component for improved layout and r…
adamrefaey May 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/common/utils/i18n/resources/en/reportDetail.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
33 changes: 19 additions & 14 deletions frontend/src/pages/Processing/ProcessingPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
border-radius: 32px;
height: 100%;
margin: 0;
padding: 24px;
padding: 20px;
display: flex;
flex-direction: column;
position: relative;
Expand All @@ -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
Expand All @@ -42,7 +43,7 @@
&__subtitle {
font-size: 20px;
color: #9ba1ab;
margin: 0 0 5px 0;
margin: 0 0 5px;
font-weight: 400;
}

Expand All @@ -64,6 +65,7 @@
width: 230px;
height: 230px;
animation: pulse 2s infinite ease-in-out;
margin: auto;
}

// Error component styling - final adjustments
Expand All @@ -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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand Down
9 changes: 6 additions & 3 deletions frontend/src/pages/Reports/ReportDetailPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@

&__section-empty {
padding: 24px 16px 32px;
background-color: #fff;
}

&__section-empty-content {
Expand Down Expand Up @@ -554,10 +553,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 {
Expand All @@ -579,11 +579,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
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/Reports/components/OriginalReportTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const OriginalReportTab: React.FC<OriginalReportTabProps> = ({ reportData }) =>
</div>

{/* Medical Comments Section */}
{reportData.medicalComments.length > 0 && (
{reportData.medicalComments?.length > 0 && (
<div className="report-detail-page__comments-section">
<h4 className="report-detail-page__comments-title">Medical Comments:</h4>
<div className="report-detail-page__comments-text">{reportData.medicalComments}</div>
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/pages/Reports/components/ReportHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ const ReportHeader: React.FC<ReportHeaderProps> = ({ reportData, onClose }) => {
</button>
</div>

<hr style={{ backgroundColor: '#D7DBEC', height: '1px', width: '100%', marginTop: '25px' }} />

{/* Category & Title */}
<div className="report-detail-page__category-wrapper">
<span className="report-detail-page__category">
Expand Down