Feature/adapt syle of x-ray rule summary implemented

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

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);
+    }
+  }
 }