Making it match the real thing... Well, more so than before...

src/pages/chat/chat.html

@@ -6,7 +6,7 @@
       </button>
     </ion-buttons>
 
-    <ion-title><img [src]="this.profile.details.pic.thumb" height="24" width="24"> {{this.profile.details.name}}</ion-title>
+    <ion-title><img class="title-profile-avatar" [src]="'https://appsby.fitz.guru/urge/' + this.profile.details.pic.thumb" height="24" width="24"> {{this.profile.details.name}}</ion-title>
 
     <!--ion-buttons right>
       <button ion-button icon-only>
@@ -19,7 +19,7 @@
 <ion-content>
   <ion-list>
     <ion-item class="message-bubble" *ngFor="let message of this.profile.messages" [ngClass]="{ 'is-user': (message.isUser == true) }">
-      <img *ngIf="message.image" [src]="message.image" (press)="showLightbox($event, message.image)">
+      <img *ngIf="message.image" [src]="'https://appsby.fitz.guru/urge/' + message.image" (press)="showLightbox($event, message.image)">
       <p *ngIf="message.text != ''">{{message.text}}</p>
     </ion-item>
   </ion-list>

src/pages/chat/chat.scss

@@ -1,14 +1,72 @@
 page-chat {
 
-  .message-bubble {
-    background-color: #000fff;
-    color: #000000;
-    max-width: 75%;
-    padding: 0.75rem;
-    
-    &.is-user {
-      background-color: #fff000;
-      margin: 1rem 0 1rem auto;
+  .toolbar-title {
+
+    .title-profile-avatar {
+      vertical-align: bottom;
+    }
+  }
+
+  .list {
+
+    .message-bubble {
+      background-color: #6fbedf;
+      border-radius: 0.5rem;
+      margin: 1rem auto 2.5rem 1rem;
+      max-width: 75%;
+      overflow: visible;
+      padding: 0.75rem;
+      position: relative;
+
+      &::after {
+        border: 0.625em solid transparent;
+        border-bottom: 0;
+        border-left: 0;
+        border-top-color: #6fbedf;
+        bottom: 0;
+        content: '';
+        height: 0;
+        left: 2rem;
+        margin-bottom: -0.625em;
+        margin-left: -0.312em;
+        position: absolute;
+        width: 0;
+      }
+
+      &.is-user {
+        background-color: #fdb315;
+        margin: 1rem 1rem 2.5rem auto;
+
+        &::after {
+          border: 0.625em solid transparent;
+          border-bottom: 0;
+          border-right: 0;
+          border-top-color: #fdb315;
+          left: auto;
+          margin-bottom: -0.625em;
+          margin-right: -0.312em;
+          right: 2rem;
+        }
+      }
+
+      .item-inner {
+        border-bottom: none;
+      }
+
+      ion-label {
+        overflow: visible;
+        text-overflow: unset;
+        margin: 0 0.75rem;
+      }
+
+      p {
+        color: #1d1e1f;
+        white-space: normal;
+
+        &.timestamp {
+          color: #acacac;
+        }
+      }
     }
   }
 }

src/pages/grid/grid.html

@@ -1,5 +1,5 @@
 <ion-content no-padding>
-  <ion-grid>
+  <ion-grid no-padding>
     <ion-row align-items-stretch>
       <ion-col col-4 class="profile" *ngFor="let current of profiles" (tap)="profileTapped($event, current)" [style.backgroundImage]="getBackgroundThumbnail(current.details.pic)"></ion-col>
     </ion-row>

src/pages/grid/grid.scss

@@ -6,7 +6,7 @@ page-grid {
       background-size: cover;
       border: 1px solid #000000;
       box-sizing: border-box;
-      padding: 0 0 33%;
+      padding: 0 0 33% !important;
     }
   }
 }

src/pages/lightbox/lightbox.html

@@ -9,5 +9,5 @@
 </ion-header>
 
 <ion-content (click)="close($event)">
-  <img [src]="this.image">
+  <img class="image-detail" [src]="'https://appsby.fitz.guru/urge/' + this.image">
 </ion-content>

src/pages/lightbox/lightbox.scss

@@ -1,3 +1,11 @@
 page-lightbox {
 
+  .image-detail {
+    display: block;
+    height: auto;
+    position: relative;
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
+    width: 100%;
+  }
 }

src/pages/messages/messages.html

@@ -17,16 +17,16 @@
   <ion-list>
     <ion-item no-padding *ngFor="let profile of profiles">
       <ion-thumbnail item-start (tap)="profilePictureTapped($event, profile)">
-        <img [src]="profile.details.pic.thumb">
+        <img [src]="'https://appsby.fitz.guru/urge/' + profile.details.pic.thumb">
       </ion-thumbnail>
       <ion-grid (tap)="interviewTapped($event, profile)">
         <ion-row nowrap justify-content-between>
-          <ion-col>
+          <ion-col class="username">
             {{profile.details.name}}
           </ion-col>
-          <ion-col [innerHTML]="getLatestMessageTimestamp(profile.messages)"></ion-col>
+          <ion-col class="timestamp" [innerHTML]="getLatestMessageTimestamp(profile.messages)"></ion-col>
         </ion-row>
-        <ion-row nowrap>
+        <ion-row class="latest-message" nowrap>
           <ion-col [innerHTML]="getLatestMessage(profile.messages)"></ion-col>
         </ion-row>
       </ion-grid>

src/pages/messages/messages.scss

@@ -1,3 +1,16 @@
 page-messages {
 
+  .col {
+    color: #acacac;
+
+    &.username {
+      font-size: 0.8em;
+    }
+
+    &.timestamp {
+      font-size: 0.7em;
+      font-style: italic;
+      text-align: right;
+    }
+  }
 }

src/pages/profile/profile.html

@@ -13,7 +13,7 @@
     </ion-buttons-->
   </ion-toolbar>
 
-  <div id="detail-overlay" class="details" swipeAll (swipedown)="closeProfileDetails($event)" (swipeup)="openProfileDetails($event)">
+  <div id="detail-overlay" class="details" swipeAll (swipedown)="closeProfileDetails($event)" (swipeup)="openProfileDetails($event)" (click)="toggleProfileDetails($event)">
     <ion-grid>
       <ion-row nowrap align-items-center justify-content-between>
         <ion-col col-8>

src/pages/profile/profile.scss

@@ -20,7 +20,7 @@ page-profile {
   .details {
     background: rgba(0, 0, 0, 0.8);
     bottom: 0;
-    height: 75px;
+    height: 60px;
     left: 0;
     position: absolute;
     right: 0;

src/pages/profile/profile.ts

@@ -57,4 +57,12 @@ export class ProfilePage {
       });
     }
   }
+
+  toggleProfileDetails(event) {
+    if (!this.detailsOpen) {
+      this.openProfileDetails(event);
+    } else {
+      this.closeProfileDetails(event);
+    }
+  }
 }