Fixed the comments and Formatted the code

apps/client/src/app/pages/about/overview/about-overview-page.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
-import { GFMembershipCardModule } from '@ghostfolio/ui/membership-card';
+import { GfMembershipCardModule } from '@ghostfolio/ui/membership-card';
 
 import { AboutOverviewPageRoutingModule } from './about-overview-page-routing.module';
 import { AboutOverviewPageComponent } from './about-overview-page.component';
@@ -12,7 +12,7 @@ import { AboutOverviewPageComponent } from './about-overview-page.component';
   imports: [
     AboutOverviewPageRoutingModule,
     CommonModule,
-    GFMembershipCardModule,
+    GfMembershipCardModule,
     MatButtonModule,
     RouterModule
   ],

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

@@ -1,17 +1,19 @@
 <div
-  class="d-flex flex-column justify-content-between px-3 py-4 bg-dark card-item"
+  class="card-item d-flex flex-column justify-content-between px-3 py-4 bg-dark mx-auto"
 >
   <div class="d-flex justify-content-end mr-2">
-    <gf-logo></gf-logo>
+    <gf-logo [showLabel]="false"></gf-logo>
   </div>
   <div class="d-flex justify-content-between">
     <div class="px-3">
-      <p class="card-item-heading">Card Holder</p>
+      <p class="card-item-heading" i18n>Card Holder</p>
-      <p class="card-item-name">{{ name }}</p>
+      <p class="card-item-name line-height-1 text-truncate">{{ name }}</p>
     </div>
     <div class="px-3">
-      <p class="card-item-heading">Expires</p>
+      <p class="card-item-heading" i18n>Expires</p>
-      <p class="card-item-name">{{ expiresAt | date: 'MM/yy' }}</p>
+      <p class="card-item-name line-height-1 text-truncate">
+        {{ expiresAt | date: 'MM/yy' }}
+      </p>
     </div>
   </div>
 </div>

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

@@ -4,23 +4,20 @@
   .card-item {
     max-width: 430px;
     height: 270px;
-    margin-left: auto;
-    margin-right: auto;
     border-radius: 15px;
-  }
+
-  .card-item-heading {
+    .card-item-heading {
-    opacity: 0.7;
+      opacity: 0.7;
-    font-size: 13px;
+      font-size: 13px;
-    margin-bottom: 5px;
+      margin-bottom: 5px;
-  }
+    }
-  .card-item-name {
+
-    font-size: 18px;
+    .card-item-name {
-    line-height: 1;
+      font-size: 18px;
-    white-space: nowrap;
+      white-space: nowrap;
-    max-width: 100%;
+      max-width: 100%;
-    overflow: hidden;
+      text-transform: uppercase;
-    text-overflow: ellipsis;
+      margin-bottom: 3px;
-    text-transform: uppercase;
+    }
-    margin-bottom: 3px;
   }
 }

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

@@ -10,4 +10,4 @@ import { GfLogoModule } from '@ghostfolio/ui/logo';
   imports: [CommonModule, GfLogoModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class GFMembershipCardModule {}
+export class GfMembershipCardModule {}