Update UI to follow the Figma design (#255)

- Update components style and color theme #228, #218, #219 - Resize the ratio of images #235
numbersprotocol · Nov 26, 2020 · 66edb65 · 66edb65
1 parent 314aa2c
commit 66edb65
Show file tree

Hide file tree

Showing 18 changed files with 270 additions and 58 deletions.
diff --git 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;
   }
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
   }
-}
+}
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
@@ -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
@@ -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
@@ -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
@@ -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;
+  }
+}
diff --git 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;
   }
-}
+}
diff --git 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
@@ -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
@@ -1,5 +1,15 @@
 mat-toolbar {
-  background: white;
+  background: #564dfc;
+  color: #ffffff;
+
+  .mat-icon {
+    color: #ffffff;
+  }
+
+  span {
+    color: #ffffff;
+    padding-right: 40px;
+  }
 }
 
 .page-content {