Mobile mostly complete

12 files changed, 249 insertions, 15 deletions

diff --git a/src/31.html b/src/31.html
index 9a81747..d6b8950 100644
--- a/src/31.html
+++ b/src/31.html
@@ -29,7 +29,7 @@
                         <div class="full-box">
                           <h2>Uploading</h2>
                           <div class="file-size">File size: 378 KB</div>
-                          <div class="info-box">
+                          <div class="info-box inline">
                             <img class="info-box__icon" src="img/info.png" />
                             <div class="info-box__text">
                               Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
diff --git a/src/32.html b/src/32.html
index f9c8a11..f90bb17 100644
--- a/src/32.html
+++ b/src/32.html
@@ -43,7 +43,7 @@
                               </div>
                             </div>
                           </div>
-                          <div class="info-box">
+                          <div class="info-box inline">
                             <img class="info-box__icon" src="img/info.png" />
                             <div class="info-box__text">
                               Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
@@ -62,7 +62,7 @@
                               </div>
                             </div>
                           </div>
-                          <div class="info-box">
+                          <div class="info-box inline">
                             <img class="info-box__icon" src="img/info.png" />
                             <div class="info-box__text">
                               Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
@@ -70,7 +70,8 @@
                           </div>
                           <button class="btn tertiary small">Add file</button>
                         </div>
-
+                        
+                        <div class="spacer"></div>
                         <h2>Supporting documents</h2>
                         <div class="upload-box">
                           <div class="upload-box__title">Permanent residency application</div>
@@ -83,7 +84,7 @@
                               </div>
                             </div>
                           </div>
-                          <div class="info-box">
+                          <div class="info-box inline">
                             <img class="info-box__icon" src="img/loading.png" />
                             <div class="info-box__text">
                               Processing...
diff --git a/src/33.html b/src/33.html
index f850203..5582610 100644
--- a/src/33.html
+++ b/src/33.html
@@ -31,7 +31,7 @@
                         </div> -->
 
                         <div class="subtitle">Document upload service</div>
-                        <h1>Add files</h1>
+                        <h1>Confirm and consent</h1>
                         <h2>Required documents</h2>
 
                         <div class="upload-box">
@@ -64,6 +64,7 @@
                           </div>
                         </div>
 
+                        <div class="spacer"></div>
                         <h2>Supporting documents</h2>
                         <div class="upload-box">
                           <div class="upload-box__title">Permanent residency application</div>
@@ -81,9 +82,13 @@
                           <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
                         </div>
                         <div class="checkbox-group">
-                          <input type="checkbox" />
+                          <input type="checkbox" id="indeterminate"/>
                           <label>Cursus euismod quis viverra nibh cras pulvinar mattis nunc.</label>
                         </div>
+
+                        <!-- placeholder script to show "indeterminate" status of checkbox. delete me -->
+                        <script>document.getElementById("indeterminate").indeterminate = true;</script>
+
                         <button class="btn primary">Confirm</button>
                         <button class="btn secondary">Cancel</button>
                     </div>
