From 217e975ae92ef5783ae48b635c00a4da07aa2894 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 24 May 2017 12:43:40 +0100
Subject: [PATCH 1/2] Clean up unused SCSS in SMS message component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Things we don’t do with SMS messages any more:
- put paragraphs in them (we use `<br>` tags instead, to allow for
  multiple linebreaks)
- pick them using radio buttons
- render the template’s name as part of the template
- render the phone number that the message will be sent from as part of
  the template
---
 .../stylesheets/components/sms-message.scss   | 35 -------------------
 1 file changed, 35 deletions(-)

diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss
index a5a79e6d6..2c33a64fc 100644
--- a/app/assets/stylesheets/components/sms-message.scss
+++ b/app/assets/stylesheets/components/sms-message.scss
@@ -1,4 +1,3 @@
-%sms-message-wrapper,
 .sms-message-wrapper {
 
   width: 100%;
@@ -13,21 +12,6 @@
   clear: both;
   word-wrap: break-word;
 
-  p {
-    margin: 0;
-    line-height: 1.6;
-  }
-
-  p + p {
-    margin-top: 20px;
-  }
-
-}
-
-.sms-message-wrapper-with-radio {
-  @extend %sms-message-wrapper;
-  padding-left: 45px;
-  cursor: pointer;
 }
 
 .sms-message-recipient {
@@ -35,22 +19,3 @@
   color: $secondary-text-colour;
   margin: 10px 0 0 0;
 }
-
-.sms-message-name {
-  @include bold-24;
-  margin: 20px 0 5px 0;
-}
-
-.sms-message-picker {
-  display: block;
-  margin: 7px 0 0 0;
-  position: absolute;
-  left: 15px;
-  top: 50%;
-  z-index: 50;
-}
-
-.sms-message-from {
-  @include bold-19;
-  display: block;
-}

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 2/2] 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 {