Background

Author: GuidoBR

frontend/assets/Reports_bg.png renamed to frontend/src/assets/Reports_bg.png

@@ -1,6 +1,4 @@
 .home-page {
-  background: url('../../../assets/Reports_bg.png') no-repeat center center;
-  background-color: var(--ion-color-light);
   min-height: 100%;
 
   &__greeting {
@@ -19,7 +17,7 @@
     }
 
     &-title {
-      font-family: 'Merriweather', serif;
+      font-family: Merriweather, serif;
       font-size: 1rem;
       color: var(--ion-color-medium);
       margin: 0 0 0.25rem;
@@ -41,19 +39,21 @@
       width: 4rem;
       height: 4rem;
       border: 3px solid white;
-      box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
+      box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 10%);
     }
   }
 
   &__ai-card {
     margin-bottom: 1.5rem;
     border-radius: 1rem;
-    box-shadow: 0 0.25rem 1rem rgba(71, 101, 255, 0.1);
+    box-shadow: 0 0.25rem 1rem rgb(71 101 255 / 10%);
     background-color: #4765ff;
     overflow: visible;
     position: relative;
+
     --ion-card-margin-start: 0;
     --ion-card-margin-end: 0;
+
     margin-inline: 0;
     height: 7.5rem;
 
@@ -187,7 +187,6 @@
       max-width: 100%;
       height: auto;
       display: block;
-      vertical-align: bottom;
       margin-bottom: 0;
     }
   }
@@ -217,12 +216,15 @@
     &-list {
       margin-bottom: 1rem;
       background: transparent;
+      box-shadow: none;
 
       ion-item {
         --background: white;
-        --border-color: rgba(0, 0, 0, 0.05);
+        --border-color: rgb(0 0 0 / 5%);
+
         margin-bottom: 0.5rem;
         border-radius: 0.75rem;
+
         --padding-start: 1rem;
         --padding-end: 1rem;
 
@@ -233,12 +235,6 @@
     }
   }
 
-  &__reports-list {
-    margin-bottom: 2rem;
-    box-shadow: none;
-    background: transparent;
-  }
-
   &__empty-state {
     display: flex;
     justify-content: center;

frontend/src/pages/Home/HomePage.scss

@@ -1,13 +1,8 @@
 .report-detail-page {
   --padding-horizontal: 16px;
-  --page-background: radial-gradient(
-    circle,
-    rgb(250 250 255 / 83%) 0%,
-    rgb(249 252 255 / 100%) 100%
-  );
 
   ion-content {
-    --background: var(--page-background);
+    /* Removing custom background to use global background */
   }
 
   &__header {

frontend/src/pages/Reports/ReportDetailPage.scss

@@ -59,13 +59,31 @@
 /* Global safe area padding for all pages */
 ion-content {
   --padding-top: var(--ion-safe-area-top, 1rem);
+  --background: transparent !important;
 }
 
 /* Background for the entire app */
 body,
 ion-app,
 ion-content {
-  background: url('../../assets/Reports_bg.png') no-repeat center center !important;
+  background: url('../assets/Reports_bg.png') no-repeat center center fixed !important;
+  background-size: cover !important;
+}
+
+/* Ensure background is applied to specific pages */
+.home-page,
+.report-detail-page,
+.reports-list-page {
+  background: transparent !important;
+}
+
+.report-detail-page ion-content {
+  --background: transparent !important;
+}
+
+/* Override any other page-specific backgrounds */
+ion-content::part(background) {
+  background: transparent !important;
 }
 
 /* Remove left padding from router outlet to avoid double padding */