From b416813a4434fdf0bbe2fda1807c17466ba6aaef Mon Sep 17 00:00:00 2001
From: John Shaver <john@jshaver.net>
Date: Thu, 16 Aug 2018 20:01:51 -0700
Subject: [PATCH] Some style chages on first/second step.

---
 app/index.html      | 71 ++++++++++++++++++++++++-----------
 app/styles/main.css | 91 ++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 139 insertions(+), 23 deletions(-)

diff --git a/app/index.html b/app/index.html
index 10490e9..64c4ed1 100644
--- a/app/index.html
+++ b/app/index.html
@@ -33,6 +33,14 @@
           <path fill="none" d="M0 0h24v24H0z"/>
           <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
         </g>
+        <g id="svg-checked">
+          <path d="M0 0h24v24H0z" fill="none"/>
+          <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+        </g>
+        <g id="svg-unchecked">
+          <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
+          <path d="M0 0h24v24H0z" fill="none"/>
+        </g>
       </defs>
     </svg>
     <div class="column-container wide">
@@ -98,37 +106,58 @@
         <!-- Step 2 Create Account -->
         <form class="js-acme-form js-acme-form-account">
           <h1><label>What's your email?</label></h1>
-          <input class="js-acme-account-email" type="email" placeholder="john@doe.family" required>
-          <br>
-          <br>
-          <label><input class="js-acme-account-tos" type="checkbox" required>
-            Agree to <a class="js-acme-tos-url" target="acme-tos">Let's Encrypt&trade; Terms of Service</a>?</label>
-          <br>
-          <br>
-          <label><input class="js-greenlock-account-tos" type="checkbox" required>
-            Agree to <a class="js-gl-tos" target="_blank" href="./legal.html">Greenlock&trade; Terms of Service</a>?</label>
-          <br>
-          <br>
+          <input class="js-acme-account-email acme-account-email" type="email" placeholder="john@doe.family" required>
+          <div class="checkbox-array">
+            <label>
+              <input class="js-acme-account-tos" type="checkbox" required>
+              <svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <use xlink:href="#svg-checked"></use>
+              </svg>
+              <svg class="icon-unchecked-box"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <use xlink:href="#svg-unchecked"></use>
+              </svg>
+              Agree to &nbsp<a class="js-acme-tos-url" target="acme-tos">Let's Encrypt&trade; Terms of Service</a>?
+            </label>
+            <label>
+              <input class="js-greenlock-account-tos" type="checkbox" required>
+              <svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <use xlink:href="#svg-checked"></use>
+              </svg>
+              <svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <use xlink:href="#svg-unchecked"></use>
+              </svg>
+              Agree to &nbsp<a class="js-gl-tos" target="_blank" href="./legal.html">Greenlock&trade; Terms of Service</a>?
+            </label>
+          </div>
           <!--
           <a href="#">advanced (use existing account)</a>
           <br>
           <br>
           -->
-          <button type="submit">Next</button>
+          <button class="button-next" type="submit">Next</button>
+          <div class="email-usage">
+            Why do we need your email? We link your SSL certificates to the
+            email you use so you can manage your certificates in the future,
+            and get important email updates about them.
+          </div>
         </form>
 
         <!-- Step 3 Set Challanges -->
         <form class="js-acme-form js-acme-form-challenges">
 
-          <h1>How will you validate your domain?</h1>
-          <br>
-          <label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
-            File Upload to HTTP Web Server</label>
-          <br>
-          <label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required>
-            TXT Records on DNS Name Server</label>
-          <br>
-
+          <h1>Let's verify your domain</h1>
+          <div class="tabbed-selector">
+            <label>
+              <input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
+              File Upload
+              <div></div>
+            </label>
+            <label>
+              <input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required>
+              DNS Record
+              <div></div>
+            </label>
+          </div>
           <div class="js-acme-challenges">
 
           <h2>Verify Domains &amp; Sub-Domains</h2>
diff --git a/app/styles/main.css b/app/styles/main.css
index 187c988..4844298 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -68,6 +68,7 @@ body {
   font-family: Source Sans Pro, sans-serif;
   margin: 0;
   line-height: 1.33;
+  color: #1a1a1a;
 }
 
 .greenlock-name {
@@ -84,7 +85,93 @@ body {
     display: initial;
 }
 
-svg {
+svg {}
+
+.js-progress-step-complete > .circle {}
+
+h1 {
+    font-size: 1.77777778em;
+}
+
+input[type=email], input[type=text] {
+    font-size: 1em;
+    padding: 0.444444444em 0.888889em;
+    width: 100%;
+}
+
+.checkbox-array {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    padding: 1em 0;
+}
+
+.checkbox-array input[type=checkbox] {
+    display: none;
+}
+
+.checkbox-array input[type=checkbox] ~ .icon-checked-box {
+    display: none;
+}
+
+.checkbox-array input[type=checkbox] ~ .icon-unchecked-box {
+    display: initial;
+}
+
+
+.checkbox-array input[type=checkbox]:checked ~ .icon-checked-box {
+    display: initial;
+}
+
+.checkbox-array input[type=checkbox]:checked ~ .icon-unchecked-box {
+    display: none;
+}
+
+.checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box {
+    width: 1.333333333em;
+    fill: #5bc17f;
+    margin-right: 0.666666667em;
+}
+
+.checkbox-array label {
+    display: flex;
+    align-items: center;
+    height: 1.333333333em;
+    font-size: 0.833333333em;
+    margin: 0.4em 0;
+}
+
+a {
+    color: #1a1a1a;
+}
+
+.email-usage {
+    color: #666666;
+    text-align: start;
+    font-size: 0.833333333em;
+    margin: 2em 0;
+}
+
+.button-next {
+    width: 100%;
+    background-color: #5bc17f;
+    border: none;
+    font-size: 1em;
+    color: white;
+    padding: 0.44444em;
+    margin: 1em 0;
+}
+
+.tabbed-selector label {
+    width: 50%;
+    padding: 0.5em 0;
+}
+
+.tabbed-selector {
+    display: flex;
+    font-weight: bold;
 }
 
-.js-progress-step-complete > .circle {}
\ No newline at end of file
+.tabbed-selector input[type=radio] {
+    display: none;
+}
\ No newline at end of file