Step 4.9: Add basic messages stylesheet

src/pages/messages/messages.scss

@@ -0,0 +1,93 @@
+.messages-page-navbar {
+  .chat-picture {
+    width: 50px;
+    border-radius: 50%;
+    float: left;
+  }
+
+  .chat-title {
+    line-height: 50px;
+    float: left;
+  }
+}
+
+.messages-page-content {
+  > .scroll-content {
+    margin: 42px -15px 53px !important;
+  }
+
+  .messages {
+    height: 100%;
+    background-image: url(/assets/chat-background.jpg);
+    background-color: #E0DAD6;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  .message-wrapper {
+    margin-bottom: 9px;
+
+    &::after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+  }
+
+  .message {
+    display: inline-block;
+    position: relative;
+    max-width: 236px;
+    border-radius: 7px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
+
+    &.message-mine {
+      float: right;
+      background-color: #DCF8C6;
+
+      &::before {
+        right: -11px;
+        background-image: url(/assets/message-mine.png)
+      }
+    }
+
+    &.message-other {
+      float: left;
+      background-color: #FFF;
+
+      &::before {
+        left: -11px;
+        background-image: url(/assets/message-other.png)
+      }
+    }
+
+    &.message-other::before, &.message-mine::before {
+      content: "";
+      position: absolute;
+      bottom: 3px;
+      width: 12px;
+      height: 19px;
+      background-position: 50% 50%;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    .message-content {
+      padding: 5px 7px;
+      word-wrap: break-word;
+
+      &::after {
+        content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
+        display: inline;
+      }
+    }
+
+    .message-timestamp {
+      position: absolute;
+      bottom: 2px;
+      right: 7px;
+      font-size: 12px;
+      color: gray;
+    }
+  }
+}