ADE-198 - UI Improvements

backend/cdk.context.json

@@ -1,6 +1,7 @@
 {
   "acknowledged-issue-numbers": [
-    32775
+    32775,
+    31885
   ],
   "availability-zones:account=841162674562:region=us-east-1": [
     "us-east-1a",

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

@@ -12,7 +12,7 @@
   }
 
   &__category-label {
-    font-size: 12px;
+    font-size: 13px;
     color: #4355b9;
     margin-bottom: 4px;
     font-weight: 700;
@@ -38,7 +38,7 @@
   }
 
   &__date {
-    font-size: 12px;
+    font-size: 13px;
     color: #777;
   }
 
@@ -47,19 +47,21 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    align-self: center;
+    margin-right: 6px;
 
     &-icon {
-      font-size: 22px;
+      font-size: 12px;
       color: #aaa;
       transition: all 0.2s ease;
-      width: 1em;
-      height: 1em;
+      width: 12px;
+      height: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: white;
       border-radius: 50%;
-      padding: 8px;
+      padding: 11px;
       box-sizing: content-box;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 
@@ -72,8 +74,8 @@
   }
 
   &__icon {
-    width: 40px;
-    height: 40px;
+    width: 56px;
+    height: 56px;
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -89,8 +91,8 @@
     }
 
     img {
-      width: 24px;
-      height: 24px;
+      width: 28px;
+      height: 28px;
       filter: none; /* Remove previous filter that made the SVG white */
     }
   }

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

@@ -55,8 +55,8 @@ const ReportItem: React.FC<ReportItemProps> = ({
         <img
           src={getCategoryIconSrc(categoryStr)}
           alt={t(getCategoryTranslationKey(), { ns: 'report' })}
-          width="24"
-          height="24"
+          width="28"
+          height="28"
         />
       </div>
     );

frontend/src/pages/Reports/ReportsListPage.scss

@@ -1,11 +1,9 @@
 .reports-list-page {
-  --background: url('../../../assets/Reports_bg.png') no-repeat center center;
-
   &__header {
     box-shadow: none;
 
     ion-toolbar {
-      --border-width: 0;
+      --border-width: 0 !important;
       --min-height: 60px;
       padding: 10px 16px;
       display: flex;
@@ -60,6 +58,37 @@
 
   &__segment-wrapper {
     padding: 0 1rem;
+    margin-top: 4px;
+
+    ion-segment {
+      --background: #EBEEF8;
+      border-radius: 9999px;
+      overflow: hidden;
+      padding: 4px;
+
+      ion-segment-button {
+        --background: #EBEEF8;
+        --background-checked: #FFFFFF;
+        --color: #313E4C;
+        --color-checked: #313E4C;
+        --indicator-color: transparent;
+        --border-radius: 9999px;
+        --border-style: none;
+        font-weight: 500;
+        text-transform: none;
+        min-height: 36px;
+        margin: 0;
+        transition: background-color 0.3s ease;
+
+        &::part(indicator) {
+          display: none;
+        }
+
+        &::part(native) {
+          padding: 6px 16px;
+        }
+      }
+    }
   }
 
   &__category-tags {
@@ -73,7 +102,6 @@
 
   &__content-container {
     --padding-top: 0;
-    --background: var(--ion-background-color);
   }
 
   &__content {

frontend/src/theme/theme-overrides.css

@@ -1,4 +1,4 @@
-/* 
+/*
  * Theme overrides for Ionic
  * This file contains overrides for Ionic's default theme variables
  */
@@ -58,6 +58,11 @@ ion-content {
   --padding-top: var(--ion-safe-area-top, 1rem);
 }
 
+/* Background for the entire app */
+body, ion-app, ion-content {
+  background: url('../../assets/Reports_bg.png') no-repeat center center !important;
+}
+
 /* Remove left padding from router outlet to avoid double padding */
 ion-router-outlet {
   padding-top: 0;