Various style improvements

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>
               }
             }

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;