From 2f3d95e266603d52935d39bb0de09ffde43cf0ad Mon Sep 17 00:00:00 2001
From: jrbarnes9 <jrbarnes9@hotmail.com>
Date: Thu, 20 Feb 2020 12:23:51 +0000
Subject: [PATCH] render uac input to match letter

---
 .../assets/modules/uac/uac.css                            | 8 +++++---
 .../individual-response--your-household-v15/index.html    | 7 ++++---
 css/fixed.css                                             | 2 +-
 css/main.css                                              | 4 ++--
 css/responsive.css                                        | 2 +-
 5 files changed, 13 insertions(+), 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
index 4058e39d63..b8cf06a3b9 100644
--- 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
index 07ffcc27cd..0766d5c6d9 100644
--- 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
index d968c7f15e..0628498970 100644
--- a/css/fixed.css
+++ b/css/fixed.css
@@ -3,4 +3,4 @@
   margin-bottom: 2rem;
 }
 
-/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdHMvX2dyb3VwLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxvQkFBb0I7RUFBcEIsb0JBQW9CO0NBQ3JCIiwiZmlsZSI6ImZpeGVkLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ncm91cCB7XG4gIG1hcmdpbi1ib3R0b206IDJyZW07XG59XG4iXX0= */
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdHMvX2dyb3VwLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxvQkFBbUI7RUFBbkIsb0JBQW1CO0NBQ3BCIiwiZmlsZSI6ImZpeGVkLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ncm91cCB7XG4gIG1hcmdpbi1ib3R0b206IDJyZW07XG59XG4iXX0= */
diff --git a/css/main.css b/css/main.css
index cd945bbe8f..b2949ce79f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -52,7 +52,7 @@ html.prototypes-home h1 {
   left: 0;
   width: 25px;
   height: 25px;
-  background: transparent;
+  background: rgba(0, 0, 0, 0);
   cursor: pointer;
 }
 
@@ -96,4 +96,4 @@ html.prototypes-home h1 {
   border-bottom: 1px solid rgba(239, 239, 239, 0.1);
 }
 
