Fix bookmark icon

Author: GuidoBR

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

@@ -28,10 +28,6 @@
     margin-right: 0.5rem;
   }
 
-  &__title-icon {
-    // No margin-right needed since it's handled by the wrapper
-  }
-
   &__title {
     font-size: 1.25rem;
     font-weight: 600;

frontend/src/pages/Reports/ReportsListPage.scss

@@ -9,7 +9,6 @@ import {
   IonLabel,
   IonSegment,
   IonSegmentButton,
-  IonIcon,
   IonButton,
   IonToast,
   IonModal,