From 66edb65251421b2630f8a26e9fac747988b0d32a Mon Sep 17 00:00:00 2001
From: sddivid <sduum82@gmail.com>
Date: Thu, 26 Nov 2020 10:26:48 +0800
Subject: [PATCH] Update UI to follow the Figma design (#255)

- Update components style and color theme #228, #218, #219
- Resize the ratio of images #235
---
 src/app/pages/about/about.page.scss           | 12 +++-
 .../pages/home/activity/activity.page.scss    | 25 ++++++--
 src/app/pages/home/asset/asset.page.html      |  4 --
 src/app/pages/home/asset/asset.page.scss      | 19 +++++-
 .../contact-selection-dialog.component.scss   | 12 +++-
 .../asset/information/information.page.scss   | 12 +++-
 .../sending-post-capture.page.scss            | 11 +++-
 src/app/pages/home/home.page.html             |  7 +--
 src/app/pages/home/home.page.scss             | 39 +++++++++---
 src/app/pages/home/inbox/inbox.page.scss      | 21 +++++--
 src/app/pages/privacy/privacy.page.scss       | 12 +++-
 src/app/pages/profile/profile.page.scss       | 10 ++-
 src/app/pages/settings/settings.page.scss     | 10 ++-
 .../pages/signup/finished/finished.page.scss  | 12 +++-
 .../post-capture-card.component.html          | 12 +++-
 .../post-capture-card.component.scss          | 62 +++++++++++++++++--
 .../post-capture-card.component.ts            |  7 +--
 src/theme/variables.scss                      | 41 ++++++++++++
 18 files changed, 270 insertions(+), 58 deletions(-)

diff --git a/src/app/pages/about/about.page.scss b/src/app/pages/about/about.page.scss
index d12970009..d9b2cd2bd 100644
--- a/src/app/pages/about/about.page.scss
+++ b/src/app/pages/about/about.page.scss
@@ -1,7 +1,13 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
 
   span {
-    margin-right: 40px;
+    color: #ffffff;
+    padding-right: 40px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/pages/home/activity/activity.page.scss b/src/app/pages/home/activity/activity.page.scss
index 6c6d084ff..2233afcf0 100644
--- a/src/app/pages/home/activity/activity.page.scss
+++ b/src/app/pages/home/activity/activity.page.scss
@@ -1,5 +1,15 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
+
+  span {
+    color: #ffffff;
+    padding-right: 40px;
+  }
 }
 
 .page-content {
@@ -14,8 +24,8 @@ mat-toolbar {
 
     img[matListAvatar] {
       border-radius: 4px;
-      width: calc(100vw / 3);
-      height: calc(100vw / 5);
+      width: calc(100vw / 5);
+      height: calc(100vw / 8);
       max-width: 150px;
       max-height: 80px;
     }
@@ -24,7 +34,11 @@ mat-toolbar {
       flex-shrink: 0;
     }
 
-    button.accepted,
+    button.accepted {
+      color: #fff;
+      border-color: #4cd964;
+      background-color: #4cd964;
+    }
     button.delivered {
       color: mediumseagreen;
       border-color: mediumseagreen;
@@ -36,8 +50,9 @@ mat-toolbar {
     }
 
     button.returned {
-      color: var(--ion-color-danger);
+      color: #fff;
       border-color: var(--ion-color-danger);
+      background-color: #e31587;
     }
   }
 }
diff --git a/src/app/pages/home/asset/asset.page.html b/src/app/pages/home/asset/asset.page.html
index d2868d018..ab5c14d26 100644
--- a/src/app/pages/home/asset/asset.page.html
+++ b/src/app/pages/home/asset/asset.page.html
@@ -16,22 +16,18 @@
   <mat-list>
     <mat-list-item>
       <mat-icon mat-list-icon>person</mat-icon>
-      <div mat-line>{{ t('owner') }}</div>
       <div mat-line>{{ (asset$ | async)?.owner }}</div>
     </mat-list-item>
     <mat-list-item>
       <mat-icon mat-list-icon>place</mat-icon>
-      <div mat-line>{{ t('location') }}</div>
       <div mat-line>{{ (latitude$ | async) + ', ' + (longitude$ | async) }}</div>
     </mat-list-item>
     <mat-list-item>
       <mat-icon mat-list-icon>access_time</mat-icon>
-      <div mat-line>{{ t('timestamp') }}</div>
       <div mat-line>{{ timestamp$ | async | date:'long' }}</div>
     </mat-list-item>
     <mat-list-item>
       <mat-icon svgIcon="media-id" mat-list-icon></mat-icon>
-      <div mat-line>{{ t('mediaId') }}</div>
       <div mat-line>{{ (asset$ | async)?.id }}</div>
       <button *ngIf="(asset$ | async)?.id as mediaId" (click)="copyToClipboard(mediaId)" mat-icon-button>
         <mat-icon>content_copy</mat-icon>
diff --git a/src/app/pages/home/asset/asset.page.scss b/src/app/pages/home/asset/asset.page.scss
index 8bcf3bf0f..a8b8ed461 100644
--- a/src/app/pages/home/asset/asset.page.scss
+++ b/src/app/pages/home/asset/asset.page.scss
@@ -1,11 +1,16 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
 
   span {
-    margin-left: 40px;
+    color: #ffffff;
+    padding-right: 40px;
   }
 }
-
 .toolbar-spacer {
   flex: 1 1 auto;
 }
@@ -17,8 +22,16 @@ mat-toolbar {
 button.center {
   display: block;
   margin: 0 auto;
+  position: relative;
+  top: 25%;
+  height: 50px;
 }
 
 .proof-image {
   width: 100%;
 }
+
+.mat-list-base .mat-list-item.mat-list-item-with-avatar {
+  height: 40px;
+  padding: 0 20px;
+}
diff --git a/src/app/pages/home/asset/contact-selection-dialog/contact-selection-dialog.component.scss b/src/app/pages/home/asset/contact-selection-dialog/contact-selection-dialog.component.scss
index ab6b32c47..f4eab3518 100644
--- a/src/app/pages/home/asset/contact-selection-dialog/contact-selection-dialog.component.scss
+++ b/src/app/pages/home/asset/contact-selection-dialog/contact-selection-dialog.component.scss
@@ -1,5 +1,15 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
+
+  span {
+    color: #ffffff;
+    padding-right: 40px;
+  }
 }
 
 .example-header-image {
diff --git a/src/app/pages/home/asset/information/information.page.scss b/src/app/pages/home/asset/information/information.page.scss
index d12970009..d9b2cd2bd 100644
--- a/src/app/pages/home/asset/information/information.page.scss
+++ b/src/app/pages/home/asset/information/information.page.scss
@@ -1,7 +1,13 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
 
   span {
-    margin-right: 40px;
+    color: #ffffff;
+    padding-right: 40px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/pages/home/asset/sending-post-capture/sending-post-capture.page.scss b/src/app/pages/home/asset/sending-post-capture/sending-post-capture.page.scss
index df251181c..57f22c278 100644
--- a/src/app/pages/home/asset/sending-post-capture/sending-post-capture.page.scss
+++ b/src/app/pages/home/asset/sending-post-capture/sending-post-capture.page.scss
@@ -1,11 +1,16 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
 
   span {
-    margin-right: 40px;
+    color: #ffffff;
+    padding-right: 40px;
   }
 }
-
 .page-content {
   padding: 0 16px 16px;
 
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
index 803509253..e5438b4f3 100644
--- a/src/app/pages/home/home.page.html
+++ b/src/app/pages/home/home.page.html
@@ -33,13 +33,13 @@
         <mat-icon>history</mat-icon>
       </button>
       <button routerLink="inbox" mat-icon-button>
-        <mat-icon>inbox</mat-icon>
+        <mat-icon>all_inbox</mat-icon>
       </button>
     </mat-toolbar>
 
     <mat-tab-group (selectedTabChange)="onTapChanged($event)" mat-align-tabs="center">
       <mat-tab label="Capture">
-        <div class="tab-content">
+        <div class="tab-content-capture">
           <ng-container *ngFor="let assetsWithRaw of capturesWithRawByDate$ | async">
             <div class="mat-title">{{ assetsWithRaw[0].date }}</div>
             <mat-grid-list cols="3" gutterSize="8px">
@@ -51,14 +51,13 @@
         </div>
       </mat-tab>
       <mat-tab label="PostCapture">
-        <div class="tab-content">
+        <div class="tab-content-post">
           <app-post-capture-card *ngFor="let postCapture of postCaptures$ | async"
             [transaction]="postCapture.transaction" [asset]="postCapture.asset">
           </app-post-capture-card>
         </div>
       </mat-tab>
     </mat-tab-group>
-
     <button *ngIf="captureButtonShow" (click)="capture()" mat-fab color="primary">
       <mat-icon>camera_alt</mat-icon>
     </button>
diff --git a/src/app/pages/home/home.page.scss b/src/app/pages/home/home.page.scss
index 8d99c3758..c8bd78a35 100644
--- a/src/app/pages/home/home.page.scss
+++ b/src/app/pages/home/home.page.scss
@@ -16,23 +16,47 @@ mat-sidenav-content {
 }
 
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
 
-  .toolbar-spacer {
-    flex: 1 1 auto;
+  span {
+    color: #ffffff;
+    padding-right: 40px;
   }
 }
 
-mat-tab-group {
-  height: 100%;
+.tab-content-capture {
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-bottom: 128px;
+
+  div.mat-title {
+    margin: 26px 0 0 0;
+    font-size: larger;
+  }
+
+  .square-image-tile {
+    border-radius: 4px;
+    background-position: center center;
+    background-size: cover;
+  }
+
+  app-post-capture-card {
+    width: 100%;
+    margin: 8px auto;
+  }
 }
 
-.tab-content {
-  padding: 16px;
+.tab-content-post {
   margin-bottom: 128px;
 
   div.mat-title {
     margin-top: 16px;
+    padding: 16px;
   }
 
   .square-image-tile {
@@ -43,7 +67,6 @@ mat-tab-group {
 
   app-post-capture-card {
     width: 100%;
-    margin: 8px auto;
   }
 }
 
diff --git a/src/app/pages/home/inbox/inbox.page.scss b/src/app/pages/home/inbox/inbox.page.scss
index 555fea2f2..03d942e91 100644
--- a/src/app/pages/home/inbox/inbox.page.scss
+++ b/src/app/pages/home/inbox/inbox.page.scss
@@ -1,8 +1,5 @@
-mat-toolbar {
-  background: white;
-}
-
 .page-content {
+  
   span.nothing-here {
     display: flex;
     width: 100%;
@@ -13,12 +10,12 @@ mat-toolbar {
 
   mat-list-item {
     height: initial;
-
     div[mat-line] {
       margin: 4px 0;
     }
 
     img[matListAvatar] {
+      width: 100%;
       border-radius: 4px;
       width: calc(100vw / 3);
       height: calc(100vw / 3);
@@ -36,3 +33,17 @@ mat-toolbar {
     }
   }
 }
+
+mat-toolbar {
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
+
+  span {
+    color: #ffffff;
+    padding-right: 40px;
+  }
+}
\ No newline at end of file
diff --git a/src/app/pages/privacy/privacy.page.scss b/src/app/pages/privacy/privacy.page.scss
index d12970009..d9b2cd2bd 100644
--- a/src/app/pages/privacy/privacy.page.scss
+++ b/src/app/pages/privacy/privacy.page.scss
@@ -1,7 +1,13 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
 
   span {
-    margin-right: 40px;
+    color: #ffffff;
+    padding-right: 40px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/pages/profile/profile.page.scss b/src/app/pages/profile/profile.page.scss
index 31b7a2a18..152a80a2b 100644
--- a/src/app/pages/profile/profile.page.scss
+++ b/src/app/pages/profile/profile.page.scss
@@ -1,8 +1,14 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
 
   span {
-    margin-right: 40px;
+    color: #ffffff;
+    padding-right: 40px;
   }
 }
 
diff --git a/src/app/pages/settings/settings.page.scss b/src/app/pages/settings/settings.page.scss
index 6569fa255..59367b350 100644
--- a/src/app/pages/settings/settings.page.scss
+++ b/src/app/pages/settings/settings.page.scss
@@ -1,8 +1,14 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
 
   span {
-    margin-right: 40px;
+    color: #ffffff;
+    padding-right: 40px;
   }
 }
 
diff --git a/src/app/pages/signup/finished/finished.page.scss b/src/app/pages/signup/finished/finished.page.scss
index 3029b7547..98e91620b 100644
--- a/src/app/pages/signup/finished/finished.page.scss
+++ b/src/app/pages/signup/finished/finished.page.scss
@@ -1,5 +1,15 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
+
+  span {
+    color: #ffffff;
+    padding-right: 40px;
+  }
 }
 
 .page-content {
diff --git a/src/app/shared/post-capture-card/post-capture-card.component.html b/src/app/shared/post-capture-card/post-capture-card.component.html
index 2d9f1a689..5b75aaff6 100644
--- a/src/app/shared/post-capture-card/post-capture-card.component.html
+++ b/src/app/shared/post-capture-card/post-capture-card.component.html
@@ -5,7 +5,15 @@
     <mat-card-subtitle>{{ asset.uploaded_at | date: 'short' }}</mat-card-subtitle>
     <span class="toolbar-spacer"></span>
   </mat-card-header>
-  <img [src]="asset.asset_file" mat-card-image>
+  <div class="fixed-ratio" [ngStyle]="{
+      'height':
+      ratioImg.offsetHeight === ratioImg.offsetWidth
+          ? '100vw'
+          : ratioImg.offsetHeight > ratioImg.offsetWidth
+            ? 'calc(100vw / 4 * 5)'
+            : 'calc(100vw / 16 * 9)'}">
+    <img #ratioImg id="image" [src]="asset.asset_file" mat-card-image>
+  </div>
   <mat-card-content>
     <mat-list dense class="info-list" [class.info-list-show]="openMore">
       <mat-list-item>
@@ -33,6 +41,6 @@
     <p class="caption-ellipsis mat-body" [class.caption-full]="openMore">{{ transaction.asset.caption }}</p>
   </mat-card-content>
   <mat-card-actions [align]="'end'">
-    <button (click)="openMore = !openMore" mat-button>{{ t('viewAll') + '...' }}</button>
+    <button class="all-btn" (click)="openMore = !openMore">{{ t('viewAll') + '...' }}</button>
   </mat-card-actions>
 </mat-card>
\ No newline at end of file
diff --git a/src/app/shared/post-capture-card/post-capture-card.component.scss b/src/app/shared/post-capture-card/post-capture-card.component.scss
index 5f21b5551..8fa1a1484 100644
--- a/src/app/shared/post-capture-card/post-capture-card.component.scss
+++ b/src/app/shared/post-capture-card/post-capture-card.component.scss
@@ -6,12 +6,54 @@
   flex: 1 1 auto;
 }
 
+mat-icon {
+  color: #000;
+}
+
+mat-card {
+  padding-right: 0;
+  padding-left: 0;
+  width: 100%;
+}
+
+mat-card .fixed-ratio {
+  background-color: #564dfc;
+  max-width: 100vw;
+  width: 100vw;
+  height: 100vw;
+  overflow: hidden;
+}
+
 mat-card img {
-  max-width: initial;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+mat-card-header {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+mat-card-actions {
+  padding-right: 16px;
+  padding-left: 16px;
 }
 
 mat-card-content {
   margin-bottom: 0;
+  padding-right: 16px;
+  padding-left: 0;
+}
+
+mat-card-title {
+  font-size: 16px;
+  padding-left: 0;
+  padding-right: 16px;
+}
+
+.mat-card-title {
+  font-size: 16px;
 }
 
 .post-capture-avatar {
@@ -23,6 +65,8 @@ mat-card-content {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  padding-left: 16px;
+
 }
 
 .caption-full {
@@ -34,20 +78,28 @@ mat-card-content {
 
 .info-list[dense] {
   display: none;
-
   .info-list-content {
-    width: 60%;
+    width: 80%;
     float: right;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
   }
-
   mat-list-item {
-    height: 32px;
+    height: 28px;
   }
 }
 
 .info-list-show[dense] {
   display: block;
 }
+
+.all-btn {
+  align-items: center;
+  padding: 0 30px;
+  height: 24px;
+  border: 1px solid #564dfc;
+  background-color: #fff;
+  box-sizing: border-box;
+  border-radius: 13px;
+}
diff --git a/src/app/shared/post-capture-card/post-capture-card.component.ts b/src/app/shared/post-capture-card/post-capture-card.component.ts
index 0648af5bb..598d1620f 100644
--- a/src/app/shared/post-capture-card/post-capture-card.component.ts
+++ b/src/app/shared/post-capture-card/post-capture-card.component.ts
@@ -1,7 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { Asset } from 'src/app/services/publisher/numbers-storage/data/asset/asset';
 import { Transaction } from 'src/app/services/publisher/numbers-storage/numbers-storage-api.service';
-
 @Component({
   selector: 'app-post-capture-card',
   templateUrl: './post-capture-card.component.html',
@@ -11,10 +10,10 @@ export class PostCaptureCardComponent implements OnInit {
 
   @Input() transaction!: Transaction;
   @Input() asset!: Asset;
-
+  @ViewChild('ratioImg')
+  ratioImg!: ElementRef;
   latitude!: string;
   longitude!: string;
-
   openMore = false;
 
   ngOnInit() {
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 30ca2afaa..c2f7d599e 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -8,6 +8,39 @@
 // Be sure that you only ever include this mixin once!
 @include mat-core();
 
+.mat-toolbar {
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
+
+  span {
+    color: #ffffff;
+    padding-right: 40px;
+  }
+}
+
+.mat-tab-labels {
+  background: #564dfc;
+
+  .mat-tab-label-content {
+    color: #ffffff;
+  }
+
+  .mat-icon {
+    color: #ffffff;
+    background-color: #ffffff;
+  }
+}
+
+.mat-sidenav-content {
+  button .mat-icon {
+    color: #ffffff;
+  }
+}
+
 $capture-primary: (
   50: #ece6fe,
   100: #ccc1fc,
@@ -105,6 +138,14 @@ $app-theme: mat-light-theme(
 
 /** Ionic CSS Variables **/
 :root {
+  /**  capture **/
+  --ion-color-capture: #564dfc;
+  --ion-color-capture-rgb: 63, 81, 181;
+  --ion-color-capture-contrast: #ffffff;
+  --ion-color-capture-contrast-rgb: 255, 255, 255;
+  --ion-color-capture-shade: #303f9f;
+  --ion-color-capture-tint: #7986cb;
+
   /** primary **/
   --ion-color-primary: #3f51b5;
   --ion-color-primary-rgb: 63, 81, 181;