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

2018-03-07 00:05:54 -05:00
parent 6e756e0792
commit 7d5bf0f7ee
15 changed files with 175 additions and 24 deletions
--- a/src/pages/chat/chat.scss
+++ b/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;
+        }
+      }
    }
  }
 }