From 310bf57b7c6e991104a7ddb21dff56b6248906c4 Mon Sep 17 00:00:00 2001
From: tobikugel <tobiaskugel@outlook.com>
Date: Wed, 5 Mar 2025 21:12:15 -0300
Subject: [PATCH] refactor: adjust layout in layout and adapted skeleton loader

---
 .../app/components/rule/rule.component.scss   |  2 +-
 .../portfolio/x-ray/x-ray-page.component.html | 49 ++++++++++++-------
 .../portfolio/x-ray/x-ray-page.component.scss |  3 +-
 .../portfolio/x-ray/x-ray-page.component.ts   |  2 +-
 4 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/apps/client/src/app/components/rule/rule.component.scss b/apps/client/src/app/components/rule/rule.component.scss
index 54ddce823..adb081abc 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 3eccd02a7..a1e72109e 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,18 +7,28 @@
         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 py-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: '10rem'
+              }"
+            />
+          </div>
         } @else {
-          <span
+          <div
             class="icon-container mr-2 px-2"
             [ngClass]="{
               okay:
@@ -32,23 +42,26 @@
               statistics?.rulesActiveCount === 0 ||
               statistics?.rulesFulfilledCount === 0
             ) {
-              <ion-icon class="text-muted" name="remove-circle-outline" />
+              <ion-icon
+                class="align-middle text-muted"
+                name="remove-circle-outline"
+              />
             } @else if (
               statistics?.rulesFulfilledCount === statistics?.rulesActiveCount
             ) {
-              <ion-icon name="checkmark-circle-outline" />
+              <ion-icon class="align-middle" name="checkmark-circle-outline" />
             } @else {
-              <ion-icon name="warning-outline" />
+              <ion-icon class="align-middle" name="warning-outline" />
             }
-          </span>
-          <span>
-            {{ statistics?.rulesFulfilledCount }}
+          </div>
+          <div>
+            <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>
-          </span>
+          </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 525ba1758..6b5f949b0 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
@@ -2,10 +2,9 @@
   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;
-    vertical-align: middle;
 
     &.okay {
       color: var(--success);
diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts
index 877d0377d..772fdacb6 100644
--- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts
@@ -134,7 +134,7 @@ export class XRayPageComponent {
           rules['regionalMarketClusterRisk']?.filter(({ isActive }) => {
             return isActive;
           }) ?? null;
-
+        debugger;
         this.isLoading = false;
 
         this.changeDetectorRef.markForCheck();