From 8b3bebec4a9ef6962f455ec378bf13eaa1365195 Mon Sep 17 00:00:00 2001
From: tobikugel <tobiaskugel@outlook.com>
Date: Mon, 3 Mar 2025 16:15:21 -0300
Subject: [PATCH] Feature/adapt syle of x-ray rule summary implemented

---
 .../portfolio/x-ray/x-ray-page.component.html | 33 ++++++++++++++++---
 .../portfolio/x-ray/x-ray-page.component.scss | 15 +++++++++
 2 files changed, 44 insertions(+), 4 deletions(-)

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 6ec5722b7..ad801b554 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
@@ -18,10 +18,35 @@
             }"
           />
         } @else {
-          {{ statistics?.rulesFulfilledCount }}
-          <ng-container i18n>out of</ng-container>
-          {{ statistics?.rulesActiveCount }}
-          <ng-container i18n>rules align with your portfolio.</ng-container>
+          <span
+            class="icon-container mr-2 px-2"
+            [ngClass]="{
+              okay:
+                statistics?.rulesFulfilledCount ===
+                statistics?.rulesActiveCount,
+              warn:
+                statistics?.rulesFulfilledCount !== statistics?.rulesActiveCount
+            }"
+          >
+            @if (
+              statistics?.rulesFulfilledCount === statistics?.rulesActiveCount
+            ) {
+              <ion-icon name="checkmark-circle-outline" />
+            } @else if (
+              statistics?.rulesActiveCount === 0 ||
+              statistics?.rulesFulfilledCount === 0
+            ) {
+              <ion-icon class="text-muted" name="remove-circle-outline" />
+            } @else {
+              <ion-icon name="warning-outline" />
+            }
+          </span>
+          <span>
+            {{ statistics?.rulesFulfilledCount }}
+            <ng-container i18n>out of</ng-container>
+            {{ statistics?.rulesActiveCount }}
+            <ng-container i18n>rules align with your portfolio.</ng-container>
+          </span>
         }
       </p>
       <div
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 5d4e87f30..525ba1758 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,18 @@
 :host {
   display: block;
+
+  .icon-container {
+    background-color: rgba(var(--dark-primary-text), 0.05);
+    border-radius: 0.25rem;
+    height: 2rem;
+    vertical-align: middle;
+
+    &.okay {
+      color: var(--success);
+    }
+
+    &.warn {
+      color: var(--danger);
+    }
+  }
 }