Improve style

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -5,20 +5,20 @@
       @if (isGhostfolioApiKeyValid === false) {
         <mat-card appearance="outlined" class="my-3 special">
           <mat-card-header>
-            <mat-card-title class="align-items-center d-flex" i18n
+            <mat-card-title class="align-items-center d-flex m-0" i18n
               >Ghostfolio Premium
               <gf-premium-indicator
                 class="d-inline-block mx-1"
                 [enableLink]="false"
             /></mat-card-title>
           </mat-card-header>
-          <mat-card-content class="gf-text-wrap-balance" i18n>
+          <mat-card-content class="gf-text-wrap-balance py-3" i18n>
             The <strong>professional data provider</strong> for
             <strong>self-hosters</strong>, offering
             <strong>80’000+ tickers</strong> from over
             <strong>50 exchanges</strong>.
           </mat-card-content>
-          <mat-card-actions class="px-3">
+          <mat-card-actions class="pb-3 pt-0 px-3">
             <a
               class="special"
               href="mailto:hi@ghostfol.io?Subject=Ghostfolio Premium Data Provider&body=Hello,%0D%0DI am interested in the Ghostfolio Premium data provider. Could you please give me access so I can try it for some time?%0D%0DKind regards"

apps/client/src/app/components/admin-settings/admin-settings.component.scss

@@ -17,7 +17,11 @@
   }
 
   .mat-mdc-card {
-    --mdc-outlined-card-outline-color: var(--oc-violet-2);
+    --mdc-outlined-card-container-color: whitesmoke;
+
+    .mat-mdc-card-actions {
+      min-height: 0;
+    }
   }
 
   .mat-mdc-progress-bar {
@@ -32,3 +36,9 @@
     }
   }
 }
+
+:host-context(.theme-dark) {
+  .mat-mdc-card {
+    --mdc-outlined-card-container-color: #222222;
+  }
+}