From f66edf8de04bcda892ab83b9b458e1d5256853d4 Mon Sep 17 00:00:00 2001 From: Basim Mohammed <107759928+Basimohd@users.noreply.github.com> Date: Fri, 20 Oct 2023 11:48:34 +0530 Subject: [PATCH] Add membership card component (#2507) * Add membership card component * Update changelog --------- Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com> --- CHANGELOG.md | 1 + .../user-account-membership.html | 18 ++++--------- .../user-account-membership.module.ts | 2 ++ libs/ui/src/lib/logo/logo.component.html | 6 ++++- libs/ui/src/lib/logo/logo.component.ts | 1 + libs/ui/src/lib/membership-card/index.ts | 1 + .../membership-card.component.html | 25 +++++++++++++++++++ .../membership-card.component.scss | 24 ++++++++++++++++++ .../membership-card.component.ts | 14 +++++++++++ .../membership-card/membership-card.module.ts | 14 +++++++++++ 10 files changed, 92 insertions(+), 14 deletions(-) create mode 100644 libs/ui/src/lib/membership-card/index.ts create mode 100644 libs/ui/src/lib/membership-card/membership-card.component.html create mode 100644 libs/ui/src/lib/membership-card/membership-card.component.scss create mode 100644 libs/ui/src/lib/membership-card/membership-card.component.ts create mode 100644 libs/ui/src/lib/membership-card/membership-card.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index e3c00bdc..2c7cf1b2 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/components/user-account-membership/user-account-membership.html b/apps/client/src/app/components/user-account-membership/user-account-membership.html index 1681e3e1..191c6318 100644 --- a/apps/client/src/app/components/user-account-membership/user-account-membership.html +++ b/apps/client/src/app/components/user-account-membership/user-account-membership.html @@ -2,21 +2,13 @@

Membership

+
-
- {{ user?.subscription?.type }} - -
-
- Valid until {{ - user?.subscription?.expiresAt | date: defaultDateFormat }} -
+ > {{ label ?? 'Ghostfolio' }} diff --git a/libs/ui/src/lib/logo/logo.component.ts b/libs/ui/src/lib/logo/logo.component.ts index ecb3885d..648e771d 100644 --- a/libs/ui/src/lib/logo/logo.component.ts +++ b/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; diff --git a/libs/ui/src/lib/membership-card/index.ts b/libs/ui/src/lib/membership-card/index.ts new file mode 100644 index 00000000..eccd8c4f --- /dev/null +++ b/libs/ui/src/lib/membership-card/index.ts @@ -0,0 +1 @@ +export * from './membership-card.module'; diff --git a/libs/ui/src/lib/membership-card/membership-card.component.html b/libs/ui/src/lib/membership-card/membership-card.component.html new file mode 100644 index 00000000..048a6b79 --- /dev/null +++ b/libs/ui/src/lib/membership-card/membership-card.component.html @@ -0,0 +1,25 @@ + +
+ +
+
+
+
Membership
+
{{ name }}
+
+
+
Valid until
+
+ {{ expiresAt }} +
+
+
+ diff --git a/libs/ui/src/lib/membership-card/membership-card.component.scss b/libs/ui/src/lib/membership-card/membership-card.component.scss new file mode 100644 index 00000000..e9a83a67 --- /dev/null +++ b/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; + } + } +} diff --git a/libs/ui/src/lib/membership-card/membership-card.component.ts b/libs/ui/src/lib/membership-card/membership-card.component.ts new file mode 100644 index 00000000..0ae760ab --- /dev/null +++ b/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`]; +} diff --git a/libs/ui/src/lib/membership-card/membership-card.module.ts b/libs/ui/src/lib/membership-card/membership-card.module.ts new file mode 100644 index 00000000..4f51cc75 --- /dev/null +++ b/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 {}