From a94c24e6dff2eacf4979cafdf33baa660c122588 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 20 Aug 2016 13:44:47 +1200
Subject: [PATCH] Text and controls

---
 scripts/system/html/SnapshotReview.html | 137 +++++++++++++-----------
 1 file changed, 73 insertions(+), 64 deletions(-)

diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html
index 4a690c0144..20bf726ee2 100644
--- a/scripts/system/html/SnapshotReview.html
+++ b/scripts/system/html/SnapshotReview.html
@@ -12,6 +12,7 @@
         .snapshot-column-left {
             width: 320px;
             position: absolute;
+            padding-top: 8px;
         }
 
         .snapshot-column-right {
@@ -45,61 +46,64 @@
             border: 2px solid #575757;
             margin: -2px;
         }
+
+        hr {
+            padding-left: 0;
+            padding-right: 0;
+            margin: 21px 0;
+        }
+
+        .snapsection {
+            text-align: center;
+        }
+
+        .title {
+            text-transform: uppercase;
+            font-size: 12px;
+        }
+
+        .prompt {
+            font-family: Raleway-SemiBold;
+            font-size: 14px;
+        }
+
+        #share, #close {
+            margin-top: 21px;
+        }
+
+        .setting {
+            display: inline-table;
+            height: 28px;
+        }
+
+        .setting label {
+            display: table-cell;
+            vertical-align: middle;
+            font-family: Raleway-SemiBold;
+            font-size: 14px;
+        }
+
+        .setting + .setting {
+            margin-left: 18px;
+        }
+
+        input[type=button].naked {
+            font-size: 40px;
+            line-height: 40px;
+            width: 30px;
+            padding: 0;
+            margin: 0 0 -6px 0;
+            position: relative;
+            top: -6px;
+            left: -8px;
+            background: none;
+        }
+
+        input[type=button].naked:hover {
+            color: #00b4ef;
+            background: none;
+        }
     </style>
-    <!--
-      <style type="text/css">
-      .snapshot-container{
-        width:100%;
-      }
-
-      .snapshot-column-left{
-        width:50%;
-        float:left;
-      }
-
-      .snapshot-column-right{
-        width:50%;
-        float:right;
-      }
-      
-      .snapshot-column-right > div > img{
-        max-width: 100%;
-        height:auto;
-      }
-      .prompt {
-        font-family: Raleway-SemiBold;
-        text-transform: none;
-      }
-
-      .sub-section-header > div > input {
-        margin-top:20px;
-      }
-      span.inline-checkbox { display:inline; }
-
-      @media (max-width: 768px){
-        .snapshot-column-left{
-        width:100%;
-        }
-        .snapshot-column-right{
-        width:100%;
-        }
-        .snapshot-column-right > div > img{
-        margin-top:32px;
-        }
-      }
-
-      .snapsection{
-        width:95% !important;
-        padding-right:0px;
-        margin-left: auto;
-        margin-right: auto;
-      }
-      div#sharing {
-        margin-top:50px;
-      }
-
-    </style>
-    -->
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
     <script>
@@ -136,12 +140,12 @@
         if (!shareMsg.canShare) {
             // this means you may or may not be logged in, but can't share
             // because you are not in a public place.
-            document.getElementById("sharing").innerHTML = "<p>Snapshots can be shared when they're taken in shareable places.";
+            document.getElementById("sharing").innerHTML = "<p class='prompt'>Snapshots can be shared when they're taken in shareable places.";
         } else if (!shareMsg.isLoggedIn) {
             // this means you are in a public place, but can't share because
             // you need to login.  Soon we will just bring up the share dialog
             // in this case (and maybe set a boolean here to inform the html)
-            document.getElementById("sharing").innerHTML = "<p>Snapshots can be shared when you are logged in.";
+            document.getElementById("sharing").innerHTML = "<p class='prompt'>Snapshots can be shared when you're logged in.";
         }
     }
     window.onload = function () {
@@ -180,23 +184,28 @@
   <body>
     <div class="snapshot-container">
       <div class="snapshot-column-left">
-        <div class="section-header snapsection">
-          <label>Snapshots sucessfully saved!</label>
+        <div class="snapsection">
+          <label class="title">Snapshot successfully saved!</label>
         </div>
-        <div class="sub-section-header snapsection">
+        <hr />
+        <div class="snapsection">
           <div id="sharing">
             <div class="prompt">Would you like to share your pic in the Snapshots feed?</div>
             <div>
-              <input type="button" class="blue" id="share" value="SHARE IN FEED" onclick="shareSelected()"/>
+              <input type="button" class="blue" id="share" value="Share in Feed" onclick="shareSelected()"/>
             </div>
           </div>
           <div>
-            <input type="button" class="red" id="close" value="DON'T SHARE" onclick="doNotShare()"/>
+            <input type="button" class="black" id="close" value="Don't Share" onclick="doNotShare()"/>
           </div>
         </div>
-        <div class="sub-section-header snapsection">
-          <input type="button" value="Snapshot setttings" onclick="snapshotSettings()"/>
-          <span class="inline-checkbox property checkbox">
+        <hr />
+        <div class="snapsection">
+          <span class="setting">
+            <input type="button" class="glyph naked" id="snapshotSettings" value="@" onclick="snapshotSettings()" />
+            <label for="snapshotSettings">Snapshot settings</label>
+          </span>
+          <span class="setting checkbox">
             <input id="openFeed" type="checkbox" checked/>
             <label for="openFeed">Open feed after</label>
           </span>