Feature/improve membership card (#2517)

* Improve style

* Add animated border

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

@@ -2,14 +2,15 @@
   <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Membership</h1>
   <div class="row">
     <div class="col">
+      <div class="align-items-center d-flex flex-column">
         <gf-membership-card
-        class="mb-5 mx-auto"
+          [expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
-        [expiresAt]="(user?.subscription?.expiresAt | date: defaultDateFormat) ?? '∞'"
           [name]="user?.subscription?.type"
         ></gf-membership-card>
-      <div class="d-flex">
+        <div
-        <div class="mx-auto">
+          *ngIf="user?.subscription?.type === 'Basic'"
-          <div *ngIf="user?.subscription?.type === 'Basic'">
+          class="d-flex flex-column mt-5"
+        >
           <ng-container
             *ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
           >
@@ -21,7 +22,7 @@
                 >Renew</ng-container
               >
             </button>
-              <div *ngIf="price" class="mt-1">
+            <div *ngIf="price" class="mt-1 text-center">
               <ng-container *ngIf="coupon"
                 ><del class="text-muted"
                   >{{ baseCurrency }}&nbsp;{{ price }}</del
@@ -33,9 +34,10 @@
               >&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
+  ><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.html

@@ -1,25 +1,29 @@
+<div
+  class="card-container position-relative"
+  [ngClass]="{ premium: name === 'Premium' }"
+>
   <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"
+        [ngClass]="{ 'text-muted': name === 'Basic' }"
         [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="heading text-muted" i18n>Membership</div>
-      <div class="card-item-name line-height-1 text-truncate">{{ name }}</div>
+        <div class="text-truncate value">{{ name }}</div>
       </div>
-    <div>
+      <div *ngIf="expiresAt">
-      <div class="card-item-heading mb-1 text-muted" i18n>Valid until</div>
+        <div class="heading text-muted" i18n>Valid until</div>
-      <div class="card-item-name line-height-1 text-truncate">
+        <div class="text-truncate value">
           {{ expiresAt }}
         </div>
       </div>
     </div>
   </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 {
+  .card-container {
-    aspect-ratio: 1.586;
+    border-radius: var(--borderRadius);
-    background-color: #343a40 !important;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
-    border-radius: 1rem;
-    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
 
-    &.premium {
+    &:after {
-      background-color: #1d2124 !important;
+      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;
+
+      @keyframes animatedborder {
+        0% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
         }
+        100% {
+          background-position: 0% 50%;
+        }
+      }
+    }
+
+    .card-item {
+      aspect-ratio: 1.586;
+      background-color: #1d2124;
+      border-radius: calc(var(--borderRadius) - var(--borderWidth));
+      color: rgba(var(--light-primary-text));
 
-    .card-item-heading {
+      .heading {
         font-size: 13px;
       }
 
-    .card-item-name {
+      .value {
-      color: rgba(var(--light-primary-text));
         font-size: 18px;
       }
     }
+
+    &:not(.premium) {
+      &:after {
+        opacity: 0;
+      }
+
+      .card-item {
+        background-color: #ffffff;
+        color: rgba(var(--dark-primary-text));
+      }
+    }
+  }
 }