-/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGdCQUFnQjtDQVFqQjs7QUFURDtFQUdJLGtCQUFrQjtDQUNuQjs7QUFKSDtFQU9JLGtCQUFrQjtFQUFsQixrQkFBa0I7Q0FDbkI7O0FBR0g7RUFDRSxpQkFBaUI7RUFDakIsYUFBYTtFQUNiLGlCQUFrQjtFQUFsQixrQkFBa0I7RUFDbEIsb0JBQW9CO0VBQXBCLG9CQUFvQjtDQVFyQjs7QUFaRDtFQU1JLGFBQWE7RUFDYixzQkFBc0I7RUFDdEIsa0JBQWtCO0VBQWxCLGtCQUFrQjtFQUNsQiwwQkFBMEI7RUFDMUIsc0JBQXVCO0VBQXZCLHVCQUF1QjtDQUN4Qjs7QUFHSDtFQUVJLFVBQVU7RUFDVixXQUFXO0VBQ1gsaUJBQWlCO0NBQ2xCOztBQUxIO0VBUUksZ0JBQWdCO0VBQWhCLGdCQUFnQjtFQUNoQixpQ0FBaUM7Q0FDbEM7O0FBVkg7RUFhSSxzQkFBc0I7Q0FDdkI7O0FBR0g7RUFDRSxnQkFBZ0I7RUFDaEIsVUFBVTtFQUNWLFFBQVE7RUFDUixZQUFZO0VBQ1osYUFBYTtFQUNiLHdCQUFnQjtFQUNoQixnQkFBZ0I7Q0FJakI7O0FBWEQ7RUFTSSwrQkFBZ0I7Q0FDakI7O0FBR0g7RUFFRSxnQkFBZ0I7RUFDaEIsY0FBYztFQUFkLGNBQWM7RUFDZCxPQUFPO0VBQ1AsU0FBUztFQUNULGFBTGE7RUFLYixhQUxhO0VBTWIsYUFBYTtFQUNiLGtDQUFxQjtFQUNyQixhQUFhO0VBQ2IsWUFBWTtFQUNaLHFDQUFxQjtNQUFyQixpQ0FBcUI7VUFBckIsNkJBQXFCO0VBQ3JCLHVDQUErQjtFQUEvQiwrQkFBK0I7RUFDL0IsaUJBQWlCO0NBV2xCOztBQXhCRDtFQWVJLGlDQUFxQjtNQUFyQiw2QkFBcUI7VUFBckIseUJBQXFCO0NBQ3RCOztBQWhCSDtFQWtCSSxhQUFhO0NBQ2Q7O0FBbkJIO0VBcUJJLGVBQWtCO0VBQWxCLGtCQUFrQjtFQUNsQixrREFBcUM7Q0FDdEMiLCJmaWxlIjoibWFpbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJodG1sLnByb3RvdHlwZXMtaG9tZSB7XG4gIGZvbnQtc2l6ZTogMThweDtcbiAgYm9keSB7XG4gICAgYmFja2dyb3VuZDogd2hpdGU7XG4gIH1cblxuICBoMSB7XG4gICAgZm9udC1zaXplOiAxLjJyZW07XG4gIH1cbn1cblxuLnNpdGUtaGVhZGVyIHtcbiAgYmFja2dyb3VuZDogIzIyMjtcbiAgY29sb3I6IHdoaXRlO1xuICBwYWRkaW5nOiAwLjNyZW0gMDtcbiAgbWFyZ2luLWJvdHRvbTogM3JlbTtcbiAgYSB7IFxuICAgIGNvbG9yOiB3aGl0ZTtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgZm9udC1zaXplOiAwLjhyZW07XG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgICBsZXR0ZXItc3BhY2luZzogMC4ycmVtO1xuICB9XG59XG5cbi5wcm90b3R5cGUtbGlzdCB7XG4gIHVsIHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xuICB9XG5cbiAgbGkge1xuICAgIHBhZGRpbmc6IDFyZW0gMDtcbiAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2VmZWZlZjtcbiAgfVxuXG4gIGEge1xuICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgfVxufVxuXG4uaGlkZGVuLW5hdi1idG4ge1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIGJvdHRvbTogMDtcbiAgbGVmdDogMDtcbiAgd2lkdGg6IDI1cHg7XG4gIGhlaWdodDogMjVweDtcbiAgYmFja2dyb3VuZDogcmdiYSgwLDAsMCwwKTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kOiByZ2JhKDAsMCwwLCAwLjIpO1xuICB9XG59XG5cbi5oaWRkZW4tbmF2IHtcbiAgJHdpZHRoOiAyMHJlbTtcbiAgcG9zaXRpb246IGZpeGVkO1xuICBwYWRkaW5nOiAxcmVtO1xuICB0b3A6IDA7XG4gIHJpZ2h0OiAwO1xuICB3aWR0aDogJHdpZHRoO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJhY2tncm91bmQ6IHJnYmEoIzIyMiwgMC45KTtcbiAgY29sb3I6IHdoaXRlO1xuICB6LWluZGV4OiAxMDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKCR3aWR0aCk7XG4gIHRyYW5zaXRpb246IGFsbCAxMDBtcyBlYXNlLW91dDtcbiAgb3ZlcmZsb3c6IHNjcm9sbDtcbiAgJi5pcy1vcGVuIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7XG4gIH1cbiAgYSB7XG4gICAgY29sb3I6IHdoaXRlO1xuICB9XG4gIGxpIHtcbiAgICBwYWRkaW5nOiAwLjVyZW0gMDtcbiAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgcmdiYSgjZWZlZmVmLCAwLjEpO1xuICB9XG59XG4iXX0= */
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGdCQUFlO0NBUWhCOztBQVREO0VBR0ksa0JBQWlCO0NBQ2xCOztBQUpIO0VBT0ksa0JBQWlCO0VBQWpCLGtCQUFpQjtDQUNsQjs7QUFHSDtFQUNFLGlCQUFnQjtFQUNoQixhQUFZO0VBQ1osaUJBQWlCO0VBQWpCLGtCQUFpQjtFQUNqQixvQkFBbUI7RUFBbkIsb0JBQW1CO0NBUXBCOztBQVpEO0VBTUksYUFBWTtFQUNaLHNCQUFxQjtFQUNyQixrQkFBaUI7RUFBakIsa0JBQWlCO0VBQ2pCLDBCQUF5QjtFQUN6QixzQkFBc0I7RUFBdEIsdUJBQXNCO0NBQ3ZCOztBQUdIO0VBRUksVUFBUztFQUNULFdBQVU7RUFDVixpQkFBZ0I7Q0FDakI7O0FBTEg7RUFRSSxnQkFBZTtFQUFmLGdCQUFlO0VBQ2YsaUNBQWdDO0NBQ2pDOztBQVZIO0VBYUksc0JBQXFCO0NBQ3RCOztBQUdIO0VBQ0UsZ0JBQWU7RUFDZixVQUFTO0VBQ1QsUUFBTztFQUNQLFlBQVc7RUFDWCxhQUFZO0VBQ1osNkJBQXlCO0VBQ3pCLGdCQUFlO0NBSWhCOztBQVhEO0VBU0ksK0JBQTRCO0NBQzdCOztBQUdIO0VBRUUsZ0JBQWU7RUFDZixjQUFhO0VBQWIsY0FBYTtFQUNiLE9BQU07RUFDTixTQUFRO0VBQ1IsYUFMYTtFQUtiLGFBTGE7RUFNYixhQUFZO0VBQ1osa0NBQXFCO0VBQ3JCLGFBQVk7RUFDWixZQUFXO0VBQ1gscUNBQTZCO01BQTdCLGlDQUE2QjtVQUE3Qiw2QkFBNkI7RUFDN0IsdUNBQThCO0VBQTlCLCtCQUE4QjtFQUM5QixpQkFBZ0I7Q0FXakI7O0FBeEJEO0VBZUksaUNBQXdCO01BQXhCLDZCQUF3QjtVQUF4Qix5QkFBd0I7Q0FDekI7O0FBaEJIO0VBa0JJLGFBQVk7Q0FDYjs7QUFuQkg7RUFxQkksZUFBaUI7RUFBakIsa0JBQWlCO0VBQ2pCLGtEQUFxQztDQUN0QyIsImZpbGUiOiJtYWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImh0bWwucHJvdG90eXBlcy1ob21lIHtcbiAgZm9udC1zaXplOiAxOHB4O1xuICBib2R5IHtcbiAgICBiYWNrZ3JvdW5kOiB3aGl0ZTtcbiAgfVxuXG4gIGgxIHtcbiAgICBmb250LXNpemU6IDEuMnJlbTtcbiAgfVxufVxuXG4uc2l0ZS1oZWFkZXIge1xuICBiYWNrZ3JvdW5kOiAjMjIyO1xuICBjb2xvcjogd2hpdGU7XG4gIHBhZGRpbmc6IDAuM3JlbSAwO1xuICBtYXJnaW4tYm90dG9tOiAzcmVtO1xuICBhIHsgXG4gICAgY29sb3I6IHdoaXRlO1xuICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICBmb250LXNpemU6IDAuOHJlbTtcbiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgIGxldHRlci1zcGFjaW5nOiAwLjJyZW07XG4gIH1cbn1cblxuLnByb3RvdHlwZS1saXN0IHtcbiAgdWwge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIH1cblxuICBsaSB7XG4gICAgcGFkZGluZzogMXJlbSAwO1xuICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZWZlZmVmO1xuICB9XG5cbiAgYSB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICB9XG59XG5cbi5oaWRkZW4tbmF2LWJ0biB7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgYm90dG9tOiAwO1xuICBsZWZ0OiAwO1xuICB3aWR0aDogMjVweDtcbiAgaGVpZ2h0OiAyNXB4O1xuICBiYWNrZ3JvdW5kOiByZ2JhKDAsMCwwLDApO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQ6IHJnYmEoMCwwLDAsIDAuMik7XG4gIH1cbn1cblxuLmhpZGRlbi1uYXYge1xuICAkd2lkdGg6IDIwcmVtO1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHBhZGRpbmc6IDFyZW07XG4gIHRvcDogMDtcbiAgcmlnaHQ6IDA7XG4gIHdpZHRoOiAkd2lkdGg7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZDogcmdiYSgjMjIyLCAwLjkpO1xuICBjb2xvcjogd2hpdGU7XG4gIHotaW5kZXg6IDEwO1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoJHdpZHRoKTtcbiAgdHJhbnNpdGlvbjogYWxsIDEwMG1zIGVhc2Utb3V0O1xuICBvdmVyZmxvdzogc2Nyb2xsO1xuICAmLmlzLW9wZW4ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTtcbiAgfVxuICBhIHtcbiAgICBjb2xvcjogd2hpdGU7XG4gIH1cbiAgbGkge1xuICAgIHBhZGRpbmc6IDAuNXJlbSAwO1xuICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCByZ2JhKCNlZmVmZWYsIDAuMSk7XG4gIH1cbn1cbiJdfQ== */
diff --git a/css/responsive.css b/css/responsive.css
index d30995d6ee..9ee962086a 100644
--- a/css/responsive.css
+++ b/css/responsive.css
@@ -3,4 +3,4 @@
   margin-bottom: 2rem;
 }
 
-/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdHMvX2dyb3VwLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxvQkFBb0I7RUFBcEIsb0JBQW9CO0NBQ3JCIiwiZmlsZSI6InJlc3BvbnNpdmUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmdyb3VwIHtcbiAgbWFyZ2luLWJvdHRvbTogMnJlbTtcbn1cbiJdfQ== */
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdHMvX2dyb3VwLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxvQkFBbUI7RUFBbkIsb0JBQW1CO0NBQ3BCIiwiZmlsZSI6InJlc3BvbnNpdmUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmdyb3VwIHtcbiAgbWFyZ2luLWJvdHRvbTogMnJlbTtcbn1cbiJdfQ== */