diff --git a/src/34.html b/src/34.html
new file mode 100644
index 0000000..dca423d
--- /dev/null
+++ b/src/34.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>DLS - DEVELOPMENT BUILD</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="stylesheet" href="css/bigstyle.css" />
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/buttons.css" />
+    <link rel="stylesheet" href="css/uploadbox.css" />
+    <link rel="stylesheet" href="css/infobox.css" />
+    <link rel="stylesheet" href="css/forms.css" />
+  </head>
+  <body class="authenticatedpage page legacy-page base-page basicpage page-mygov-auth-account bg-blue-grey">
+    <div class="root responsivegrid">
+      <div class="aem-Grid aem-Grid--12 aem-Grid--tablet--12 aem-Grid--default--12 aem-Grid--phone--12 ">
+        <div class="responsivegrid aem-GridColumn--tablet--12 aem-GridColumn--offset--tablet--0 aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn--tablet--none aem-GridColumn aem-GridColumn--default--10 aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--1">
+          <div class="aem-Grid aem-Grid--10 aem-Grid--default--10 ">
+            <div class="authaccountbody aem-GridColumn aem-GridColumn--default--10">
+              <div class="authenticated-body-container">
+                <div class="authenticated-body-container__page">
+                  <main id="main" role="main" tabindex="-1">
+                    <div class="documentlodgementservice generic">
+                        <!-- ADD YOUR PAGE IN HERE -->
+                        <p>Your (dynamic form) and any supporting documents you added are uploaded and we've notified (dynamic service).</p>
+                        <p>Your document upload reference number is (number).</p>
+                        <div class="info-box message">
+                          <!-- <img class="info-box__icon" src="img/info.png" /> -->
+                          <div class="info-box__icon"></div>
+                          <div class="info-box__text">
+                            Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
+                          </div>
+                        </div>
+                        <div class="spacer-l"></div>
+                        <button class="btn primary">Return to home</button>
+                    </div>
+                  </main>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/37.html b/src/37.html
new file mode 100644
index 0000000..d59aba3
--- /dev/null
+++ b/src/37.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>DLS - DEVELOPMENT BUILD</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="stylesheet" href="css/bigstyle.css" />
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/buttons.css" />
+    <link rel="stylesheet" href="css/uploadbox.css" />
+    <link rel="stylesheet" href="css/infobox.css" />
+  </head>
+  <body class="authenticatedpage page legacy-page base-page basicpage page-mygov-auth-account bg-blue-grey">
+    <div class="root responsivegrid">
+      <div class="aem-Grid aem-Grid--12 aem-Grid--tablet--12 aem-Grid--default--12 aem-Grid--phone--12 ">
+        <div class="responsivegrid aem-GridColumn--tablet--12 aem-GridColumn--offset--tablet--0 aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn--tablet--none aem-GridColumn aem-GridColumn--default--10 aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--1">
+          <div class="aem-Grid aem-Grid--10 aem-Grid--default--10 ">
+            <div class="authaccountbody aem-GridColumn aem-GridColumn--default--10">
+              <div class="authenticated-body-container">
+                <div class="authenticated-body-container__page">
+                  <main id="main" role="main" tabindex="-1">
+                    <div class="documentlodgementservice generic">
+                        <!-- ADD YOUR PAGE IN HERE -->
+                        <div class="subtitle">Document upload service</div>
+                        <h1>Add files</h1>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                          sed do eiusmod tempor.
+                        </p>
+                        <div class="upload-box">
+                          <div class="upload-box__link-box">
+                            <div class="upload-box__link-title"><a href="#">Permanent residency application</a></div>
+                            <img class="upload-box__link-icon" src="img/arrow.png" />
+                          </div>
+                          <div class="upload-box__text">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          </div>
+                        </div>
+                        <div class="upload-box">
+                          <div class="upload-box__link-box">
+                            <div class="upload-box__link-title">Permanent residency refused or something something</div>
+                            <a href="#"><img class="upload-box__link-icon" src="img/arrow.png" /></a>
+                          </div>
+                          <div class="upload-box__text">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          </div>
+                        </div>
+                        <div class="upload-box">
+                          <div class="upload-box__link-box">
+                            <a href="#">
+                              <div class="upload-box__link-title">Permanent residency decision appeal</div>
+                              <img class="upload-box__link-icon" src="img/arrow.png" />
+                            </a>
+                          </div>
+                          <div class="upload-box__text">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          </div>
+                        </div>
+                        <div class="upload-box">
+                          <div class="upload-box__link-box">
+                            <div class="upload-box__link-title">Appeal for Ministerial Intervention</div>
+                            <img class="upload-box__link-icon" src="img/arrow.png" />
+                          </div>
+                          <div class="upload-box__text">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          </div>
+                        </div>
+                        <div class="upload-box">
+                          <div class="upload-box__link-box">
+                            <div class="upload-box__link-title">Proof of Health Insurance</div>
+                            <img class="upload-box__link-icon" src="img/arrow.png" />
+                          </div>
+                          <div class="upload-box__text">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          </div>
+                        </div>
+                    </div>
+                  </main>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/css/buttons.css b/src/css/buttons.css
index b0b2a1a..f9d5ae7 100644
--- a/src/css/buttons.css
+++ b/src/css/buttons.css
@@ -35,7 +35,6 @@
     text-decoration: none;
 }
 
