Merge pull request #2022 from numbersprotocol/feature-profile-tab-grid-rebrand

Feature profile tab grid rebrand

Author: bafu

src/app/features/home/capture-tab/capture-tab.component.html

@@ -27,42 +27,28 @@
 
   <div *ngSwitchCase="'captured'">
     <div class="capture-container" *transloco="let t">
-      <ng-container
-        *ngFor="
-          let group of capturesByDate$
-            | ngrxPush
-            | keyvalue: keyDescendingOrder;
-          first as isFirstGroup;
-          trackBy: trackCaptureGroupByDate
-        "
-      >
-        <div class="mat-title">{{ group.key | date: 'longDate' }}</div>
-        <mat-grid-list cols="3" gutterSize="8px">
-          <mat-grid-tile
-            *ngFor="
-              let proof of group.value;
-              first as isFirstProof;
-              trackBy: trackCaptureItem
-            "
-            class="capture-item"
-            [joyrideStep]="
-              isFirstGroup && isFirstProof
-                ? 'highlightFirstCapture'
-                : 'notFirst'
-            "
-            [title]="t('userGuide.capturedItem')"
-            [text]="t('userGuide.openToSeeDetailsAndMoreActionItems')"
-          >
-            <app-capture-item [proof]="proof"></app-capture-item>
-          </mat-grid-tile>
-        </mat-grid-list>
-      </ng-container>
+      <mat-grid-list cols="2" gutterSize="16px">
+        <mat-grid-tile
+          *ngFor="
+            let proof of captures$ | ngrxPush;
+            first as isFirstProof;
+            trackBy: trackCaptureItem
+          "
+          class="capture-item"
+          [joyrideStep]="isFirstProof ? 'highlightFirstCapture' : 'notFirst'"
+          [title]="t('userGuide.capturedItem')"
+          [text]="t('userGuide.openToSeeDetailsAndMoreActionItems')"
+        >
+          <app-capture-item [proof]="proof"></app-capture-item>
+        </mat-grid-tile>
+      </mat-grid-list>
     </div>
   </div>
 
   <div class="post-captures" *ngSwitchCase="'collected'">
-    <mat-grid-list cols="3" gutterSize="8px">
+    <mat-grid-list cols="2" gutterSize="16px">
       <mat-grid-tile
+        class="capture-item"
         *ngFor="
           let postCapture of postCaptures$ | ngrxPush;
           trackBy: trackPostCapture

src/app/features/home/capture-tab/capture-tab.component.scss

@@ -62,15 +62,14 @@ app-avatar {
 }
 
 .capture-container {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding: 32px 16px;
 }
 
 app-capture-item {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  border-radius: 4px;
+  border-radius: 16px;
 }
 
 .post-captures {
@@ -84,7 +83,7 @@ app-capture-item {
       object-fit: cover;
       object-position: center;
       overflow: hidden;
-      border-radius: 4px;
+      border-radius: 16px;
     }
 
     ion-icon {

src/app/features/home/capture-tab/capture-tab.component.ts

@@ -43,6 +43,10 @@ export class CaptureTabComponent {
     )
   );
 
+  readonly captures$ = this.proofs$.pipe(
+    map(proofs => proofs.sort((a, b) => b.timestamp - a.timestamp))
+  );
+
   readonly networkConnected$ = this.networkService.connected$;
 
   readonly postCaptures$ = this.networkConnected$.pipe(