From 47c55ccb2b4227616fe779db54211e6c647cfc47 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 24 May 2017 12:55:07 +0100
Subject: [PATCH] Add tail to SMS message

Because:
- drawing things in CSS is fun
- when we have inbound messages, having a tail pointing the other way
  will help differentiate which messages are inbound
---
 .../stylesheets/components/sms-message.scss     | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss
index 2c33a64fc..96efbf308 100644
--- a/app/assets/stylesheets/components/sms-message.scss
+++ b/app/assets/stylesheets/components/sms-message.scss
@@ -1,5 +1,8 @@
+$tail-angle: 20deg;
+
 .sms-message-wrapper {
 
+  position: relative;
   width: 100%;
   max-width: 464px;
   box-sizing: border-box;
@@ -12,6 +15,20 @@
   clear: both;
   word-wrap: break-word;
 
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: -4px;
+    right: -20px;
+    border: 10px solid transparent;
+    border-left-width: 13px;
+    border-right-width: 13px;
+    border-bottom-color: $panel-colour;
+    border-left-color: $panel-colour;
+    transform: rotate($tail-angle);
+  }
+
 }
 
 .sms-message-recipient {