Improve style

libs/ui/src/lib/logo/logo.component.html

@@ -1,8 +1,4 @@
 <span class="align-items-center d-flex"
-  ><span
+  ><span class="d-inline-block logo" [ngClass]="{ 'mr-1': showLabel }"></span>
-    class="d-inline-block logo"
-    [ngClass]="{ 'mr-1': showLabel }"
-    [ngStyle]="{ 'background-color': color }"
-  ></span>
   <span *ngIf="showLabel" class="label">{{ label ?? 'Ghostfolio' }}</span></span
 >

libs/ui/src/lib/logo/logo.component.scss

@@ -4,18 +4,12 @@
   }
 
   .logo {
-    background-color: rgba(var(--dark-primary-text));
+    background-color: currentColor;
     margin-top: -2px;
     mask: url('/assets/ghost.svg') no-repeat center;
   }
 }
 
-:host-context(.is-dark-theme) {
-  .logo {
-    background-color: rgba(var(--light-primary-text));
-  }
-}
-
 :host-context(.large) {
   .label {
     font-size: 3rem;

libs/ui/src/lib/logo/logo.component.ts

@@ -13,7 +13,6 @@ import {
 })
 export class LogoComponent {
   @HostBinding('class') @Input() size: 'large' | 'medium' = 'medium';
-  @Input() color: string;
   @Input() label: string;
   @Input() showLabel = true;
 

libs/ui/src/lib/membership-card/membership-card.component.scss

@@ -4,12 +4,14 @@
 
   .card-item {
     aspect-ratio: 1.586;
-    background-color: #343a40 !important;
+    background-color: #ffffff;
     border-radius: 1rem;
-    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+    color: rgba(var(--dark-primary-text));
 
     &.premium {
-      background-color: #1d2124 !important;
+      background-color: #1d2124;
+      color: rgba(var(--light-primary-text));
     }
 
     .card-item-heading {
@@ -17,7 +19,6 @@
     }
 
     .card-item-name {
-      color: rgba(var(--light-primary-text));
       font-size: 18px;
     }
   }