From 3d2afaac77df4addd18d559cdd503b036ec21c0a Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 20 Aug 2016 11:19:30 +1200
Subject: [PATCH 1/4] Size and position snapshot dialog content blocks

---
 scripts/system/html/SnapshotReview.html | 36 +++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html
index 9b9403cf78..8d73e5295f 100644
--- a/scripts/system/html/SnapshotReview.html
+++ b/scripts/system/html/SnapshotReview.html
@@ -3,6 +3,41 @@
     <title>Share</title>
     <link rel="stylesheet" type="text/css" href="css/edit-style.css">
     <style type="text/css">
+
+        .snapshot-container {
+            width: 100%;
+        }
+
+        .snapshot-column-left {
+            width: 320px;
+            position: absolute;
+        }
+
+        .snapshot-column-right {
+            margin-left: 342px;
+        }
+      
+        .snapshot-column-right > div > img {
+            width: 100%;
+        }
+
+        @media (max-width: 768px) {
+            .snapshot-column-left {
+                position: initial;
+                width: 100%;
+            }
+            .snapshot-column-right {
+                margin-left: 0;
+                width: 100%;
+            }
+            .snapshot-column-right > div > img {
+                margin-top: 32px;
+            }
+        }
+
+    </style>
+    <!--
+      <style type="text/css">
       .snapshot-container{
         width:100%;
       }
@@ -54,6 +89,7 @@
       }
 
     </style>
+    -->
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
     <script>

From 6a9f221a9e231100048065a58050b3b5211e64e2 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 20 Aug 2016 11:36:53 +1200
Subject: [PATCH 2/4] Snapshot image border

---
 scripts/system/html/SnapshotReview.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html
index 8d73e5295f..4a690c0144 100644
--- a/scripts/system/html/SnapshotReview.html
+++ b/scripts/system/html/SnapshotReview.html
@@ -6,6 +6,7 @@
 
         .snapshot-container {
             width: 100%;
+            padding-top: 3px;
         }
 
         .snapshot-column-left {
@@ -31,10 +32,19 @@
                 width: 100%;
             }
             .snapshot-column-right > div > img {
-                margin-top: 32px;
+                margin-top: 32px !important;
             }
         }
 
+        .snapshot-column-right > div {
+            position: relative;
+            padding: 2px;
+        }
+
+        .snapshot-column-right > div > img {
+            border: 2px solid #575757;
+            margin: -2px;
+        }
     </style>
     <!--
       <style type="text/css">

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 3/4] 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>

From 8d88726dba9553836d91e14d0e1fd5a26b6cd083 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 20 Aug 2016 13:57:00 +1200
Subject: [PATCH 4/4] Fix spacing above image when single column

---
 scripts/system/html/SnapshotReview.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html
index 20bf726ee2..69fb5994dc 100644
--- a/scripts/system/html/SnapshotReview.html
+++ b/scripts/system/html/SnapshotReview.html
@@ -33,7 +33,7 @@
                 width: 100%;
             }
             .snapshot-column-right > div > img {
-                margin-top: 32px !important;
+                margin-top: 18px !important;
             }
         }