-/* .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice button.btn.primary:focus, */
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:focus {
     text-decoration: none;
     outline: none;
diff --git a/src/css/forms.css b/src/css/forms.css
index 0110560..80436aa 100644
--- a/src/css/forms.css
+++ b/src/css/forms.css
@@ -15,10 +15,18 @@
     appearance: none;
     flex-shrink: 0;
     flex-grow: 0;
+    cursor: pointer;
 }
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .checkbox-group input[type="checkbox"]:checked {
     border: 2px solid var(--black);
-    background-image: url(img/check.png);
+    background-color: var(--light-navy);
+    background-image: url(../img/check.png);
+    background-size: contain;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .checkbox-group input[type="checkbox"]:indeterminate {
+    border: 2px solid var(--black);
+    background-color: var(--light-navy);
+    background-image: url(../img/indeterminate.png);
     background-size: contain;
 }
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .checkbox-group label {
@@ -27,4 +35,8 @@
     margin: 0;
     font-weight: normal;
     font-size: var(--font-size-16);
-}
\ No newline at end of file
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .checkbox-group:focus {
+    outline: 2px solid var(--dark-grey);
+    border-radius: 3px;
+}
diff --git a/src/css/infobox.css b/src/css/infobox.css
index cdcd80f..ca45674 100644
--- a/src/css/infobox.css
+++ b/src/css/infobox.css
@@ -1,15 +1,61 @@
+
+/* General info box settings */
+
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box {
     display: flex;
     align-items: flex-start;
     margin: 1rem 0;
 }
+
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box .info-box__icon {
     display: inline-block;
-    margin-right: 6px;
+    background-image: url(../img/info-grey.png);
+    background-size: cover;
+    min-width: 16px;
+    min-height: 16px;
+    margin: 6px 6px 0 0;
 }
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box .info-box__text {
+    display: inline-block;
+    font-weight: normal;
+    font-size: var(--font-size-16);
+    color: var(--black);
+}
+
+/* Inline info boxes (for file upload errors etc...) */
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box.inline .info-box__text {
     font-weight: bold;
     font-size: var(--font-size-14);
     color: var(--dark-grey);
-    display: inline-block;
+}
+
+/* Block sized info boxes */
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box.message {
+    background-color: #f7f7f7;
+    padding: 0.75rem;
+    border-radius: 3px;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box.message .info-box__icon {
+    background-image: url(../img/info-grey.png);
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box.info {
+    background-color: var(--white);
+    padding: 0.75rem;
+    border-radius: 3px;
+    border: 1px solid var(--dark-grey);
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box.info .info-box__icon {
+    background-image: url(../img/info-grey.png);
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box.warning {
+    background-color: #FFE679;
+    padding: 0.75rem;
+    border-radius: 3px;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box.warning .info-box__icon {
+    background-image: url(../img/warning.png);
 }
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index a4e4d22..7dd9964 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -20,12 +20,13 @@
     font-size: var(--font-size-24);
     font-weight: bold;
     color: var(--dark-grey);
-    margin: 0;
+    margin: 0.5rem 0;
 }
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h2 {
     font-size: var(--font-size-20);
     font-weight: bold;
     color: #000;
+    margin: 0.75rem 0;
 }
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h3 {
     font-size: var(--font-size-18);
@@ -48,7 +49,6 @@
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul li {
     padding: 4px; 
 }
-
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-box {
     background-color: var(--white);
     position: absolute;
diff --git a/src/css/uploadbox.css b/src/css/uploadbox.css
index 01f7eb4..0d717e1 100644
--- a/src/css/uploadbox.css
+++ b/src/css/uploadbox.css
@@ -13,7 +13,7 @@
     font-weight: bold;
     font-size: var(--font-size-18);
     color: var(--dark-grey);
-    margin-bottom: 20px;
+    margin-bottom: 0.75rem;
 }
 
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box p.upload-box__small-text {
@@ -61,4 +61,34 @@
 
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box hr {
     margin: 0.5rem;
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-box {
+    width: 100%;
+    min-height: 1.25rem;
+    overflow: auto;
+    margin-bottom: 0.75rem;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-box a {
+    color: inherit;
+    text-decoration: none;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-box a:hover {
+    background-color: inherit;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-title {
+    float: left;
+    font-size: var(--font-size-16);
+    font-weight: bold;
+    color: var(--black);
+    max-width: 90%;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-icon {
+    float: right;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-box {
+    width: 100%;
+    min-height: 1.25rem;
+    overflow: auto;
+    margin-bottom: 0.75rem;
 }
\ No newline at end of file
diff --git a/src/img/indeterminate.png b/src/img/indeterminate.png
new file mode 100644
index 0000000..388b6f7
--- /dev/null
+++ b/src/img/indeterminate.png
diff --git a/src/img/warning.png b/src/img/warning.png
new file mode 100644
index 0000000..d504d51
--- /dev/null
+++ b/src/img/warning.png