Merge pull request #56 from emmap3-do/uiFixes

Minor UI fixes

src/app/components/member/components/member-card/member-card.component.html

@@ -52,9 +52,15 @@
           {{ (createdOn || member.createdOn)?.toDate() | date : 'short' }}
         </span>
       </div>
-      <p
-        class="mt-2 mb-3 leading-5 whitespace-pre-line text-accent-secondary dark:text-accent-secondary-dark truncate-line-3 text-foregrounds-primary dark:text-foregrounds-primary-dark"
-        [ngClass]="fullWidth ? 'text-base' : 'text-xs'"
+      <p #aboutMember 
+        class="mt-2 mb-3 leading-5 whitespace-pre-line text-accent-secondary dark:text-accent-secondary-dark text-foregrounds-primary dark:text-foregrounds-primary-dark"
+        (click)="isAboutExpanded = !isAboutExpanded"
+        [ngClass]="{ 
+          'text-base': fullWidth,
+          'text-xs': !fullWidth,
+          'truncate-line-3': !isAboutExpanded,
+          'cursor-pointer': aboutShowPointer
+        }"
       >
         {{ about !== undefined ? about : member.about }}
       </p>

src/app/components/member/components/member-card/member-card.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/adjacent-overload-signatures */
-import { ChangeDetectionStrategy, Component, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
 import { MemberApi } from '@api/member.api';
 import { DeviceService } from '@core/services/device';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -14,7 +14,7 @@ import { ROUTER_UTILS } from './../../../../@core/utils/router.utils';
   styleUrls: ['./member-card.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MemberCardComponent implements OnDestroy {
+export class MemberCardComponent implements AfterViewInit, OnDestroy {
   @Input() member?: Member;
   @Input() fullWidth?: boolean;
   @Input() allowMobileContent?: boolean;
@@ -28,6 +28,9 @@ export class MemberCardComponent implements OnDestroy {
   public totalVisibleBadges = 6;
   public path = ROUTER_UTILS.config.member.root;
   public isReputationVisible = false;
+  public isAboutExpanded = false;
+  public aboutShowPointer = false;
+  @ViewChild('aboutMember') aboutMemberEleRef?: ElementRef<HTMLElement>;
 
   constructor(private memberApi: MemberApi, public deviceService: DeviceService) {
     // none.
@@ -58,7 +61,18 @@ export class MemberCardComponent implements OnDestroy {
     return FILE_SIZES;
   }
 
+  public ngAfterViewInit(): void {
+    this.aboutPointer();
+  }
+
   public ngOnDestroy(): void {
     this.badges$.next(undefined);
   }
+
+  private aboutPointer(): void {
+    const offset = (this.aboutMemberEleRef?.nativeElement.clientHeight || 0) / 3; // matching css value -webkit-line-clamp
+    this.aboutShowPointer = 
+      (this.aboutMemberEleRef?.nativeElement.scrollHeight || 0) - offset > 
+      (this.aboutMemberEleRef?.nativeElement.clientHeight || 0);
+  }
 }

src/app/pages/nft/pages/nft/nft.page.html

@@ -800,9 +800,9 @@ <h1 class="mb-2 break-words">
   i18n-title
   title="Are you sure you want to withdraw NFT from Soonaverse?"
   i18n-description
-  description="Once the NFT is withdrawn it won’t be available within Soonaverse and it will appear only in your wallet. You can always bring the NFT back to Soonaverse later."
+  description="Once the NFT is withdrawn it won’t be available within Soonaverse and it will appear only in your verified wallet. You can always bring the NFT back to Soonaverse later."
   i18n-confirmLabel
-  confirmLabel="Confirm with Metamask"
+  confirmLabel="Confirm"
 ></wen-confirm-modal>
 
 <nz-modal