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 45af8de6b..5c9bda697 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 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 6ec5722b7..24ca0f474 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 5d4e87f30..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
@@ -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);
+ }
+ }
}