Bug 1451840 - Add button to Pocket doorhanger to request mobile app draft
authoranthony <anthony@getpocket.com>
Thu, 17 May 2018 14:12:02 -0700
changeset 796592 45a1cd78d8053f700ddb99d9c3975b755f3b8931
parent 796591 5c62178e2579aa72da14a37a7c9cd5c6f702b6a6
push id110296
push useranthonyliddle@gmail.com
push dateThu, 17 May 2018 21:13:52 +0000
bugs1451840
milestone62.0a1
Bug 1451840 - Add button to Pocket doorhanger to request mobile app - Specified default color on buttons - Removed unnecessary css styles - Resized icon display size - Made RTL friendly - Simplified SVGs - Updated buttons to be html buttons for screen readers MozReview-Commit-ID: HdTi1CZbXdc
browser/extensions/pocket/content/panels/css/saved.css
browser/extensions/pocket/content/panels/css/sendtomobile.css
browser/extensions/pocket/content/panels/img/app_store_dowload_apple.svg
browser/extensions/pocket/content/panels/js/saved.js
browser/extensions/pocket/content/panels/js/sendtomobile.js
browser/extensions/pocket/content/panels/js/tmpl.js
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v1.handlebars
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v2.handlebars
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v3.handlebars
browser/extensions/pocket/content/panels/tmpl/saved_shell.handlebars
browser/extensions/pocket/content/panels/tmpl/saved_tmplogin.handlebars
--- a/browser/extensions/pocket/content/panels/css/saved.css
+++ b/browser/extensions/pocket/content/panels/css/saved.css
@@ -474,17 +474,17 @@
 }
 .pkt_ext_containersaved .pkt_ext_suggestedtag_detailshown {
     padding: 4px 0;
 }
 .pkt_ext_container_finalstate .pkt_ext_suggestedtag_detail {
     opacity: 0;
     visibility: hidden;
 }
-.pkt_ext_containersaved,
+
 .pkt_ext_containersaved .pkt_ext_recenttag_detail h4,
 .pkt_ext_containersaved .pkt_ext_suggestedtag_detail h4 {
     color: #333;
     font-size: 13px;
     font-weight: normal;
     font-style: normal;
     letter-spacing: normal;
     margin: 0.5em 0;
@@ -820,83 +820,97 @@
 }
 .pkt_ext_saved_de .pkt_ext_btn,
 .pkt_ext_saved_ru .pkt_ext_btn {
     min-width: 6em;
 }
 
 /*=Coral Button
 --------------------------------------------------------------------------------------- */
+button {
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: 0;
+    outline: none;
+    color: inherit;
+    font: inherit;
+    overflow: visible;
+    user-select: none;
+}
+
 .pkt_ext_button {
     padding: 3px;
     background-color: #EF4056;
+    color: #FFF;
     text-align: center;
     cursor: pointer;
     height: 32px;
     box-sizing: border-box;
     width: 320px;
     margin: 0 auto;
     border-radius: 2px;
     font-size: 14px;
 }
 
 .pkt_ext_button:hover,
 .pkt_ext_button:active {
     background-color: #d5374b;
 }
 
-.pkt_ext_button:after {
-    clear: both;
-    content: '';
-    display: table;
-}
-
 /* alt button */
 .pkt_ext_blue_button {
     background-color: #0060df;
+    color: #FFF;
 }
 
 .pkt_ext_blue_button:hover {
     background-color: #003eaa;
 }
 
 .pkt_ext_blue_button:active {
     background-color: #002275;
 }
 
 .pkt_ext_ffx_icon:after {
     position: absolute;
-    height: 15px;
-    width: 15px;
-    top: 0;
-    left: -21px;
+    height: 22px;
+    width: 22px;
+    top: -3px;
+    left: -28px;
     content: "";
     background-image: url(../img/signup_firefoxlogo@2x.png);
-    background-size: 15px 15px;
+    background-size: 22px 22px;
     background-repeat: no-repeat;
 }
 
 
 /*=Tmp Account Login
 --------------------------------------------------------------------------------------- */
 .pkt_shaded_background {
     background-color: #EBEBEB;
     border-top: 1px solid #C3C3C3;
     padding: 0 15px;
 }
 
 .pkt_ext_saved_tmplogin {
     height: 146px;
 }
 
