Improving layout

Author: GuidoBR

frontend/src/pages/Reports/ReportDetailPage.scss

@@ -56,8 +56,9 @@
 
     ion-segment-button {
       --color: var(--ion-color-medium);
-      --color-checked: var(--ion-color-primary);
-      --indicator-color: var(--ion-color-primary);
+      --color-checked: white;
+      --background-checked: var(--ion-color-primary);
+      --indicator-color: transparent;
     }
 
     &--ai-insights {
@@ -98,6 +99,7 @@
       text-align: left;
       padding: 0.75rem 0.5rem;
       color: var(--ion-color-medium);
+      background-color: var(--ion-color-light);
       border-bottom: 1px solid var(--ion-color-light-shade);
       font-weight: 600;
     }
@@ -111,23 +113,24 @@
       font-weight: 600;
     }
 
-    .result-range {
-      color: var(--ion-color-medium);
-      font-size: 0.9em;
-    }
-
     tr.out-of-range {
       .result-value {
         color: var(--ion-color-danger);
       }
     }
+
+    .result-range {
+      color: var(--ion-color-medium);
+      font-size: 0.9em;
+    }
   }
 
   .medical-comments {
     background-color: var(--ion-color-light);
     padding: 1rem;
     border-radius: 8px;
-    margin-top: 1rem;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
 
     h3 {
       margin-top: 0;

frontend/src/pages/Reports/ReportDetailPage.tsx

@@ -211,7 +211,9 @@ const ReportDetailPage: React.FC = () => {
                     {bloodTestData.results.map((result, index) => (
                       <tr key={index} className={result.isOutOfRange ? 'out-of-range' : ''}>
                         <td>{result.name}</td>
-                        <td className="result-value">{result.value}</td>
+                        <td className="result-value" style={result.isOutOfRange ? { color: 'var(--ion-color-danger)' } : {}}>
+                          {result.value}
+                        </td>
                         <td className="result-range">{result.range}</td>
                       </tr>
                     ))}