From 070ed818cf0941afa4d53721b23f57c4f7c1c666 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 13 Nov 2020 22:31:28 +0000
Subject: [PATCH] Add HTML and CSS for extended GSM characters

Based on feedback from this pull request:

https://github.com/alphagov/notifications-admin/pull/3711
---
 app/assets/stylesheets/local/_typography.scss | 6 ++++++
 app/templates/views/pricing/index.html        | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/local/_typography.scss b/app/assets/stylesheets/local/_typography.scss
index 401562515..2e85bf969 100644
--- a/app/assets/stylesheets/local/_typography.scss
+++ b/app/assets/stylesheets/local/_typography.scss
@@ -60,3 +60,9 @@
 .destructive-link--no-visited-state {
   @include destructive-link-style-no-visited-state;
 }
+
+// Font override classes
+.extended-gsm-characters {
+  font-family: $govuk-font-family-tabular;
+  letter-spacing: 0.5em;
+}
diff --git a/app/templates/views/pricing/index.html b/app/templates/views/pricing/index.html
index 81e7709e3..08cb6ce8e 100644
--- a/app/templates/views/pricing/index.html
+++ b/app/templates/views/pricing/index.html
@@ -44,7 +44,10 @@
 
   <h3 class="heading-small" id="long-text-messages">Long text messages</h3>
   <p class="govuk-body">If a text message is longer than 160 characters (including spaces), it’ll be charged as more than one message.</p>
-  <p class="govuk-body">The following characters are charged as 2 characters each: [ ] { } ^ \ | ~ €</p>
+  <p class="govuk-body">
+    The following characters are charged as 2 characters each:<br />
+    <span class="extended-gsm-characters">[]{}^\|~€</span>
+  </p>
 
   <div class="bottom-gutter-3-2">
     {% call mapping_table(