Skip to content

Commit 268d152

Browse files
authored
Merge pull request #134 from ModusCreateOrg/ADE-200
[ADE-200] Fix icons
2 parents 25b0b96 + 5e9937b commit 268d152

File tree

5 files changed

+43
-28
lines changed

5 files changed

+43
-28
lines changed
Lines changed: 3 additions & 2 deletions
Loading

frontend/src/pages/Home/components/ReportItem/ReportItem.scss

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,21 +51,19 @@
5151
display: flex;
5252
align-items: center;
5353
justify-content: center;
54+
background-color: #FFFFFF;
55+
border-radius: 50%;
56+
transition: background-color 0.2s ease;
57+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
58+
59+
&--active {
60+
background-color: #435FF0;
61+
height: 34px;
62+
63+
}
5464

5565
&-icon {
56-
width: 15px;
5766
transition: all 0.2s ease;
58-
display: flex;
59-
align-items: center;
60-
justify-content: center;
61-
border-radius: 50%;
62-
padding: 11px 7px;
63-
64-
&--active {
65-
color: white;
66-
background-color: #4765ff;
67-
box-shadow: none;
68-
}
6967
}
7068
}
7169

frontend/src/pages/Home/components/ReportItem/ReportItem.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { IonIcon } from '@ionic/react';
21
import { format } from 'date-fns';
32
import { useTranslation } from 'react-i18next';
43
import { MedicalReport, ReportCategory } from 'common/models/medicalReport';
5-
import { bookmarkOutline } from 'ionicons/icons';
64
import './ReportItem.scss';
75

86
// Import SVG icons
97
import healthIcon from 'assets/icons/health.svg';
108
import brainIcon from 'assets/icons/brain.svg';
119
import heartIcon from 'assets/icons/heart.svg';
10+
import bookmarkIcon from 'assets/icons/bookmark.svg';
11+
import bookmarkFilledIcon from 'assets/icons/bookmark-filled.svg';
1212

1313
interface ReportItemProps {
1414
report: MedicalReport;
@@ -100,12 +100,14 @@ const ReportItem: React.FC<ReportItemProps> = ({
100100
</div>
101101

102102
{showBookmarkButton && (
103-
<div className="report-item__bookmark" onClick={handleBookmarkClick}>
104-
<IonIcon
105-
icon={bookmarkOutline}
106-
className={`report-item__bookmark-icon ${
107-
bookmarked ? 'report-item__bookmark-icon--active' : ''
108-
}`}
103+
<div
104+
className={`report-item__bookmark ${bookmarked ? 'report-item__bookmark--active' : ''}`}
105+
onClick={handleBookmarkClick}
106+
>
107+
<img
108+
src={bookmarked ? bookmarkFilledIcon : bookmarkIcon}
109+
alt={t('actions.bookmark', { ns: 'common', defaultValue: 'Bookmark' })}
110+
className="report-item__bookmark-icon"
109111
/>
110112
</div>
111113
)}

frontend/src/pages/Reports/ReportsListPage.scss

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,15 @@
1717
align-items: center;
1818
}
1919

20-
&__title-icon {
21-
font-size: 1.5rem;
20+
&__icon-wrapper {
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
background-color: #EBECFD;
25+
border-radius: 50%;
26+
width: 36px;
27+
height: 36px;
2228
margin-right: 0.5rem;
23-
color: var(--ion-color-primary);
2429
}
2530

2631
&__title {

frontend/src/pages/Reports/ReportsListPage.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
IonLabel,
1010
IonSegment,
1111
IonSegmentButton,
12-
IonIcon,
1312
IonButton,
1413
IonToast,
1514
IonModal,
@@ -23,9 +22,10 @@ import ReportItem from 'pages/Home/components/ReportItem/ReportItem';
2322
import NoReportsMessage from 'pages/Home/components/NoReportsMessage/NoReportsMessage';
2423
import { useState, useMemo, useEffect, useRef } from 'react';
2524
import { MedicalReport } from 'common/models/medicalReport';
26-
import { documentTextOutline } from 'ionicons/icons';
2725
import sortSvg from 'assets/icons/sort.svg';
2826
import filterOutlineIcon from 'assets/icons/filter-outline.svg';
27+
import reportsIcon from 'assets/icons/reports.svg';
28+
import SvgIcon from 'common/components/Icon/SvgIcon';
2929
import FilterPanel, { CategoryOption } from './components/FilterPanel/FilterPanel';
3030
import CategoryTag from './components/CategoryTag/CategoryTag';
3131
import ReportsFilterEmpty from './components/ReportsFilterEmpty/ReportsFilterEmpty';
@@ -262,7 +262,16 @@ const ReportsListPage: React.FC = () => {
262262
}}
263263
>
264264
<div className="reports-list-page__title-container">
265-
<IonIcon icon={documentTextOutline} className="reports-list-page__title-icon" />
265+
<div className="reports-list-page__icon-wrapper">
266+
<SvgIcon
267+
src={reportsIcon}
268+
alt={t('list.icon', { ns: 'report' })}
269+
className="reports-list-page__title-icon"
270+
color="#313E4C"
271+
width={20}
272+
height={20}
273+
/>
274+
</div>
266275
<h1 className="reports-list-page__title">{t('list.title', { ns: 'report' })}</h1>
267276
</div>
268277
<div className="reports-list-page__actions">

0 commit comments

Comments
 (0)