From 57069e427df6dd71a0f605c01fbc93e52dd850b0 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 16 Oct 2017 16:51:44 +0100
Subject: [PATCH] Add some letter spacing to two factor textbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Entering, or reading back sequences of digits is easier when they’re a
bit more spaced out.

This is because we read words as shapes, but read numbers
digit-by-digit.

So this commit adjusts the tracking of the type to put a bit more space
in for textboxes that are going to accept digits.
---
 app/assets/stylesheets/components/textbox.scss | 5 +++++
 app/templates/views/register-from-invite.html  | 4 +++-
 app/templates/views/register.html              | 4 +++-
 app/templates/views/send-test.html             | 2 +-
 app/templates/views/two-factor.html            | 2 +-
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss
index 27ee0d1f8f..9975df803e 100644
--- a/app/assets/stylesheets/components/textbox.scss
+++ b/app/assets/stylesheets/components/textbox.scss
@@ -54,3 +54,8 @@
 .textbox-right-aligned {
   text-align: right;
 }
+
+.extra-tracking .form-control {
+  padding-left: 5px;
+  letter-spacing: 0.04em;
+}
diff --git a/app/templates/views/register-from-invite.html b/app/templates/views/register-from-invite.html
index fa9acbd995..29f9572b81 100644
--- a/app/templates/views/register-from-invite.html
+++ b/app/templates/views/register-from-invite.html
@@ -14,7 +14,9 @@ <h1 class="heading-large">Create an account</h1>
     <p>Your account will be created with this email: {{email_address}}</p>
     <form method="post" autocomplete="off">
       {{ textbox(form.name, width='3-4') }}
-      {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+      <div class="extra-tracking">
+        {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+      </div>
       {{ textbox(form.password, hint="At least 8 characters", width='3-4') }}
       {{ page_footer("Continue") }}
       {{form.service}}
diff --git a/app/templates/views/register.html b/app/templates/views/register.html
index 540307e745..bc7130c38f 100644
--- a/app/templates/views/register.html
+++ b/app/templates/views/register.html
@@ -14,7 +14,9 @@ <h1 class="heading-large">Create an account</h1>
     <form method="post" novalidate>
       {{ textbox(form.name, width='3-4') }}
       {{ textbox(form.email_address, hint="Must be from a government organisation", width='3-4', safe_error_message=True) }}
-      {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+      <div class="extra-tracking">
+        {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+      </div>
       <input class="visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
       {{ textbox(form.password, hint="At least 8 characters", width='3-4') }}
       {{ page_footer("Continue") }}
diff --git a/app/templates/views/send-test.html b/app/templates/views/send-test.html
index 7550eaa4fd..a36c2d3f42 100644
--- a/app/templates/views/send-test.html
+++ b/app/templates/views/send-test.html
@@ -16,7 +16,7 @@ <h1 class="heading-large">
 
   <form method="post" class="js-stick-at-top-when-scrolling" data-module="autofocus" autocomplete="off">
     <div class="grid-row">
-      <div class="column-two-thirds">
+      <div class="column-two-thirds {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
         {{ textbox(
           form.placeholder_value,
           hint='Optional' if optional_placeholder else None,
diff --git a/app/templates/views/two-factor.html b/app/templates/views/two-factor.html
index 73c7d91114..a58df2f325 100644
--- a/app/templates/views/two-factor.html
+++ b/app/templates/views/two-factor.html
@@ -15,7 +15,7 @@ <h1 class="heading-large">Check your phone</h1>
 
     <p>We’ve sent you a text message with a security code.</p>
 
-    <form autocomplete="off" method="post">
+    <form autocomplete="off" method="post" class="extra-tracking">
       {{ textbox(
         form.sms_code,
         width='5em',