From ff73e7e0ee364701501d0198e995ff2b9f3e46b8 Mon Sep 17 00:00:00 2001
From: Tobias Kugel <78074722+tobikugel@users.noreply.github.com>
Date: Fri, 7 Mar 2025 17:34:29 -0300
Subject: [PATCH] Feature/adapt style of X-ray rule to summary (#4394)

* Adapt style of X-ray rule to summary

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../app/components/rule/rule.component.scss   |  2 +-
 .../portfolio/x-ray/x-ray-page.component.html | 63 ++++++++++++++-----
 .../portfolio/x-ray/x-ray-page.component.scss | 14 +++++
 4 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 45af8de6..5c9bda69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the style of the summary on the _X-ray_ page
 - Improved the language localization for German (`de`)
 
 ## 2.144.0 - 2025-03-06
diff --git a/apps/client/src/app/components/rule/rule.component.scss b/apps/client/src/app/components/rule/rule.component.scss
index 54ddce82..adb081ab 100644
--- a/apps/client/src/app/components/rule/rule.component.scss
+++ b/apps/client/src/app/components/rule/rule.component.scss
@@ -2,7 +2,7 @@
   display: block;
 
   .icon-container {
-    background-color: rgba(var(--dark-primary-text), 0.05);
+    background-color: rgba(var(--palette-foreground-base), 0.02);
     border-radius: 0.25rem;
     height: 2rem;
 
diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html
index 6ec5722b..24ca0f47 100644
--- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html
+++ b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html
@@ -7,23 +7,58 @@
         risks in your portfolio. Adjust the rules below and set custom
         thresholds to align with your personal investment strategy.
       </p>
-      <p class="mb-4">
+      <div class="d-flex pb-3">
         @if (isLoading) {
-          <ngx-skeleton-loader
-            animation="pulse"
-            class="w-100"
-            [theme]="{
-              height: '1rem',
-              width: '100%'
-            }"
-          />
+          <div class="d-flex">
+            <ngx-skeleton-loader
+              animation="pulse"
+              class="mr-2"
+              [theme]="{
+                height: '2rem',
+                width: '2rem'
+              }"
+            />
+            <ngx-skeleton-loader
+              animation="pulse"
+              class="mt-2 mb-1"
+              [theme]="{
+                height: '1rem',
+                width: '15rem'
+              }"
+            />
+          </div>
         } @else {
-          {{ statistics?.rulesFulfilledCount }}
-          <ng-container i18n>out of</ng-container>
-          {{ statistics?.rulesActiveCount }}
-          <ng-container i18n>rules align with your portfolio.</ng-container>
+          <div
+            class="align-items-center d-flex icon-container mr-2 px-2"
+            [ngClass]="{
+              okay:
+                statistics?.rulesFulfilledCount ===
+                statistics?.rulesActiveCount,
+              warn:
+                statistics?.rulesFulfilledCount !== statistics?.rulesActiveCount
+            }"
+          >
+            @if (
+              statistics?.rulesActiveCount === 0 ||
+              statistics?.rulesFulfilledCount === 0
+            ) {
+              <ion-icon class="text-muted" name="remove-circle-outline" />
+            } @else if (
+              statistics?.rulesFulfilledCount === statistics?.rulesActiveCount
+            ) {
+              <ion-icon name="checkmark-circle-outline" />
+            } @else {
+              <ion-icon name="warning-outline" />
+            }
+          </div>
+          <div class="d-flex align-items-center">
+            <ng-container>{{ statistics?.rulesFulfilledCount }} </ng-container>
+            <ng-container i18n>out of</ng-container>
+            {{ statistics?.rulesActiveCount }}
+            <ng-container i18n>rules align with your portfolio.</ng-container>
+          </div>
         }
-      </p>
+      </div>
       <div
         class="mb-4"
         [ngClass]="{
diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.scss b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.scss
index 5d4e87f3..6b5f949b 100644
--- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.scss
+++ b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.scss
@@ -1,3 +1,17 @@
 :host {
   display: block;
+
+  .icon-container {
+    background-color: rgba(var(--palette-foreground-base), 0.02);
+    border-radius: 0.25rem;
+    height: 2rem;
+
+    &.okay {
+      color: var(--success);
+    }
+
+    &.warn {
+      color: var(--danger);
+    }
+  }
 }