Feature/improve membership card (#2517)

* Improve style

* Add animated border

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

@@ -2,40 +2,42 @@
   <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 *ngIf="user?.subscription?.type === 'Basic'">
-            <ng-container
-              *ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
-            >
-              <button color="primary" mat-flat-button (click)="onCheckout()">
-                <ng-container *ngIf="user.subscription.offer === 'default'" i18n
-                  >Upgrade</ng-container
-                >
-                <ng-container *ngIf="user.subscription.offer === 'renewal'" i18n
-                  >Renew</ng-container
-                >
-              </button>
-              <div *ngIf="price" class="mt-1">
-                <ng-container *ngIf="coupon"
-                  ><del class="text-muted"
-                    >{{ baseCurrency }}&nbsp;{{ price }}</del
-                  >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon
-                  }}</ng-container
-                >
-                <ng-container *ngIf="!coupon"
-                  >{{ baseCurrency }}&nbsp;{{ price }}</ng-container
-                >&nbsp;<span i18n>per year</span>
-              </div>
-            </ng-container>
+      <div class="align-items-center d-flex flex-column">
+        <gf-membership-card
+          [expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
+          [name]="user?.subscription?.type"
+        ></gf-membership-card>
+        <div
+          *ngIf="user?.subscription?.type === 'Basic'"
+          class="d-flex flex-column mt-5"
+        >
+          <ng-container
+            *ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
+          >
+            <button color="primary" mat-flat-button (click)="onCheckout()">
+              <ng-container *ngIf="user.subscription.offer === 'default'" i18n
+                >Upgrade</ng-container
+              >
+              <ng-container *ngIf="user.subscription.offer === 'renewal'" i18n
+                >Renew</ng-container
+              >
+            </button>
+            <div *ngIf="price" class="mt-1 text-center">
+              <ng-container *ngIf="coupon"
+                ><del class="text-muted"
+                  >{{ baseCurrency }}&nbsp;{{ price }}</del
+                >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon
+                }}</ng-container
+              >
+              <ng-container *ngIf="!coupon"
+                >{{ baseCurrency }}&nbsp;{{ price }}</ng-container
+              >&nbsp;<span i18n>per year</span>
+            </div>
+          </ng-container>
+          <div class="align-items-center d-flex justfiy-content-center mt-4">
             <a
               *ngIf="!user?.subscription?.expiresAt"
-              class="mr-2 my-2"
+              class="mx-1"
               mat-stroked-button
               [href]="trySubscriptionMail"
               ><span i18n>Try Premium</span>
@@ -46,7 +48,7 @@
             ></a>
             <a
               *ngIf="hasPermissionToUpdateUserSettings"
-              class="mr-2 my-2"
+              class="mx-1"
               i18n
               mat-stroked-button
               [routerLink]=""

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

@@ -1,8 +1,4 @@
 <span class="align-items-center d-flex"
-  ><span
-    class="d-inline-block logo"
-    [ngClass]="{ 'mr-1': showLabel }"
-    [ngStyle]="{ 'background-color': color }"
-  ></span>
+  ><span class="d-inline-block logo" [ngClass]="{ 'mr-1': showLabel }"></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.html

@@ -1,25 +1,29 @@
-<a
-  class="card-item d-flex flex-column justify-content-between p-4"
+<div
+  class="card-container position-relative"
   [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>
+  <a
+    class="card-item d-flex flex-column justify-content-between p-4"
+    [routerLink]="routerLinkPricing"
+  >
+    <div class="d-flex justify-content-end">
+      <gf-logo
+        size="large"
+        [ngClass]="{ 'text-muted': name === 'Basic' }"
+        [showLabel]="false"
+      />
     </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 class="d-flex justify-content-between">
+      <div>
+        <div class="heading text-muted" i18n>Membership</div>
+        <div class="text-truncate value">{{ name }}</div>
+      </div>
+      <div *ngIf="expiresAt">
+        <div class="heading text-muted" i18n>Valid until</div>
+        <div class="text-truncate value">
+          {{ expiresAt }}
+        </div>
       </div>
     </div>
-  </div>
-</a>
+  </a>
+</div>

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

@@ -1,24 +1,66 @@
 :host {
+  --borderRadius: 1rem;
+  --borderWidth: 2px;
+
   display: block;
   max-width: 25rem;
+  padding-top: calc(1 * var(--borderWidth));
+  width: 100%;
 
-  .card-item {
-    aspect-ratio: 1.586;
-    background-color: #343a40 !important;
-    border-radius: 1rem;
-    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
+  .card-container {
+    border-radius: var(--borderRadius);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
 
-    &.premium {
-      background-color: #1d2124 !important;
-    }
+    &:after {
+      animation: animatedborder 7s ease alternate infinite;
+      background: linear-gradient(60deg, #5073b8, #1098ad, #07b39b, #6fba82);
+      background-size: 300% 300%;
+      border-radius: var(--borderRadius);
+      content: '';
+      height: calc(100% + var(--borderWidth) * 2);
+      left: calc(-1 * var(--borderWidth));
+      top: calc(-1 * var(--borderWidth));
+      position: absolute;
+      width: calc(100% + var(--borderWidth) * 2);
+      z-index: -1;
 
-    .card-item-heading {
-      font-size: 13px;
+      @keyframes animatedborder {
+        0% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
+        }
+        100% {
+          background-position: 0% 50%;
+        }
+      }
     }
 
-    .card-item-name {
+    .card-item {
+      aspect-ratio: 1.586;
+      background-color: #1d2124;
+      border-radius: calc(var(--borderRadius) - var(--borderWidth));
       color: rgba(var(--light-primary-text));
-      font-size: 18px;
+
+      .heading {
+        font-size: 13px;
+      }
+
+      .value {
+        font-size: 18px;
+      }
+    }
+
+    &:not(.premium) {
+      &:after {
+        opacity: 0;
+      }
+
+      .card-item {
+        background-color: #ffffff;
+        color: rgba(var(--dark-primary-text));
+      }
     }
   }
 }