render uac input to match letter

ONSdigital · Feb 20, 2020 · 2f3d95e · 2f3d95e
1 parent 619559b
commit 2f3d95e
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/_prototypes/individual-response--your-household-v15/assets/modules/uac/uac.css b/_prototypes/individual-response--your-household-v15/assets/modules/uac/uac.css
@@ -1,19 +1,21 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
+
 .uac__field {
-    display: inline-block;
+    display: block;
     position: relative;
 }
 
 .uac__input {
   height: 100%;
-  font-family: monospace;
   font-weight: bold;
+  font-family: 'Roboto Mono', monospace;
+  text-transform: uppercase;
 }
 
 .uac__security {
   display: flex;
 }
 
-
 @media only screen and (min-width: 375px) {
   .uac__input {
     font-size: 22px;

diff --git a/_prototypes/individual-response--your-household-v15/index.html b/_prototypes/individual-response--your-household-v15/index.html
@@ -39,12 +39,13 @@
                                 data-qa="question-title">
                                 Start census
                             </h1>
-                            <p class="field uac__field panel panel--branded panel--simple">
-                                <label class="label" for="uac">Enter the 16 character code printed on the letter
+                            <p class="field uac__field panel panel--info panel--simple">
+                                <label class="label" for="uac">Enter your 16 character access code
                                     <br>
                                     <span class="label__description">Keep this code safe and only share it with others in your household</span>
                                 </label>
-                                <input type="text" id="uac" class="input input--text input-type__input  uac__input js-uac" name="uac" maxlength="19" data-group-size="4" autocomplete="off" />
+                                <input type="text" id="uac" class="input input--text input-type__input uac__input js-uac u-mb-xs" name="uac" maxlength="19" data-group-size="4" autocomplete="off" />
+                                <span class="u-fs-s"><a href="#">Where to find your access code</a></span>
                             </p>
                             <div class="uac__security u-mt-m">
                                 <div class="uac__icon"><span class="icon icon--lock"></span></div>

diff --git a/css/fixed.css b/css/fixed.css
diff --git a/css/main.css b/css/main.css
diff --git a/css/responsive.css b/css/responsive.css