updated ui

static/backup.html

@@ -64,10 +64,19 @@
             </label>
           </div>
         </div>
+        <div class="checkbox-container">
+          <div class="checkbox manual-checkbox" style="margin-top: 12px">
+            <input type="checkbox" id="manual-backup" />
+            <div class="checkbox-shape"></div>
+            <label for="manual-backup" >
+              DO NOT store on relay (Manual Backups)
+            </label>
+          </div>
+        </div>
         <button
           class="push-button hidden-button"
           onclick="location.href='seed.html'"
-          style="margin-top: 92px;"
+          style="margin-top: 60px;"
           id="next-button"
         >
           Next

static/css/backup.css

@@ -15,4 +15,14 @@
   text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
   margin-top: 16px;
 }
-
+.checkbox .manual_backup {
+  margin-left: 10px;
+}
+.manual-checkbox {
+  margin-left: 9%;
+}
+@media screen and (max-width: 425px) {
+  .manual-checkbox {
+    margin-left: 4%;
+  }
+}

static/css/liquidity.css

@@ -5,7 +5,7 @@
   left: -4px;
 }
 
-.question-box .question-content {
+.automate .question-content {
   display: none;
   position: absolute;
   min-width: 280px;
@@ -18,6 +18,7 @@
   transform: translate(-50%, -50%);
   padding-top: 28px;
   z-index: 200;
+  left: 65%;
 }
 
 .question-content .close-button {
@@ -25,3 +26,17 @@
   top: 4px;
   right: 0;
 }
+.question-content .question-more {
+  position: absolute;
+  bottom: 4px;
+  right: 6px;
+  text-decoration: underline;
+}
+.automate {
+  position: relative;
+}
+@media screen and (max-width: 450px) {
+  .automate > .question-content {
+    left: 50%;
+  }
+}

static/css/styles.css

@@ -37,6 +37,14 @@ main {
   max-width: 600px;
   margin-inline: auto;
   padding: 1rem;
+  margin-bottom: auto;
+  zoom: 1.3;
+}
+
+@media (max-height: 740px) {
+  main {
+    zoom: unset;
+  }
 }
 
 * {
@@ -183,8 +191,16 @@ a {
 
 .setup-header > .back-button {
   position: absolute;
-  top: 0;
+  top: 2px;
   left: 0;
+  padding: 0;
+}
+
+@media (min-width: 640px) {
+  .setup-header > .back-button {
+    top: 10px;
+    left: -20px;
+  }
 }
 
 .setup-header > h2 {
@@ -202,6 +218,7 @@ a {
   font-size: 16px;
   text-align: center;
   text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
+  opacity: 0.8;
 }
 
 #qrcode {

static/index.html

@@ -66,7 +66,7 @@
         <button
           class="push-button"
           onclick="location.href='liquidity.html'"
-          style="margin-top: 92px"
+          style="margin-top: 60px"
         >
           Next
         </button>

static/js/backup.js

@@ -1,11 +1,21 @@
 $(() => {
+  let backup; let manual_backup;
   $("#backup").click(() => {
-    const checked = $("#backup").prop("checked");
+    backup = $("#backup").prop("checked");
     const nextButton = $("#next-button");
-    if (checked) {
+    if (backup || manual_backup) {
       nextButton.removeClass("hidden-button");
     } else {
       nextButton.addClass("hidden-button");
     }
   });
+  $("#manual-backup").click(()=>{
+      manual_backup = $('#manual-backup').prop("checked");
+      const nextButton = $("#next-button");
+      if(backup || manual_backup) {
+        nextButton.removeClass("hidden-button");
+      } else {
+        nextButton.addClass("hidden-button");
+      };
+  });
 });

static/js/seed.js

@@ -3,6 +3,10 @@ $(() => {
     $("#seed-box-container").removeClass("blur-filter");
   });
 
+  $("#seed-box-container").click(() => {
+    $("#seed-box-container").removeClass("blur-filter");
+  });
+  
   $('#copied').click(() => {
     const checked = $("#copied").prop('checked');
     const nextButton = $("#next-button");

static/liquidity.html

@@ -44,22 +44,23 @@
         <div class="checkbox" style="margin-top: 60px">
           <input type="checkbox" id="automate" data-group="service" />
           <div class="checkbox-shape"></div>
-          <label for="automate">
+          <label for="automate" class="automate">
             Use Automation Service
             <div class="question-box">
               <button class="icon-button" id="show-question">
                 <img src="img/question.svg" />
               </button>
-              <div class="question-content" id="question-content">
-                Automation helps to reduce overall fees by trusting peers until channel management events cost >1% of their on-demand liquidity requirements
-                <button class="icon-button close-button" id="close-question">
-                  <img src="img/close.svg" alt="" />
-                </button>
-              </div>
+            </div>
+            <div class="question-content" id="question-content">
+              Automation helps reduce the fees you pay by trusting peers temporarily until your node balance is sufficient to open a balanced Lightning channel.
+              <button class="icon-button close-button" id="close-question">
+                <img src="img/close.svg" alt="" />
+              </button>
+              <a href="https://docs.shock.network/" target="_blank" class="marked question-more">Learn More</a>
             </div>
           </label>
         </div>
-        <div class="checkbox" style="margin-top: 60px">
+        <div class="checkbox" style="margin-top: 30px">
           <input type="checkbox" id="manual" data-group="service" />
           <div class="checkbox-shape"></div>
           <label for="manual">Manage my channels manually</label>
@@ -67,7 +68,7 @@
         <button
           class="push-button"
           onclick="location.href='backup.html'"
-          style="margin-top: 92px"
+          style="margin-top: 60px"
         >
           Next
         </button>

static/seed.html

@@ -156,7 +156,7 @@
           id="next-button"
           class="push-button hidden-button"
           onclick="location.href='connect.html'"
-          style="margin-top: 92px"
+          style="margin-top: 60px"
         >
           Next
         </button>