Improving layout

Author: GuidoBR

frontend/src/pages/Reports/ReportDetailPage.scss

@@ -1,17 +1,35 @@
 .report-detail-page {
   --background: var(--ion-color-light);
 
-  ion-toolbar {
-    --background: #fff;
+  &__header {
+    background-color: #fff;
+    border-bottom: 1px solid var(--ion-color-light-shade);
+    padding-bottom: 1rem;
+
+    &--loading {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
-  ion-back-button {
-    --color: var(--ion-color-primary);
+  &__back-button {
+    margin-bottom: 0.5rem;
+
+    ion-back-button {
+      --color: var(--ion-color-primary);
+      --icon-margin-end: 0;
+      --padding-start: 0;
+      --padding-end: 0;
+      display: inline-block;
+    }
   }
 
-  &__header {
-    background-color: #fff;
-    border-bottom: 1px solid var(--ion-color-light-shade);
+  &__title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .report-category {
@@ -24,6 +42,7 @@
     margin: 0;
     font-size: 1.75rem;
     font-weight: 700;
+    flex: 1;
   }
 
   .report-content-card {
@@ -49,6 +68,10 @@
 
   .bookmark-button {
     --color: var(--ion-color-primary);
+    --padding-start: 0;
+    --padding-end: 0;
+    --background: transparent;
+    margin: 0;
 
     &--active {
       --color: var(--ion-color-primary);

frontend/src/pages/Reports/ReportDetailPage.tsx

@@ -1,11 +1,7 @@
 import {
   IonBackButton,
-  IonButtons,
   IonContent,
-  IonHeader,
   IonPage,
-  IonTitle,
-  IonToolbar,
   IonSegment,
   IonSegmentButton,
   IonLabel,
@@ -131,17 +127,14 @@ const ReportDetailPage: React.FC = () => {
   if (!report) {
     return (
       <IonPage className="report-detail-page">
-        <IonHeader>
-          <IonToolbar>
-            <IonButtons slot="start">
-              <IonBackButton defaultHref="/tabs/home" />
-            </IonButtons>
-            <IonTitle>{t('detail.loading')}</IonTitle>
-          </IonToolbar>
-        </IonHeader>
         <IonContent>
-          <div className="ion-padding">
-            <IonText>{t('detail.loading')}</IonText>
+          <div className="report-detail-page__header report-detail-page__header--loading">
+            <div className="ion-padding">
+              <div className="report-detail-page__back-button">
+                <IonBackButton defaultHref="/tabs/home" text="" />
+              </div>
+              <IonText>{t('detail.loading')}</IonText>
+            </div>
           </div>
         </IonContent>
       </IonPage>
@@ -150,27 +143,27 @@ const ReportDetailPage: React.FC = () => {
 
   return (
     <IonPage className="report-detail-page">
-      <IonHeader>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonBackButton defaultHref="/tabs/home" />
-          </IonButtons>
-          <IonTitle>{t('detail.title')}</IonTitle>
-          <IonButtons slot="end">
-            <IonButton
-              className={`bookmark-button ${report.bookmarked ? 'bookmark-button--active' : 'bookmark-button--inactive'}`}
-              onClick={handleBookmarkClick}
-            >
-              <IonIcon slot="icon-only" icon={report.bookmarked ? bookmark : bookmarkOutline} />
-            </IonButton>
-          </IonButtons>
-        </IonToolbar>
-      </IonHeader>
       <IonContent>
         <div className="report-detail-page__header">
           <div className="ion-padding">
+            <div className="report-detail-page__top">
+              <div className="report-detail-page__back-button">
+                <IonBackButton defaultHref="/tabs/home" text="" />
+              </div>
+            </div>
+
             <div className="report-category">{report.category}</div>
-            <h1 className="report-title">{report.title}</h1>
+
+            <div className="report-detail-page__title-row">
+              <h1 className="report-title">{report.title}</h1>
+              <IonButton
+                fill="clear"
+                className={`bookmark-button ${report.bookmarked ? 'bookmark-button--active' : 'bookmark-button--inactive'}`}
+                onClick={handleBookmarkClick}
+              >
+                <IonIcon slot="icon-only" icon={report.bookmarked ? bookmark : bookmarkOutline} />
+              </IonButton>
+            </div>
           </div>
         </div>