-.pkt_ext_indent_border_left {
+.pkt_ext_indent_bordered {
     margin: 15px 0;
-    padding-left: 7px;
+    padding: 0 7px;
     border-left: 4px solid rgba(68, 68, 68, .15);
+    text-align: left;
     font-size: 13px;
-    text-align: left;
     color: #313131;
 }
 
-.pkt_ext_indent_border_left p {
+[dir='rtl'] .pkt_ext_indent_bordered {
+  border-left: none;
+  border-right: 4px solid rgba(68, 68, 68, .15);
+  text-align: right;
+}
+
+.pkt_ext_indent_bordered > p {
     margin-bottom: 3px;
 }
 
--- a/browser/extensions/pocket/content/panels/css/sendtomobile.css
+++ b/browser/extensions/pocket/content/panels/css/sendtomobile.css
@@ -1,39 +1,32 @@
-.pkt_ext_containersaved .pkt_ext_saved_sendtomobile {
-    z-index: 1;
-}
-
 .pkt_ext_saved_sendtomobile .pkt_ext_loadingspinner {
     top: -5px;
 }
 
 .pkt_ext_saved_sendtomobile.pkt_ext_ho2_v1 .pkt_ext_loadingspinner {
     top: 110px;
 }
 
 .pkt_ext_save_title_wrapper {
     position: relative;
-    display: inline-block;
-    margin-top: 5px;
+    display: inline-flex;
 }
 
 .pkt_ext_save_title_wrapper.pkt_ext_mobile_icon:after {
     position: absolute;
     height: 15px;
     width: 10px;
     top: 0;
     left: -16px;
-    content: "";
-    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 10 15" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-714.000000, -291.000000)" fill="white"><g transform="translate(635.000000, 140.000000)"><g transform="translate(16.000000, 142.000000)"><g transform="translate(63.000000, 9.000000)"><path d="M0.81,0.407552083 L9.19,0.407552083 C9.63735065,0.407552083 10,0.770201436 10,1.21755208 L10,14.0233333 C10,14.470684 9.63735065,14.8333333 9.19,14.8333333 L0.81,14.8333333 C0.362649353,14.8333333 6.09896166e-16,14.470684 5.55111512e-16,14.0233333 L2.22044605e-16,1.21755208 C1.67259951e-16,0.770201436 0.362649353,0.407552083 0.81,0.407552083 Z M1,1.31865406 L1,12.074719 L9,12.074719 L9,1.31865406 L1,1.31865406 Z M3.68055556,13.1666667 C3.48879002,13.1666667 3.33333333,13.3221234 3.33333333,13.5138889 C3.33333333,13.7056544 3.48879002,13.8611111 3.68055556,13.8611111 L6.31944444,13.8611111 C6.51120998,13.8611111 6.66666667,13.7056544 6.66666667,13.5138889 C6.66666667,13.3221234 6.51120998,13.1666667 6.31944444,13.1666667 L3.68055556,13.1666667 Z"></path></g></g></g></g></g></svg>');
-    background-repeat: no-repeat;
+    content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 10 15" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="white" fill-rule="evenodd"><path d="M0.81,0.407552083 L9.19,0.407552083 C9.63735065,0.407552083 10,0.770201436 10,1.21755208 L10,14.0233333 C10,14.470684 9.63735065,14.8333333 9.19,14.8333333 L0.81,14.8333333 C0.362649353,14.8333333 6.09896166e-16,14.470684 5.55111512e-16,14.0233333 L2.22044605e-16,1.21755208 C1.67259951e-16,0.770201436 0.362649353,0.407552083 0.81,0.407552083 Z M1,1.31865406 L1,12.074719 L9,12.074719 L9,1.31865406 L1,1.31865406 Z M3.68055556,13.1666667 C3.48879002,13.1666667 3.33333333,13.3221234 3.33333333,13.5138889 C3.33333333,13.7056544 3.48879002,13.8611111 3.68055556,13.8611111 L6.31944444,13.8611111 C6.51120998,13.8611111 6.66666667,13.7056544 6.66666667,13.5138889 C6.66666667,13.3221234 6.51120998,13.1666667 6.31944444,13.1666667 L3.68055556,13.1666667 Z"></path></g></svg>');
 }
 
 .pkt_ext_logo_action_copy {
-    color: white;
+    display: inline-block;
     font-size: 13px;
 }
 
 .pkt_ext_checkbox_label {
     font-size: 11px;
     color: #999;
     cursor: pointer;
 }
@@ -70,17 +63,16 @@
     color: #666;
     font-weight: 400;
     width: 280px;
     margin: 0 auto;
     line-height: 20px;
 }
 
 .pkt_ext_bold {
-    color: #666;
     font-weight: bold;
 }
 
 .pkt_ext_download_section {
     margin-top: 28px;
 }
 
 .pkt_ext_download_button_wrapper {
@@ -196,25 +188,20 @@ a.pkt_ext_save_open:hover {
 .pkt_ext_ho2_experiment .pkt_ext_suggestedtag_detail,
 .pkt_ext_ho2_experiment .pkt_ext_suggestedtag_detailshown {
     position: relative;
     background-color: #fbfbfb;
     border-top: none;
 }
 
 /* Placeholder */
+.pkt_ext_experiment_saved_tile .pkt_ext_save_image.pkt_ext_save_image_placeholder,
 .pkt_ext_experiment_saved_tile.pkt_ext_has_image .pkt_ext_save_title.pkt_ext_title_image_placeholder .pkt_ext_save_open,
 .pkt_ext_experiment_saved_tile.pkt_ext_has_image .pkt_ext_save_title.pkt_ext_title_image_placeholder .pkt_ext_save_source {
     background: linear-gradient(to right, #EEE 0%, #DDD 50%, #EEE 100%);
     background-size: 400% 400%;
     animation: backgroundScroll 3s linear infinite;
 }
 
-.pkt_ext_experiment_saved_tile .pkt_ext_save_image.pkt_ext_save_image_placeholder {
-    background: linear-gradient(to right, #EEE 0%, #DDD 50%, #EEE 100%);
-    background-size: 400% 400%;
-    animation: backgroundScroll 3s linear infinite;
-}
-
 @keyframes backgroundScroll {
     0%  { background-position: -200% 0 }
     100%{ background-position: 200% 0 }
 }
--- a/browser/extensions/pocket/content/panels/img/app_store_dowload_apple.svg
+++ b/browser/extensions/pocket/content/panels/img/app_store_dowload_apple.svg
@@ -1,1 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="119.664" height="40" viewBox="0 0 119.66407 40"><path d="M110.135 0H9.535c-.367 0-.73 0-1.095.002-.306.002-.61.008-.919.013A13.215 13.215 0 0 0 5.517.19a6.665 6.665 0 0 0-1.9.627 6.438 6.438 0 0 0-1.62 1.18A6.258 6.258 0 0 0 .82 3.617a6.601 6.601 0 0 0-.625 1.903 12.993 12.993 0 0 0-.179 2.002c-.01.307-.01.615-.015.921V31.56c.005.31.006.61.015.921a12.992 12.992 0 0 0 .18 2.002 6.588 6.588 0 0 0 .624 1.905A6.208 6.208 0 0 0 1.998 38a6.274 6.274 0 0 0 1.618 1.179 6.7 6.7 0 0 0 1.901.63 13.455 13.455 0 0 0 2.004.177c.31.007.613.011.919.011.366.002.728.002 1.095.002h100.6c.36 0 .724 0 1.084-.002.304 0 .617-.004.922-.01a13.279 13.279 0 0 0 2-.178 6.804 6.804 0 0 0 1.908-.63A6.277 6.277 0 0 0 117.666 38a6.395 6.395 0 0 0 1.182-1.614 6.604 6.604 0 0 0 .619-1.905 13.506 13.506 0 0 0 .185-2.002c.004-.31.004-.61.004-.921.008-.364.008-.725.008-1.094V9.536c0-.366 0-.73-.008-1.092 0-.306 0-.614-.004-.92a13.507 13.507 0 0 0-.185-2.003 6.618 6.618 0 0 0-.62-1.903 6.466 6.466 0 0 0-2.798-2.8 6.768 6.768 0 0 0-1.908-.627 13.044 13.044 0 0 0-2-.176c-.305-.005-.618-.011-.922-.013-.36-.002-.725-.002-1.084-.002z" fill="#a6a6a6"/><path d="M8.445 39.125c-.305 0-.602-.004-.904-.01a12.687 12.687 0 0 1-1.87-.164 5.884 5.884 0 0 1-1.656-.548 5.406 5.406 0 0 1-1.397-1.016 5.32 5.32 0 0 1-1.02-1.397 5.722 5.722 0 0 1-.544-1.657 12.414 12.414 0 0 1-.166-1.875c-.007-.21-.015-.913-.015-.913v-23.1s.009-.692.015-.895a12.37 12.37 0 0 1 .165-1.872 5.755 5.755 0 0 1 .544-1.662 5.373 5.373 0 0 1 1.015-1.398 5.565 5.565 0 0 1 1.402-1.023 5.823 5.823 0 0 1 1.653-.544A12.586 12.586 0 0 1 7.543.887l.902-.012h102.769l.913.013a12.385 12.385 0 0 1 1.858.162 5.938 5.938 0 0 1 1.671.548 5.594 5.594 0 0 1 2.415 2.42 5.763 5.763 0 0 1 .535 1.649 12.995 12.995 0 0 1 .174 1.887c.003.283.003.588.003.89.008.375.008.732.008 1.092v20.929c0 .363 0 .718-.008 1.075 0 .325 0 .623-.004.93a12.731 12.731 0 0 1-.17 1.853 5.739 5.739 0 0 1-.54 1.67 5.48 5.48 0 0 1-1.016 1.386 5.413 5.413 0 0 1-1.4 1.022 5.862 5.862 0 0 1-1.668.55 12.542 12.542 0 0 1-1.869.163c-.293.007-.6.011-.897.011l-1.084.002z"/><g data-name="&lt;Group&gt;"><g data-name="&lt;Group&gt;" fill="#fff"><path data-name="&lt;Path&gt;" d="M24.769 20.3a4.949 4.949 0 0 1 2.356-4.151 5.066 5.066 0 0 0-3.99-2.158c-1.68-.176-3.308 1.005-4.164 1.005-.872 0-2.19-.988-3.608-.958a5.315 5.315 0 0 0-4.473 2.728c-1.934 3.348-.491 8.269 1.361 10.976.927 1.325 2.01 2.805 3.428 2.753 1.387-.058 1.905-.885 3.58-.885 1.658 0 2.144.885 3.59.852 1.489-.025 2.426-1.332 3.32-2.67a10.962 10.962 0 0 0 1.52-3.092 4.782 4.782 0 0 1-2.92-4.4zM22.037 12.21a4.872 4.872 0 0 0 1.115-3.49 4.957 4.957 0 0 0-3.208 1.66A4.636 4.636 0 0 0 18.8 13.74a4.1 4.1 0 0 0 3.237-1.53z"/></g><g fill="#fff"><path d="M42.302 27.14H37.57l-1.137 3.356h-2.005l4.484-12.418h2.083l4.483 12.418h-2.039zm-4.243-1.55h3.752l-1.85-5.446h-.051zM55.16 25.97c0 2.813-1.506 4.62-3.779 4.62a3.07 3.07 0 0 1-2.848-1.583h-.043v4.484H46.63V21.442h1.8v1.506h.033a3.212 3.212 0 0 1 2.883-1.6c2.298 0 3.813 1.816 3.813 4.622zm-1.91 0c0-1.833-.948-3.038-2.393-3.038-1.42 0-2.375 1.23-2.375 3.038 0 1.824.955 3.046 2.375 3.046 1.445 0 2.393-1.197 2.393-3.046zM65.125 25.97c0 2.813-1.506 4.62-3.779 4.62a3.07 3.07 0 0 1-2.848-1.583h-.043v4.484h-1.859V21.442h1.799v1.506h.034a3.212 3.212 0 0 1 2.883-1.6c2.298 0 3.813 1.816 3.813 4.622zm-1.91 0c0-1.833-.948-3.038-2.393-3.038-1.42 0-2.375 1.23-2.375 3.038 0 1.824.955 3.046 2.375 3.046 1.445 0 2.392-1.197 2.392-3.046zM71.71 27.036c.138 1.232 1.334 2.04 2.97 2.04 1.566 0 2.693-.808 2.693-1.919 0-.964-.68-1.54-2.29-1.936l-1.609-.388c-2.28-.55-3.339-1.617-3.339-3.348 0-2.142 1.867-3.614 4.519-3.614 2.624 0 4.423 1.472 4.483 3.614h-1.876c-.112-1.239-1.136-1.987-2.634-1.987s-2.521.757-2.521 1.858c0 .878.654 1.395 2.255 1.79l1.368.336c2.548.603 3.606 1.626 3.606 3.443 0 2.323-1.85 3.778-4.793 3.778-2.754 0-4.614-1.42-4.734-3.667zM83.346 19.3v2.142h1.722v1.472h-1.722v4.991c0 .776.345 1.137 1.102 1.137a5.808 5.808 0 0 0 .611-.043v1.463a5.104 5.104 0 0 1-1.032.086c-1.833 0-2.548-.689-2.548-2.445v-5.189h-1.316v-1.472h1.316V19.3zM86.065 25.97c0-2.849 1.678-4.639 4.294-4.639 2.625 0 4.295 1.79 4.295 4.639 0 2.856-1.661 4.638-4.295 4.638-2.633 0-4.294-1.782-4.294-4.638zm6.695 0c0-1.954-.895-3.108-2.401-3.108s-2.4 1.162-2.4 3.108c0 1.962.894 3.106 2.4 3.106s2.401-1.144 2.401-3.106zM96.186 21.442h1.773v1.541h.043a2.16 2.16 0 0 1 2.177-1.635 2.866 2.866 0 0 1 .637.069v1.738a2.598 2.598 0 0 0-.835-.112 1.873 1.873 0 0 0-1.937 2.083v5.37h-1.858zM109.384 27.837c-.25 1.643-1.85 2.771-3.898 2.771-2.634 0-4.269-1.764-4.269-4.595 0-2.84 1.644-4.682 4.19-4.682 2.506 0 4.08 1.72 4.08 4.466v.637h-6.394v.112a2.358 2.358 0 0 0 2.436 2.564 2.048 2.048 0 0 0 2.09-1.273zm-6.282-2.702h4.526a2.177 2.177 0 0 0-2.22-2.298 2.292 2.292 0 0 0-2.306 2.298z"/></g></g><g data-name="&lt;Group&gt;"><g fill="#fff"><path d="M37.826 8.731a2.64 2.64 0 0 1 2.808 2.965c0 1.906-1.03 3.002-2.808 3.002h-2.155V8.73zm-1.228 5.123h1.125a1.876 1.876 0 0 0 1.967-2.146 1.881 1.881 0 0 0-1.967-2.134h-1.125zM41.68 12.444a2.133 2.133 0 1 1 4.248 0 2.134 2.134 0 1 1-4.247 0zm3.334 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.434 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55zM51.573 14.698h-.922l-.93-3.317h-.07l-.927 3.317h-.913l-1.242-4.503h.902l.806 3.436h.067l.926-3.436h.852l.926 3.436h.07l.803-3.436h.889zM53.854 10.195h.855v.715h.066a1.348 1.348 0 0 1 1.344-.802 1.465 1.465 0 0 1 1.559 1.675v2.915h-.889v-2.692c0-.724-.314-1.084-.972-1.084a1.033 1.033 0 0 0-1.075 1.141v2.635h-.888zM59.094 8.437h.888v6.26h-.888zM61.218 12.444a2.133 2.133 0 1 1 4.247 0 2.134 2.134 0 1 1-4.247 0zm3.333 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.434 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55zM66.4 13.424c0-.81.604-1.278 1.676-1.344l1.22-.07v-.389c0-.475-.315-.744-.922-.744-.497 0-.84.182-.939.5h-.86c.09-.773.818-1.27 1.84-1.27 1.128 0 1.765.563 1.765 1.514v3.077h-.855v-.633h-.07a1.515 1.515 0 0 1-1.353.707 1.36 1.36 0 0 1-1.501-1.348zm2.895-.384v-.377l-1.1.07c-.62.042-.9.253-.9.65 0 .405.351.64.834.64a1.062 1.062 0 0 0 1.166-.983zM71.348 12.444c0-1.423.732-2.324 1.87-2.324a1.484 1.484 0 0 1 1.38.79h.067V8.437h.888v6.26h-.851v-.71h-.07a1.563 1.563 0 0 1-1.415.785c-1.145 0-1.869-.901-1.869-2.328zm.918 0c0 .955.45 1.53 1.203 1.53.75 0 1.212-.583 1.212-1.526 0-.938-.468-1.53-1.212-1.53-.748 0-1.203.58-1.203 1.526zM79.23 12.444a2.133 2.133 0 1 1 4.247 0 2.134 2.134 0 1 1-4.247 0zm3.333 0c0-.976-.438-1.547-1.208-1.547-.772 0-1.207.571-1.207 1.547 0 .984.435 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55zM84.67 10.195h.855v.715h.066a1.348 1.348 0 0 1 1.344-.802 1.465 1.465 0 0 1 1.559 1.675v2.915h-.889v-2.692c0-.724-.314-1.084-.972-1.084a1.033 1.033 0 0 0-1.075 1.141v2.635h-.889zM93.515 9.074v1.141h.976v.749h-.976v2.315c0 .472.194.679.637.679a2.967 2.967 0 0 0 .339-.021v.74a2.916 2.916 0 0 1-.484.046c-.988 0-1.381-.348-1.381-1.216v-2.543h-.715v-.749h.715V9.074zM95.705 8.437h.88v2.481h.07a1.386 1.386 0 0 1 1.374-.806 1.483 1.483 0 0 1 1.55 1.679v2.907h-.889V12.01c0-.72-.335-1.084-.963-1.084a1.052 1.052 0 0 0-1.134 1.142v2.63h-.888zM104.761 13.482a1.828 1.828 0 0 1-1.95 1.303 2.045 2.045 0 0 1-2.081-2.325 2.077 2.077 0 0 1 2.076-2.352c1.253 0 2.009.856 2.009 2.27v.31h-3.18v.05a1.19 1.19 0 0 0 1.2 1.29 1.08 1.08 0 0 0 1.07-.546zm-3.126-1.451h2.275a1.086 1.086 0 0 0-1.109-1.167 1.152 1.152 0 0 0-1.166 1.167z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="119.664" height="40" viewBox="0 0 119.66407 40">
+    <path d="M110.135 0H9.535c-.367 0-.73 0-1.095.002-.306.002-.61.008-.919.013A13.215 13.215 0 0 0 5.517.19a6.665 6.665 0 0 0-1.9.627 6.438 6.438 0 0 0-1.62 1.18A6.258 6.258 0 0 0 .82 3.617a6.601 6.601 0 0 0-.625 1.903 12.993 12.993 0 0 0-.179 2.002c-.01.307-.01.615-.015.921V31.56c.005.31.006.61.015.921a12.992 12.992 0 0 0 .18 2.002 6.588 6.588 0 0 0 .624 1.905A6.208 6.208 0 0 0 1.998 38a6.274 6.274 0 0 0 1.618 1.179 6.7 6.7 0 0 0 1.901.63 13.455 13.455 0 0 0 2.004.177c.31.007.613.011.919.011.366.002.728.002 1.095.002h100.6c.36 0 .724 0 1.084-.002.304 0 .617-.004.922-.01a13.279 13.279 0 0 0 2-.178 6.804 6.804 0 0 0 1.908-.63A6.277 6.277 0 0 0 117.666 38a6.395 6.395 0 0 0 1.182-1.614 6.604 6.604 0 0 0 .619-1.905 13.506 13.506 0 0 0 .185-2.002c.004-.31.004-.61.004-.921.008-.364.008-.725.008-1.094V9.536c0-.366 0-.73-.008-1.092 0-.306 0-.614-.004-.92a13.507 13.507 0 0 0-.185-2.003 6.618 6.618 0 0 0-.62-1.903 6.466 6.466 0 0 0-2.798-2.8 6.768 6.768 0 0 0-1.908-.627 13.044 13.044 0 0 0-2-.176c-.305-.005-.618-.011-.922-.013-.36-.002-.725-.002-1.084-.002z" fill="#a6a6a6" />
+    <path d="M8.445 39.125c-.305 0-.602-.004-.904-.01a12.687 12.687 0 0 1-1.87-.164 5.884 5.884 0 0 1-1.656-.548 5.406 5.406 0 0 1-1.397-1.016 5.32 5.32 0 0 1-1.02-1.397 5.722 5.722 0 0 1-.544-1.657 12.414 12.414 0 0 1-.166-1.875c-.007-.21-.015-.913-.015-.913v-23.1s.009-.692.015-.895a12.37 12.37 0 0 1 .165-1.872 5.755 5.755 0 0 1 .544-1.662 5.373 5.373 0 0 1 1.015-1.398 5.565 5.565 0 0 1 1.402-1.023 5.823 5.823 0 0 1 1.653-.544A12.586 12.586 0 0 1 7.543.887l.902-.012h102.769l.913.013a12.385 12.385 0 0 1 1.858.162 5.938 5.938 0 0 1 1.671.548 5.594 5.594 0 0 1 2.415 2.42 5.763 5.763 0 0 1 .535 1.649 12.995 12.995 0 0 1 .174 1.887c.003.283.003.588.003.89.008.375.008.732.008 1.092v20.929c0 .363 0 .718-.008 1.075 0 .325 0 .623-.004.93a12.731 12.731 0 0 1-.17 1.853 5.739 5.739 0 0 1-.54 1.67 5.48 5.48 0 0 1-1.016 1.386 5.413 5.413 0 0 1-1.4 1.022 5.862 5.862 0 0 1-1.668.55 12.542 12.542 0 0 1-1.869.163c-.293.007-.6.011-.897.011l-1.084.002z" />
+    <path fill="#fff" d="M24.769 20.3a4.949 4.949 0 0 1 2.356-4.151 5.066 5.066 0 0 0-3.99-2.158c-1.68-.176-3.308 1.005-4.164 1.005-.872 0-2.19-.988-3.608-.958a5.315 5.315 0 0 0-4.473 2.728c-1.934 3.348-.491 8.269 1.361 10.976.927 1.325 2.01 2.805 3.428 2.753 1.387-.058 1.905-.885 3.58-.885 1.658 0 2.144.885 3.59.852 1.489-.025 2.426-1.332 3.32-2.67a10.962 10.962 0 0 0 1.52-3.092 4.782 4.782 0 0 1-2.92-4.4zM22.037 12.21a4.872 4.872 0 0 0 1.115-3.49 4.957 4.957 0 0 0-3.208 1.66A4.636 4.636 0 0 0 18.8 13.74a4.1 4.1 0 0 0 3.237-1.53z" />
+    <path fill="#fff" d="M42.302 27.14H37.57l-1.137 3.356h-2.005l4.484-12.418h2.083l4.483 12.418h-2.039zm-4.243-1.55h3.752l-1.85-5.446h-.051zM55.16 25.97c0 2.813-1.506 4.62-3.779 4.62a3.07 3.07 0 0 1-2.848-1.583h-.043v4.484H46.63V21.442h1.8v1.506h.033a3.212 3.212 0 0 1 2.883-1.6c2.298 0 3.813 1.816 3.813 4.622zm-1.91 0c0-1.833-.948-3.038-2.393-3.038-1.42 0-2.375 1.23-2.375 3.038 0 1.824.955 3.046 2.375 3.046 1.445 0 2.393-1.197 2.393-3.046zM65.125 25.97c0 2.813-1.506 4.62-3.779 4.62a3.07 3.07 0 0 1-2.848-1.583h-.043v4.484h-1.859V21.442h1.799v1.506h.034a3.212 3.212 0 0 1 2.883-1.6c2.298 0 3.813 1.816 3.813 4.622zm-1.91 0c0-1.833-.948-3.038-2.393-3.038-1.42 0-2.375 1.23-2.375 3.038 0 1.824.955 3.046 2.375 3.046 1.445 0 2.392-1.197 2.392-3.046zM71.71 27.036c.138 1.232 1.334 2.04 2.97 2.04 1.566 0 2.693-.808 2.693-1.919 0-.964-.68-1.54-2.29-1.936l-1.609-.388c-2.28-.55-3.339-1.617-3.339-3.348 0-2.142 1.867-3.614 4.519-3.614 2.624 0 4.423 1.472 4.483 3.614h-1.876c-.112-1.239-1.136-1.987-2.634-1.987s-2.521.757-2.521 1.858c0 .878.654 1.395 2.255 1.79l1.368.336c2.548.603 3.606 1.626 3.606 3.443 0 2.323-1.85 3.778-4.793 3.778-2.754 0-4.614-1.42-4.734-3.667zM83.346 19.3v2.142h1.722v1.472h-1.722v4.991c0 .776.345 1.137 1.102 1.137a5.808 5.808 0 0 0 .611-.043v1.463a5.104 5.104 0 0 1-1.032.086c-1.833 0-2.548-.689-2.548-2.445v-5.189h-1.316v-1.472h1.316V19.3zM86.065 25.97c0-2.849 1.678-4.639 4.294-4.639 2.625 0 4.295 1.79 4.295 4.639 0 2.856-1.661 4.638-4.295 4.638-2.633 0-4.294-1.782-4.294-4.638zm6.695 0c0-1.954-.895-3.108-2.401-3.108s-2.4 1.162-2.4 3.108c0 1.962.894 3.106 2.4 3.106s2.401-1.144 2.401-3.106zM96.186 21.442h1.773v1.541h.043a2.16 2.16 0 0 1 2.177-1.635 2.866 2.866 0 0 1 .637.069v1.738a2.598 2.598 0 0 0-.835-.112 1.873 1.873 0 0 0-1.937 2.083v5.37h-1.858zM109.384 27.837c-.25 1.643-1.85 2.771-3.898 2.771-2.634 0-4.269-1.764-4.269-4.595 0-2.84 1.644-4.682 4.19-4.682 2.506 0 4.08 1.72 4.08 4.466v.637h-6.394v.112a2.358 2.358 0 0 0 2.436 2.564 2.048 2.048 0 0 0 2.09-1.273zm-6.282-2.702h4.526a2.177 2.177 0 0 0-2.22-2.298 2.292 2.292 0 0 0-2.306 2.298z" />
+    <path fill="#fff" d="M37.826 8.731a2.64 2.64 0 0 1 2.808 2.965c0 1.906-1.03 3.002-2.808 3.002h-2.155V8.73zm-1.228 5.123h1.125a1.876 1.876 0 0 0 1.967-2.146 1.881 1.881 0 0 0-1.967-2.134h-1.125zM41.68 12.444a2.133 2.133 0 1 1 4.248 0 2.134 2.134 0 1 1-4.247 0zm3.334 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.434 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55zM51.573 14.698h-.922l-.93-3.317h-.07l-.927 3.317h-.913l-1.242-4.503h.902l.806 3.436h.067l.926-3.436h.852l.926 3.436h.07l.803-3.436h.889zM53.854 10.195h.855v.715h.066a1.348 1.348 0 0 1 1.344-.802 1.465 1.465 0 0 1 1.559 1.675v2.915h-.889v-2.692c0-.724-.314-1.084-.972-1.084a1.033 1.033 0 0 0-1.075 1.141v2.635h-.888zM59.094 8.437h.888v6.26h-.888zM61.218 12.444a2.133 2.133 0 1 1 4.247 0 2.134 2.134 0 1 1-4.247 0zm3.333 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.434 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55zM66.4 13.424c0-.81.604-1.278 1.676-1.344l1.22-.07v-.389c0-.475-.315-.744-.922-.744-.497 0-.84.182-.939.5h-.86c.09-.773.818-1.27 1.84-1.27 1.128 0 1.765.563 1.765 1.514v3.077h-.855v-.633h-.07a1.515 1.515 0 0 1-1.353.707 1.36 1.36 0 0 1-1.501-1.348zm2.895-.384v-.377l-1.1.07c-.62.042-.9.253-.9.65 0 .405.351.64.834.64a1.062 1.062 0 0 0 1.166-.983zM71.348 12.444c0-1.423.732-2.324 1.87-2.324a1.484 1.484 0 0 1 1.38.79h.067V8.437h.888v6.26h-.851v-.71h-.07a1.563 1.563 0 0 1-1.415.785c-1.145 0-1.869-.901-1.869-2.328zm.918 0c0 .955.45 1.53 1.203 1.53.75 0 1.212-.583 1.212-1.526 0-.938-.468-1.53-1.212-1.53-.748 0-1.203.58-1.203 1.526zM79.23 12.444a2.133 2.133 0 1 1 4.247 0 2.134 2.134 0 1 1-4.247 0zm3.333 0c0-.976-.438-1.547-1.208-1.547-.772 0-1.207.571-1.207 1.547 0 .984.435 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55zM84.67 10.195h.855v.715h.066a1.348 1.348 0 0 1 1.344-.802 1.465 1.465 0 0 1 1.559 1.675v2.915h-.889v-2.692c0-.724-.314-1.084-.972-1.084a1.033 1.033 0 0 0-1.075 1.141v2.635h-.889zM93.515 9.074v1.141h.976v.749h-.976v2.315c0 .472.194.679.637.679a2.967 2.967 0 0 0 .339-.021v.74a2.916 2.916 0 0 1-.484.046c-.988 0-1.381-.348-1.381-1.216v-2.543h-.715v-.749h.715V9.074zM95.705 8.437h.88v2.481h.07a1.386 1.386 0 0 1 1.374-.806 1.483 1.483 0 0 1 1.55 1.679v2.907h-.889V12.01c0-.72-.335-1.084-.963-1.084a1.052 1.052 0 0 0-1.134 1.142v2.63h-.888zM104.761 13.482a1.828 1.828 0 0 1-1.95 1.303 2.045 2.045 0 0 1-2.081-2.325 2.077 2.077 0 0 1 2.076-2.352c1.253 0 2.009.856 2.009 2.27v.31h-3.18v.05a1.19 1.19 0 0 0 1.2 1.29 1.08 1.08 0 0 0 1.07-.546zm-3.126-1.451h2.275a1.086 1.086 0 0 0-1.109-1.167 1.152 1.152 0 0 0-1.166 1.167z" />
+</svg>
--- a/browser/extensions/pocket/content/panels/js/saved.js
+++ b/browser/extensions/pocket/content/panels/js/saved.js
@@ -377,19 +377,19 @@ var PKT_SAVED_OVERLAY = function(options
         this.wrapper.find(".pkt_ext_detail h2").text(this.dictJSON.pagesaved);
         this.wrapper.find(".pkt_ext_btn").addClass("pkt_ext_btn_disabled");
         if (typeof initobj.item == "object") {
             this.savedItemId = initobj.item.item_id;
             this.savedUrl = initobj.item.given_url;
         }
         $(".pkt_ext_containersaved").addClass("pkt_ext_container_detailactive").removeClass("pkt_ext_container_finalstate");
 
-        if (initobj.ho2 && initobj.ho2 !== 'control'
+        if (initobj.ho2 && initobj.ho2 != 'control'
             && !initobj.accountState.has_mobile
-            && myself.savedUrl.indexOf('getpocket.com') === -1) {
+            && myself.savedUrl.indexOf('getpocket.com') == -1) {
             myself.createSendToMobilePanel(initobj.ho2, initobj.displayName);
             myself.freezeHeight = true;
         }
 
         myself.fillUserTags();
         if (myself.suggestedTagsLoaded) {
             myself.startCloseTimer();
         } else {
--- a/browser/extensions/pocket/content/panels/js/sendtomobile.js
+++ b/browser/extensions/pocket/content/panels/js/sendtomobile.js
@@ -27,68 +27,67 @@ var PKT_SENDTOMOBILE = (function() {
         $('#pkt_ext_swap').replaceWith(Handlebars.templates.ho2_articleinfo(info));
     }
 
     function _initPanelOneClicks() {
         $('#pkt_ext_sendtomobile_button').click(function() {
             $('#pkt_ext_sendtomobile_button').replaceWith('<div class="pkt_ext_loadingspinner"><div></div></div>');
 
             thePKT_SAVED.sendMessage('getMobileDownload', {}, function(data) {
-                if (data.status === 1) {
+                if (data.status == 1) {
                     $('body').html(Handlebars.templates.ho2_download({email}));
                     thePKT_SAVED.sendMessage('resizePanel', { width: width, height: confirmHeight });
                 }
                 else {
                     $('body').html(Handlebars.templates.ho2_download_error({email}));
                     thePKT_SAVED.sendMessage('resizePanel', { width: width, height: confirmHeight });
                 }
             });
         });
     }
 
     function create(ho2, displayName, adjustHeight) {
         email = displayName;
         $('body').addClass('pkt_ext_ho2_experiment');
         var height = (adjustHeight) ? premDetailsHeight : 0;
 
-        if (ho2 === 'show_prompt_preview') {
+        if (ho2 == 'show_prompt_preview') {
             height += variant1Height;
             $('body').append(Handlebars.templates.ho2_sharebutton_v1());
             thePKT_SAVED.sendMessage('resizePanel', { width, height });
             thePKT_SAVED.sendMessage('getArticleInfo', {}, function(data) {
                 _swapPlaceholder(data);
             });
         }
-        else if (ho2 === 'show_prompt_no_preview') {
+        else if (ho2 == 'show_prompt_no_preview') {
             height += variant2Height;
             $('body').append(Handlebars.templates.ho2_sharebutton_v2());
             thePKT_SAVED.sendMessage('resizePanel', { width, height });
         }
-        else if (ho2 === 'show_prompt_get_app') {
+        else if (ho2 == 'show_prompt_get_app') {
             height += variant2Height;
             $('body').append(Handlebars.templates.ho2_sharebutton_v3());
             thePKT_SAVED.sendMessage('resizePanel', { width, height });
         }
 
         _initPanelOneClicks();
     }
 
     /**
      * Public functions
      */
     return {
-        create
+        create,
     };
 }());
 
 
 /**
  * This function is based on getImageCacheUrl in:
- * https://github.com/Pocket/Web/blob/master/public_html/stats/2016/scripts/utilities.js
- * It uses the /direct endpoint to avoid a dependency on md5().
+ * https://github.com/Pocket/Web/blob/master/public_html/a/j/shared.js
  */
 function getImageCacheUrl(url, resize, fallback) {
     if (!url)
         return;
     // The full URL should be included in the get parameters such that the image cache can request it.
     var query = {
         'url': url,
     };
--- a/browser/extensions/pocket/content/panels/js/tmpl.js
+++ b/browser/extensions/pocket/content/panels/js/tmpl.js
@@ -29,23 +29,23 @@ templates['ho2_download'] = template({"c
   return "<div class=\"pkt_ext_detail pkt_ext_saved_sendcollectemail\">\n    <h3 class=\"pkt_ext_heading\">Check your inbox</h3>\n    <p class=\"pkt_ext_description\">We’ve sent an email to <span class=\"pkt_ext_bold\">"
     + this.escapeExpression(((helper = (helper = helpers.email || (depth0 != null ? depth0.email : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0,{"name":"email","hash":{},"data":data}) : helper)))
     + "</span> with a link to install the Pocket app, where your article will be waiting for you.</p>\n\n    <div class=\"pkt_ext_download_section\">\n        <p class=\"pkt_ext_description\">You can also get it on the App Store here:</p>\n\n        <div class=\"pkt_ext_download_button_wrapper\">\n            <a href=\"https://getpocket.com/apps/link/pocket-iphone/?s=fx_save_hanger\" target=\"_blank\" ><div class=\"pkt_ext_apple_download\"></div></a>\n            <a href=\"https://getpocket.com/apps/link/pocket-android/?s=fx_save_hanger\" target=\"_blank\" ><img class=\"pkt_ext_google_download\" alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>\n        </div>\n    </div>\n</div>\n";
 },"useData":true});
 templates['ho2_download_error'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
     return "<div class=\"pkt_ext_detail pkt_ext_saved_sendcollectemail\">\n    <h3 class=\"pkt_ext_heading\">There was a problem</h3>\n    <p class=\"pkt_ext_description\">Email failed to send, please try again later</p>\n\n    <div class=\"pkt_ext_download_section\">\n        <p class=\"pkt_ext_description\">You can also get the Pocket app on the App Store here:</p>\n\n        <div class=\"pkt_ext_download_button_wrapper\">\n            <a href=\"https://getpocket.com/apps/link/pocket-iphone/?s=fx_save_hanger\" target=\"_blank\" ><div class=\"pkt_ext_apple_download\"></div></a>\n            <a href=\"https://getpocket.com/apps/link/pocket-android/?s=fx_save_hanger\" target=\"_blank\" ><img class=\"pkt_ext_google_download\" alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>\n        </div>\n    </div>\n</div>\n";
 },"useData":true});
 templates['ho2_sharebutton_v1'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-    return "<div class=\"pkt_ext_detail pkt_ext_saved_sendtomobile pkt_ext_ho2_v1\">\n    <div id=\"pkt_ext_articleinfo\">\n        <div id=\"pkt_ext_swap\" class=\"pkt_ext_experiment_saved_tile pkt_ext_has_image pkt_ext_cf\">\n            <div class=\"pkt_ext_save_image pkt_ext_save_image_placeholder\"></div>\n\n            <div class=\"pkt_ext_save_title pkt_ext_title_image_placeholder\">\n                <div class=\"pkt_ext_save_open\"> </div>\n                <div class=\"pkt_ext_save_source\"> </div>\n            </div>\n        </div>\n    </div>\n\n    <div id=\"pkt_ext_sendtomobile_button\" class=\"pkt_ext_button\">\n        <div class=\"pkt_ext_save_title_wrapper pkt_ext_mobile_icon\">\n            <div class=\"pkt_ext_logo_action_copy\">Send to your phone</div>\n        </div>\n    </div>\n</div>\n";
+    return "<div class=\"pkt_ext_detail pkt_ext_saved_sendtomobile pkt_ext_ho2_v1\">\n    <div id=\"pkt_ext_articleinfo\">\n        <div id=\"pkt_ext_swap\" class=\"pkt_ext_experiment_saved_tile pkt_ext_has_image pkt_ext_cf\">\n            <div class=\"pkt_ext_save_image pkt_ext_save_image_placeholder\"></div>\n\n            <div class=\"pkt_ext_save_title pkt_ext_title_image_placeholder\">\n                <div class=\"pkt_ext_save_open\"> </div>\n                <div class=\"pkt_ext_save_source\"> </div>\n            </div>\n        </div>\n    </div>\n\n    <button id=\"pkt_ext_sendtomobile_button\" class=\"pkt_ext_button\">\n        <span class=\"pkt_ext_save_title_wrapper pkt_ext_mobile_icon\">\n            <span class=\"pkt_ext_logo_action_copy\">Send to your phone</span>\n        </span>\n    </button>\n</div>\n";
 },"useData":true});
 templates['ho2_sharebutton_v2'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-    return "<div class=\"pkt_ext_detail pkt_ext_saved_sendtomobile\">\n    <div id=\"pkt_ext_sendtomobile_button\" class=\"pkt_ext_button\">\n        <div class=\"pkt_ext_save_title_wrapper pkt_ext_mobile_icon\">\n            <div class=\"pkt_ext_logo_action_copy\">Send to your phone</div>\n        </div>\n    </div>\n</div>\n";
+    return "<div class=\"pkt_ext_detail pkt_ext_saved_sendtomobile\">\n    <button id=\"pkt_ext_sendtomobile_button\" class=\"pkt_ext_button\">\n        <span class=\"pkt_ext_save_title_wrapper pkt_ext_mobile_icon\">\n            <span class=\"pkt_ext_logo_action_copy\">Send to your phone</span>\n        </span>\n    </button>\n</div>\n";
 },"useData":true});
 templates['ho2_sharebutton_v3'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-    return "<div class=\"pkt_ext_detail pkt_ext_saved_sendtomobile\">\n    <div id=\"pkt_ext_sendtomobile_button\" class=\"pkt_ext_button\">\n        <div class=\"pkt_ext_save_title_wrapper pkt_ext_mobile_icon\">\n            <div class=\"pkt_ext_logo_action_copy\">Get the Pocket Mobile App</div>\n        </div>\n    </div>\n</div>\n";
+    return "<div class=\"pkt_ext_detail pkt_ext_saved_sendtomobile\">\n    <button id=\"pkt_ext_sendtomobile_button\" class=\"pkt_ext_button\">\n        <span class=\"pkt_ext_save_title_wrapper pkt_ext_mobile_icon\">\n            <span class=\"pkt_ext_logo_action_copy\">Get the Pocket Mobile App</span>\n        </span>\n    </button>\n</div>\n";
 },"useData":true});
 templates['saved_premiumextras'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
     return "<div class=\"pkt_ext_suggestedtag_detailshown\">\r\n</div> ";
 },"useData":true});
 templates['saved_premiumshell'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
     var helper;
 
   return "<div class=\"pkt_ext_suggestedtag_detail pkt_ext_suggestedtag_detail_loading\">\n    <h4>"
@@ -67,23 +67,23 @@ templates['saved_shell'] = template({"co
     + alias3(((helper = (helper = helpers.viewlist || (depth0 != null ? depth0.viewlist : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"viewlist","hash":{},"data":data}) : helper)))
     + "</a></li>\n            </ul>\n        </nav>\n    </div>\n    <div class=\"pkt_ext_tag_detail pkt_ext_cf\">\n        <div class=\"pkt_ext_tag_input_wrapper\">\n            <div class=\"pkt_ext_tag_input_blocker\"></div>\n            <input class=\"pkt_ext_tag_input\" type=\"text\" placeholder=\""
     + alias3(((helper = (helper = helpers.addtags || (depth0 != null ? depth0.addtags : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"addtags","hash":{},"data":data}) : helper)))
     + "\">\n        </div>\n        <a href=\"#\" class=\"pkt_ext_btn pkt_ext_btn_disabled\">"
     + alias3(((helper = (helper = helpers.save || (depth0 != null ? depth0.save : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"save","hash":{},"data":data}) : helper)))
     + "</a>\n    </div>\n    <p class=\"pkt_ext_edit_msg\"></p>\n</div>\n";
 },"useData":true});
 templates['saved_tmplogin'] = template({"1":function(depth0,helpers,partials,data) {
-    return "        <div id=\"pkt_ext_tmp_account_signup\" class=\"pkt_ext_button pkt_ext_blue_button\">\n            <div class=\"pkt_ext_save_title_wrapper pkt_ext_ffx_icon\">\n                <div class=\"pkt_ext_logo_action_copy\">Login with Firefox</div>\n            </div>\n        </div>\n";
+    return "        <button id=\"pkt_ext_tmp_account_signup\" class=\"pkt_ext_button pkt_ext_blue_button\">\n            <span class=\"pkt_ext_save_title_wrapper pkt_ext_ffx_icon\">\n                <span class=\"pkt_ext_logo_action_copy\">Login with Firefox</span>\n            </span>\n        </button>\n";
 },"3":function(depth0,helpers,partials,data) {
-    return "        <div id=\"pkt_ext_tmp_account_signup\" class=\"pkt_ext_button\">\n            <div class=\"pkt_ext_save_title_wrapper\">\n                <div class=\"pkt_ext_logo_action_copy\">Sign up</div>\n            </div>\n        </div>\n";
+    return "        <button id=\"pkt_ext_tmp_account_signup\" class=\"pkt_ext_button\">\n            <span class=\"pkt_ext_save_title_wrapper\">\n                <span class=\"pkt_ext_logo_action_copy\">Sign up</span>\n            </span>\n        </button>\n";
 },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
     var stack1;
 
-  return "<div class=\"pkt_ext_detail pkt_ext_saved_tmplogin pkt_shaded_background\">\n    <div class=\"pkt_ext_indent_border_left\">\n        <p>You are using Pocket without an account.<br />Sign up to back up your saved items.</p>\n        <p><a href=\"https://help.getpocket.com/article/1129-using-pocket-without-an-account-in-firefox?s=ghost_upsell\" target=\"_blank\">Learn more</a>\n    </div>\n\n"
+  return "<div class=\"pkt_ext_detail pkt_ext_saved_tmplogin pkt_shaded_background\">\n    <div class=\"pkt_ext_indent_bordered\">\n        <p>You are using Pocket without an account.<br />Sign up to back up your saved items.</p>\n        <p><a href=\"https://help.getpocket.com/article/1129-using-pocket-without-an-account-in-firefox?s=ghost_upsell\" target=\"_blank\">Learn more</a></p>\n    </div>\n\n"
     + ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.fxasignedin : depth0),{"name":"if","hash":{},"fn":this.program(1, data, 0),"inverse":this.program(3, data, 0),"data":data})) != null ? stack1 : "")
     + "</div>\n";
 },"useData":true});
 templates['signup_shell'] = template({"1":function(depth0,helpers,partials,data) {
     var stack1;
 
   return ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.controlvariant : depth0),{"name":"if","hash":{},"fn":this.program(2, data, 0),"inverse":this.program(4, data, 0),"data":data})) != null ? stack1 : "");
 },"2":function(depth0,helpers,partials,data) {
--- a/browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v1.handlebars
+++ b/browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v1.handlebars
@@ -5,14 +5,14 @@
 
             <div class="pkt_ext_save_title pkt_ext_title_image_placeholder">
                 <div class="pkt_ext_save_open"> </div>
                 <div class="pkt_ext_save_source"> </div>
             </div>
         </div>
     </div>
 
-    <div id="pkt_ext_sendtomobile_button" class="pkt_ext_button">
-        <div class="pkt_ext_save_title_wrapper pkt_ext_mobile_icon">
-            <div class="pkt_ext_logo_action_copy">Send to your phone</div>
-        </div>
-    </div>
+    <button id="pkt_ext_sendtomobile_button" class="pkt_ext_button">
+        <span class="pkt_ext_save_title_wrapper pkt_ext_mobile_icon">
+            <span class="pkt_ext_logo_action_copy">Send to your phone</span>
+        </span>
+    </button>
 </div>
--- a/browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v2.handlebars
+++ b/browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v2.handlebars
@@ -1,7 +1,7 @@
 <div class="pkt_ext_detail pkt_ext_saved_sendtomobile">
-    <div id="pkt_ext_sendtomobile_button" class="pkt_ext_button">
-        <div class="pkt_ext_save_title_wrapper pkt_ext_mobile_icon">
-            <div class="pkt_ext_logo_action_copy">Send to your phone</div>
-        </div>
-    </div>
+    <button id="pkt_ext_sendtomobile_button" class="pkt_ext_button">
+        <span class="pkt_ext_save_title_wrapper pkt_ext_mobile_icon">
+            <span class="pkt_ext_logo_action_copy">Send to your phone</span>
+        </span>
+    </button>
 </div>
--- a/browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v3.handlebars
+++ b/browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v3.handlebars
@@ -1,7 +1,7 @@
 <div class="pkt_ext_detail pkt_ext_saved_sendtomobile">
-    <div id="pkt_ext_sendtomobile_button" class="pkt_ext_button">
-        <div class="pkt_ext_save_title_wrapper pkt_ext_mobile_icon">
-            <div class="pkt_ext_logo_action_copy">Get the Pocket Mobile App</div>
-        </div>
-    </div>
+    <button id="pkt_ext_sendtomobile_button" class="pkt_ext_button">
+        <span class="pkt_ext_save_title_wrapper pkt_ext_mobile_icon">
+            <span class="pkt_ext_logo_action_copy">Get the Pocket Mobile App</span>
+        </span>
+    </button>
 </div>
--- a/browser/extensions/pocket/content/panels/tmpl/saved_shell.handlebars
+++ b/browser/extensions/pocket/content/panels/tmpl/saved_shell.handlebars
@@ -1,29 +1,29 @@
 <div class="pkt_ext_initload">
-    <div class="pkt_ext_logo"></div> 
+    <div class="pkt_ext_logo"></div>
     <div class="pkt_ext_topdetail">
         <h2>{{saving}}</h2>
-    </div> 
+    </div>
     <div class="pkt_ext_loadingspinner"><div></div></div>
-</div>                                      
-<div class="pkt_ext_detail">                        
+</div>
+<div class="pkt_ext_detail">
     <div class="pkt_ext_logo"></div>
     <div class="pkt_ext_topdetail">
         <h2>{{pagesaved}}</h2>
         <h3 class="pkt_ext_errordetail"></h3>
         <nav class="pkt_ext_item_actions pkt_ext_cf">
             <ul>
                 <li><a class="pkt_ext_removeitem" href="#">{{removepage}}</a></li>
-                <li class="pkt_ext_actions_separator"></li>                                
+                <li class="pkt_ext_actions_separator"></li>
                 <li><a class="pkt_ext_openpocket" href="https://{{pockethost}}/a?src=ff_ext_saved" target="_blank">{{viewlist}}</a></li>
             </ul>
-        </nav>                        
+        </nav>
     </div>
     <div class="pkt_ext_tag_detail pkt_ext_cf">
         <div class="pkt_ext_tag_input_wrapper">
             <div class="pkt_ext_tag_input_blocker"></div>
             <input class="pkt_ext_tag_input" type="text" placeholder="{{addtags}}">
         </div>
         <a href="#" class="pkt_ext_btn pkt_ext_btn_disabled">{{save}}</a>
     </div>
     <p class="pkt_ext_edit_msg"></p>
-</div>
\ No newline at end of file
+</div>
--- a/browser/extensions/pocket/content/panels/tmpl/saved_tmplogin.handlebars
+++ b/browser/extensions/pocket/content/panels/tmpl/saved_tmplogin.handlebars
@@ -1,20 +1,20 @@
 <div class="pkt_ext_detail pkt_ext_saved_tmplogin pkt_shaded_background">
-    <div class="pkt_ext_indent_border_left">
+    <div class="pkt_ext_indent_bordered">
         <p>You are using Pocket without an account.<br />Sign up to back up your saved items.</p>
-        <p><a href="https://help.getpocket.com/article/1129-using-pocket-without-an-account-in-firefox?s=ghost_upsell" target="_blank">Learn more</a>
+        <p><a href="https://help.getpocket.com/article/1129-using-pocket-without-an-account-in-firefox?s=ghost_upsell" target="_blank">Learn more</a></p>
     </div>
 
     {{#if fxasignedin}}
-        <div id="pkt_ext_tmp_account_signup" class="pkt_ext_button pkt_ext_blue_button">
-            <div class="pkt_ext_save_title_wrapper pkt_ext_ffx_icon">
-                <div class="pkt_ext_logo_action_copy">Login with Firefox</div>
-            </div>
-        </div>
+        <button id="pkt_ext_tmp_account_signup" class="pkt_ext_button pkt_ext_blue_button">
+            <span class="pkt_ext_save_title_wrapper pkt_ext_ffx_icon">
+                <span class="pkt_ext_logo_action_copy">Login with Firefox</span>
+            </span>
+        </button>
     {{else}}
-        <div id="pkt_ext_tmp_account_signup" class="pkt_ext_button">
-            <div class="pkt_ext_save_title_wrapper">
-                <div class="pkt_ext_logo_action_copy">Sign up</div>
-            </div>
-        </div>
+        <button id="pkt_ext_tmp_account_signup" class="pkt_ext_button">
+            <span class="pkt_ext_save_title_wrapper">
+                <span class="pkt_ext_logo_action_copy">Sign up</span>
+            </span>
+        </button>
     {{/if}}
 </div>