Add membership card component (#2507)

* Add membership card component

* Update changelog

---------

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Changed the users table in the admin control panel to an `@angular/material` data table
+- Improved the styling of the membership status
 
 ## 2.12.0 - 2023-10-17
 

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,

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/index.ts

@@ -0,0 +1 @@
+export * from './membership-card.module';

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

@@ -0,0 +1,25 @@
+<a
+  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">
+    <gf-logo
+      color="rgba(255, 255, 255, 1)"
+      size="large"
+      [showLabel]="false"
+    ></gf-logo>
+  </div>
+  <div class="d-flex justify-content-between">
+    <div>
+      <div class="card-item-heading mb-1 text-muted" i18n>Membership</div>
+      <div class="card-item-name line-height-1 text-truncate">{{ name }}</div>
+    </div>
+    <div>
+      <div class="card-item-heading mb-1 text-muted" i18n>Valid until</div>
+      <div class="card-item-name line-height-1 text-truncate">
+        {{ expiresAt }}
+      </div>
+    </div>
+  </div>
+</a>

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

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+  max-width: 25rem;
+
+  .card-item {
+    aspect-ratio: 1.586;
+    background-color: #343a40 !important;
+    border-radius: 1rem;
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
+
+    &.premium {
+      background-color: #1d2124 !important;
+    }
+
+    .card-item-heading {
+      font-size: 13px;
+    }
+
+    .card-item-name {
+      color: rgba(var(--light-primary-text));
+      font-size: 18px;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-membership-card',
+  styleUrls: ['./membership-card.component.scss'],
+  templateUrl: './membership-card.component.html'
+})
+export class MembershipCardComponent {
+  @Input() public expiresAt: string;
+  @Input() public name: string;
+
+  public routerLinkPricing = ['/' + $localize`pricing`];
+}

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

@@ -0,0 +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';
+
+@NgModule({
+  declarations: [MembershipCardComponent],
+  exports: [MembershipCardComponent],
+  imports: [CommonModule, GfLogoModule, RouterModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfMembershipCardModule {}