Refactoring

apps/client/src/app/components/user-account-membership/user-account-membership.html

@@ -2,21 +2,13 @@
   <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Membership</h1>
   <div class="row">
     <div class="col">
+      <gf-membership-card
+        class="mb-5 mx-auto"
+        [expiresAt]="(user?.subscription?.expiresAt | date: defaultDateFormat) ?? '∞'"
+        [name]="user?.subscription?.type"
+      ></gf-membership-card>
       <div class="d-flex">
         <div class="mx-auto">
-          <div class="align-items-center d-flex mb-1">
-            <a [routerLink]="routerLinkPricing"
-              >{{ user?.subscription?.type }}</a
-            >
-            <gf-premium-indicator
-              *ngIf="user?.subscription?.type === 'Premium'"
-              class="ml-1"
-            ></gf-premium-indicator>
-          </div>
-          <div *ngIf="user?.subscription?.type === 'Premium'">
-            <ng-container i18n>Valid until</ng-container> {{
-            user?.subscription?.expiresAt | date: defaultDateFormat }}
-          </div>
           <div *ngIf="user?.subscription?.type === 'Basic'">
             <ng-container
               *ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"

apps/client/src/app/components/user-account-membership/user-account-membership.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
+import { GfMembershipCardModule } from '@ghostfolio/ui/membership-card';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -13,6 +14,7 @@ import { UserAccountMembershipComponent } from './user-account-membership.compon
   exports: [UserAccountMembershipComponent],
   imports: [
     CommonModule,
+    GfMembershipCardModule,
     GfPremiumIndicatorModule,
     GfValueModule,
     MatButtonModule,

apps/client/src/app/pages/about/overview/about-overview-page.html

@@ -155,5 +155,4 @@
       >
     </div>
   </div>
-  <gf-membership-card></gf-membership-card>
 </div>

apps/client/src/app/pages/about/overview/about-overview-page.module.ts

@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
-import { GfMembershipCardModule } from '@ghostfolio/ui/membership-card';
 
 import { AboutOverviewPageRoutingModule } from './about-overview-page-routing.module';
 import { AboutOverviewPageComponent } from './about-overview-page.component';
@@ -12,7 +11,6 @@ import { AboutOverviewPageComponent } from './about-overview-page.component';
   imports: [
     AboutOverviewPageRoutingModule,
     CommonModule,
-    GfMembershipCardModule,
     MatButtonModule,
     RouterModule
   ],

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

@@ -1,4 +1,8 @@
 <span class="align-items-center d-flex"
-  ><span class="d-inline-block logo mr-1"></span>
+  ><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.ts

@@ -13,6 +13,7 @@ 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.html

@@ -1,19 +1,25 @@
-<div
+<a
-  class="card-item d-flex flex-column justify-content-between px-3 py-4 bg-dark mx-auto"
+  class="card-item d-flex flex-column justify-content-between p-4"
+  [ngClass]="{ premium: name === 'Premium' }"
+  [routerLink]="routerLinkPricing"
 >
-  <div class="d-flex justify-content-end mr-2">
+  <div class="d-flex justify-content-end">
-    <gf-logo [showLabel]="false"></gf-logo>
+    <gf-logo
+      color="rgba(255, 255, 255, 1)"
+      size="large"
+      [showLabel]="false"
+    ></gf-logo>
   </div>
   <div class="d-flex justify-content-between">
-    <div class="px-3">
+    <div>
-      <p class="card-item-heading" i18n>Card Holder</p>
+      <div class="card-item-heading mb-1 text-muted" i18n>Membership</div>
-      <p class="card-item-name line-height-1 text-truncate">{{ name }}</p>
+      <div class="card-item-name line-height-1 text-truncate">{{ name }}</div>
     </div>
-    <div class="px-3">
+    <div>
-      <p class="card-item-heading" i18n>Expires</p>
+      <div class="card-item-heading mb-1 text-muted" i18n>Valid until</div>
-      <p class="card-item-name line-height-1 text-truncate">
+      <div class="card-item-name line-height-1 text-truncate">
-        {{ expiresAt | date: 'MM/yy' }}
+        {{ expiresAt }}
-      </p>
+      </div>
     </div>
   </div>
-</div>
+</a>

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

@@ -1,23 +1,24 @@
 :host {
   display: block;
+  max-width: 25rem;
 
   .card-item {
-    max-width: 430px;
+    aspect-ratio: 1.586;
-    height: 270px;
+    background-color: #343a40 !important;
-    border-radius: 15px;
+    border-radius: 1rem;
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
+
+    &.premium {
+      background-color: #1d2124 !important;
+    }
 
     .card-item-heading {
-      opacity: 0.7;
       font-size: 13px;
-      margin-bottom: 5px;
     }
 
     .card-item-name {
+      color: rgba(var(--light-primary-text));
       font-size: 18px;
-      white-space: nowrap;
-      max-width: 100%;
-      text-transform: uppercase;
-      margin-bottom: 3px;
     }
   }
 }

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

@@ -7,6 +7,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   templateUrl: './membership-card.component.html'
 })
 export class MembershipCardComponent {
-  @Input() public expiresAt: Date;
+  @Input() public expiresAt: string;
   @Input() public name: string;
+
+  public routerLinkPricing = ['/' + $localize`pricing`];
 }

libs/ui/src/lib/membership-card/membership-card.module.ts

@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { GfLogoModule } from '@ghostfolio/ui/logo';
 
 import { MembershipCardComponent } from './membership-card.component';
-import { GfLogoModule } from '@ghostfolio/ui/logo';
 
 @NgModule({
   declarations: [MembershipCardComponent],
   exports: [MembershipCardComponent],
-  imports: [CommonModule, GfLogoModule],
+  imports: [CommonModule, GfLogoModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfMembershipCardModule {}