Update some typefaces; Add margins to pics

scripts/system/html/css/SnapshotReview.css

@@ -80,6 +80,8 @@ input[type=button].naked:active {
 
 #snapshot-images {
     width: 100%;
+    display: flex;
+    justify-content: center;
 }
 
 #snapshot-images img {
@@ -119,13 +121,13 @@ input[type=button].naked:active {
 .shareButtons {
     display: flex;
     align-items: center;
-    margin-left: 30px;
+    margin-left: 15px;
     height: 100%;
-    width: 80%;
+    width: 75%;
 }
 .blastToConnections {
     text-align: left;
-    margin-right: 25px;
+    margin-right: 20px;
     height: 29px;
 }
 .shareWithEveryone {
@@ -158,10 +160,11 @@ input[type=button].naked:active {
     font-family: Raleway-SemiBold;
     font-size: 14px;
     color: white;
-    text-shadow: 2px 2px 3px #000000;
     height: 100%;
     margin-right: 10px;
-    width: 20%;
+}
+.showShareButtonsButtonDiv > label {
+    text-shadow: 2px 2px 3px #000000;
 }
 .showShareButton {
     width: 40px;
@@ -193,23 +196,17 @@ input[type=button].naked:active {
     background-color: white;
 }
 .showShareButtonDots {
-    display: flex;
-    width: 32px;
+    display: block;
+    width: 40px;
     height: 40px;
+    font-family: HiFi-Glyphs;
+    font-size: 60px;
     position: absolute;
-    top: 5px;
-    right: 14px;
+    right: 20px;
+    bottom: 15px;
+    color: #00b4ef;
     pointer-events: none;
 }
-.showShareButtonDots > span {
-    width: 10px;
-    height: 10px;
-    margin: auto;
-    background-color: #0093C5;
-    border-radius: 50%;
-    border-width: 0;
-    display: inline;
-}
 /*
 // END styling of share overlay
 */

scripts/system/html/css/hifi-style.css

@@ -101,9 +101,11 @@ input[type=radio] {
   opacity: 0;
 }
 input[type=radio] + label{
-  display: inline-block;
-  margin-left: -2em;
-  line-height: 2em;
+    display: inline-block;
+    margin-left: -2em;
+    line-height: 2em;
+    font-family: Raleway-SemiBold;
+    font-size: 14px;
 }
 input[type=radio] + label > span{
   display: inline-block;
@@ -157,7 +159,6 @@ input[type=radio]:active + label > span > span{
     border-width: 0px;
     background-image: linear-gradient(#00B4EF, #1080B8);
     min-height: 30px;
-
 }
 .blueButton:hover {
     background-image: linear-gradient(#00B4EF, #00B4EF);

scripts/system/html/js/SnapshotReview.js

@@ -60,8 +60,9 @@ function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, b
     // imageContainer setup
     var imageContainer = document.createElement("DIV");
     imageContainer.id = id;
-    imageContainer.style.width = "100%";
-    imageContainer.style.height = "251px";
+    imageContainer.style.width = "95%";
+    imageContainer.style.height = "240px";
+    imageContainer.style.margin = "5px 0";
     imageContainer.style.display = "flex";
     imageContainer.style.justifyContent = "center";
     imageContainer.style.alignItems = "center";
@@ -118,7 +119,7 @@ function createShareBar(parentID, isGif, shareURL, blastButtonDisabled, hifiButt
             '<label id="' + showShareButtonsLabelID + '" for="' + showShareButtonsButtonID + '">SHARE</label>' +
             '<input type="button" class="showShareButton inactive" id="' + showShareButtonsButtonID + '" onclick="selectImageToShare(' + parentID + ', true)" />' +
             '<div class="showShareButtonDots">' +
-                '<span></span><span></span><span></span>' +
+                '&#xe019;' +
             '</div>' +
         '</div>';
 
@@ -231,7 +232,7 @@ function handleCaptureSetting(setting) {
 window.onload = function () {
     // Uncomment the line below to test functionality in a browser.
     // See definition of "testInBrowser()" to modify tests.
-    //testInBrowser(true);
+    testInBrowser(false);
     openEventBridge(function () {
         // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
         EventBridge.scriptEventReceived.connect(function (message) {