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 class="mx-auto">
-          <div *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/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"
 >
+  <a
+    class="card-item d-flex flex-column justify-content-between p-4"
+    [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="card-item-name line-height-1 text-truncate">{{ name }}</div>
+        <div class="heading text-muted" i18n>Membership</div>
+        <div class="text-truncate value">{{ 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">
+      <div *ngIf="expiresAt">
+        <div class="heading text-muted" i18n>Valid until</div>
+        <div class="text-truncate value">
           {{ expiresAt }}
         </div>
       </div>
     </div>
-</a>
+  </a>
+</div>

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

@@ -1,25 +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: #ffffff;
-    border-radius: 1rem;
+  .card-container {
+    border-radius: var(--borderRadius);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
-    color: rgba(var(--dark-primary-text));
 
-    &.premium {
+    &: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;
+
+      @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 {
         font-size: 18px;
       }
     }
+
+    &:not(.premium) {
+      &:after {
+        opacity: 0;
+      }
+
+      .card-item {
+        background-color: #ffffff;
+        color: rgba(var(--dark-primary-text));
+      }
+    }
+  }
 }