From 9757df859fa43331d034f517b4c62c303d25f738 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 1 Jun 2025 09:01:23 +0200
Subject: [PATCH] Feature/improve data providers management style of admin
 control panel (#4804)

* Various style improvements
---
 .../admin-settings/admin-settings.component.html    |  7 +++----
 .../admin-settings/admin-settings.component.scss    | 13 +++++++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.html b/apps/client/src/app/components/admin-settings/admin-settings.component.html
index 2dcdefdd0..2d577d582 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.component.html
+++ b/apps/client/src/app/components/admin-settings/admin-settings.component.html
@@ -23,7 +23,7 @@
                       [enableLink]="false"
                     />
                     @if (isGhostfolioApiKeyValid === false) {
-                      <span class="badge badge-warning ml-2" i18n
+                      <span class="badge badge-light early-access ml-2" i18n
                         >Early Access</span
                       >
                     }
@@ -105,12 +105,11 @@
                 </mat-menu>
               } @else if (isGhostfolioApiKeyValid === false) {
                 <button
-                  color="accent"
+                  class="special"
                   mat-flat-button
                   (click)="onSetGhostfolioApiKey()"
                 >
-                  <ion-icon class="mr-1" name="key-outline" />
-                  <span i18n>Set API key</span>
+                  <ng-container i18n>Set API key</ng-container>
                 </button>
               }
             }
diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.scss b/apps/client/src/app/components/admin-settings/admin-settings.component.scss
index c08ba95bc..384143300 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.component.scss
+++ b/apps/client/src/app/components/admin-settings/admin-settings.component.scss
@@ -1,6 +1,19 @@
 :host {
   display: block;
 
+  button {
+    &.special {
+      background: linear-gradient(45deg, rgb(228, 94, 237), rgb(104, 94, 237));
+      color: #fff;
+    }
+  }
+
+  .badge {
+    &.early-access {
+      border: 1px solid var(--mat-table-row-item-outline-color);
+    }
+  }
+
   .mat-mdc-progress-bar {
     --mdc-linear-progress-active-indicator-height: 0.5rem;
     --mdc-linear-progress-track-height: 0.5rem;