Merge pull request #134 from ModusCreateOrg/ADE-200

[ADE-200] Fix icons

Author: adamrefaey

frontend/src/assets/icons/bookmark.svg

@@ -51,21 +51,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: #FFFFFF;
+    border-radius: 50%;
+    transition: background-color 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+    &--active {
+      background-color: #435FF0;
+      height: 34px;
+
+    }
 
     &-icon {
-      width: 15px;
       transition: all 0.2s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      padding: 11px 7px;
-
-      &--active {
-        color: white;
-        background-color: #4765ff;
-        box-shadow: none;
-      }
     }
   }
 

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

@@ -1,14 +1,14 @@
-import { IonIcon } from '@ionic/react';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { MedicalReport, ReportCategory } from 'common/models/medicalReport';
-import { bookmarkOutline } from 'ionicons/icons';
 import './ReportItem.scss';
 
 // Import SVG icons
 import healthIcon from 'assets/icons/health.svg';
 import brainIcon from 'assets/icons/brain.svg';
 import heartIcon from 'assets/icons/heart.svg';
+import bookmarkIcon from 'assets/icons/bookmark.svg';
+import bookmarkFilledIcon from 'assets/icons/bookmark-filled.svg';
 
 interface ReportItemProps {
   report: MedicalReport;
@@ -100,12 +100,14 @@ const ReportItem: React.FC<ReportItemProps> = ({
       </div>
 
       {showBookmarkButton && (
-        <div className="report-item__bookmark" onClick={handleBookmarkClick}>
-          <IonIcon
-            icon={bookmarkOutline}
-            className={`report-item__bookmark-icon ${
-              bookmarked ? 'report-item__bookmark-icon--active' : ''
-            }`}
+        <div
+          className={`report-item__bookmark ${bookmarked ? 'report-item__bookmark--active' : ''}`}
+          onClick={handleBookmarkClick}
+        >
+          <img
+            src={bookmarked ? bookmarkFilledIcon : bookmarkIcon}
+            alt={t('actions.bookmark', { ns: 'common', defaultValue: 'Bookmark' })}
+            className="report-item__bookmark-icon"
           />
         </div>
       )}

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

@@ -17,10 +17,15 @@
     align-items: center;
   }
 
-  &__title-icon {
-    font-size: 1.5rem;
+  &__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #EBECFD;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
     margin-right: 0.5rem;
-    color: var(--ion-color-primary);
   }
 
   &__title {

frontend/src/pages/Reports/ReportsListPage.scss

@@ -9,7 +9,6 @@ import {
   IonLabel,
   IonSegment,
   IonSegmentButton,
-  IonIcon,
   IonButton,
   IonToast,
   IonModal,
@@ -23,9 +22,10 @@ import ReportItem from 'pages/Home/components/ReportItem/ReportItem';
 import NoReportsMessage from 'pages/Home/components/NoReportsMessage/NoReportsMessage';
 import { useState, useMemo, useEffect, useRef } from 'react';
 import { MedicalReport } from 'common/models/medicalReport';
-import { documentTextOutline } from 'ionicons/icons';
 import sortSvg from 'assets/icons/sort.svg';
 import filterOutlineIcon from 'assets/icons/filter-outline.svg';
+import reportsIcon from 'assets/icons/reports.svg';
+import SvgIcon from 'common/components/Icon/SvgIcon';
 import FilterPanel, { CategoryOption } from './components/FilterPanel/FilterPanel';
 import CategoryTag from './components/CategoryTag/CategoryTag';
 import ReportsFilterEmpty from './components/ReportsFilterEmpty/ReportsFilterEmpty';
@@ -262,7 +262,16 @@ const ReportsListPage: React.FC = () => {
             }}
           >
             <div className="reports-list-page__title-container">
-              <IonIcon icon={documentTextOutline} className="reports-list-page__title-icon" />
+              <div className="reports-list-page__icon-wrapper">
+                <SvgIcon
+                  src={reportsIcon}
+                  alt={t('list.icon', { ns: 'report' })}
+                  className="reports-list-page__title-icon"
+                  color="#313E4C"
+                  width={20}
+                  height={20}
+                />
+              </div>
               <h1 className="reports-list-page__title">{t('list.title', { ns: 'report' })}</h1>
             </div>
             <div className="reports-list-page__actions">