From 90f2e8101c7d08781757ad4ee8de919b5960cc61 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 1 Jun 2025 09:50:08 +0200
Subject: [PATCH] Feature/improve style of system message (#4806)

* Improve style of system message

* Update changelog
---
 CHANGELOG.md                           | 1 +
 apps/client/src/app/app.component.html | 2 +-
 apps/client/src/app/app.component.scss | 6 ++++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92a277712..2c5a2771d 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 system message
 - Improved the language localization for German (`de`)
 - Improved the language localization for Turkish (`tr`)
 - Improved the language localization for Ukrainian (`uk`)
diff --git a/apps/client/src/app/app.component.html b/apps/client/src/app/app.component.html
index a04e457ba..9680d0830 100644
--- a/apps/client/src/app/app.component.html
+++ b/apps/client/src/app/app.component.html
@@ -10,7 +10,7 @@
                 (click)="onCreateAccount()"
               >
                 <span i18n>You are using the Live Demo.</span>
-                <span class="a ml-2" i18n>Create Account</span>
+                <span class="a ml-2 p-1" i18n>Create Account</span>
               </div></a
             >
           }
diff --git a/apps/client/src/app/app.component.scss b/apps/client/src/app/app.component.scss
index 241d3331e..f848fe6ff 100644
--- a/apps/client/src/app/app.component.scss
+++ b/apps/client/src/app/app.component.scss
@@ -15,12 +15,14 @@
           z-index: 999;
 
           .info-message {
-            color: rgba(var(--palette-foreground-text), 1);
+            color: rgba(var(--light-primary-text));
             font-size: 80%;
+            font-weight: 500;
             max-width: 100%;
 
             .a {
-              font-weight: 500;
+              border: 1px solid rgba(var(--light-primary-text));
+              border-radius: 0.25rem;
             }
           }
         }