Fix layout bug with social share icons

src/_locales/en_US/messages.json

@@ -359,6 +359,18 @@
         "message": "Privacy Policy",
         "description": "Shown at the bottom of the intro page."
     },
+    "intro_easy_to_manage": {
+        "message": "Easy to manage",
+        "description": "Intro page paragraph heading on Chrome."
+    },
+    "intro_easy_to_manage_paragraph": {
+        "message": "Pin this extension to your toolbar for easy access. The Privacy Badger icon will show you how many trackers it blocks on each page. Click on the icon to manage your privacy settings.",
+        "description": "Intro page paragraph on Chrome."
+    },
+    "intro_pin_here": {
+        "message": "Pin extension here",
+        "description": "Shown on arrow pointing at Chrome extension icon"
+    },
     "share_button_title_facebook": {
         "message": "Share on Facebook",
         "description": "Text shown when you hover over the social sharing buttons on the intro page."

src/skin/css/firstRun.css

@@ -498,7 +498,6 @@ header .title-bar h1 {
   display:block;
   margin:2.5rem auto 2rem;
   padding-bottom:3rem;
-  width:94px;
   z-index:3;
 }
 .share-links>a {
@@ -648,6 +647,13 @@ header .title-bar h1 {
     visibility:visible;
   }
 }
+
+@media screen and (max-width: 40em){
+  .share-links {
+    display: flex;
+    justify-content: center;
+  }
+}
 /* fonts */
 @font-face {
   font-family:'ChunkFive';
@@ -789,6 +795,45 @@ body {
   background-image:linear-gradient(#DFDFE6, #DFDFE6 30%, #fff 30%);
   padding:4rem 0;
 }
+
+@keyframes bounce {
+	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+	40% {transform: translateY(-20px);}
+	60% {transform: translateY(-5px);}
+}
+
+#pin-nudge-arrow {
+  background-color: #DFDFE6;
+  position: fixed;
+  top: 25px;
+  right: 25px;
+  padding: 12px 20px 12px 10px;
+  z-index: 1000;
+  border-radius: 8px;
+  font-family:"OpenSans-Bold",sans-serif;
+  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.15);
+  animation: bounce 2s ease infinite;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  text-transform: uppercase;
+  font-size: 14px;
+}
+
+#arrow-point {
+  height: 20px;
+  width: 20px;
+  background-color: #DFDFE6;
+  transform: rotate(45deg) translateY(-50%);
+  position: absolute;
+  top: 0px;
+  right: 85px;
+}
+
+#puzzle-icon {
+  height: 20px;
+}
+
 #pb-privacy-policy, #pb-privacy-policy a {
   color:#707070;
   font-family:"OpenSans-Light",sans-serif;

src/skin/firstRun.html

@@ -41,8 +41,29 @@ <h3 class="i18n_firstRun_title"></h3>
       </div>
     </div>
 
+    <!-- arrow showing users where to pin their extension, only shown on chrome -->
+    <div id="pin-nudge-arrow" class="pin-nudge">
+      <img src="images/puzzle-piece.png" id="puzzle-icon">
+      <div class="i18n_intro_pin_here"></div>
+      <div id="arrow-point"></div>
+    </div>
+
     <!-- privacy badger features -->
-    <div id="pb-features-1" class="align-center">
+    <div id="pb-features-1" class="align-center pin-nudge">
+      <div class="cell hide-for-small-only">
+        <!-- instructions on how to open the popup, only shown on chrome -->
+        <h3 class="i18n_intro_easy_to_manage"></h3>
+        <p class="i18n_intro_easy_to_manage_paragraph"></p>
+      </div>
+      <div class="small-12 large-3 cell">
+        <img src="images/pinning-instructions-2.png" alt="">
+      </div>
+      <div class="cell hide-for-large hide-for-medium">
+        <h3 class="i18n_intro_easy_to_manage"></h3>
+        <p class="i18n_intro_easy_to_manage_paragraph"></p>
+      </div>
+    </div>
+    <div id="pb-features-2" class="align-center">
       <div>
         <img src="images/learns-trackers.png" alt="">
       </div>
@@ -51,7 +72,7 @@ <h3 class="i18n_intro_learns"></h3>
         <p class="i18n_intro_learns_paragraph"></p>
       </div>
     </div>
-    <div id="pb-features-2" class="align-center">
+    <div id="pb-features-3" class="align-center">
       <div class="cell hide-for-small-only">
         <h3 class="i18n_intro_beyond_ads"></h3>
         <p class="i18n_intro_beyond_ads_paragraph"></p>
@@ -64,7 +85,7 @@ <h3 class="i18n_intro_beyond_ads"></h3>
         <p class="i18n_intro_beyond_ads_paragraph"></p>
       </div>
     </div>
-    <div id="pb-features-3" class="align-center">
+    <div id="pb-features-4" class="align-center">
       <div class="cell">
         <img src="images/not-ad-blocker.png" alt="">
       </div>

src/skin/js/firstRun.js

@@ -15,4 +15,15 @@ $(function () {
       });
     }
   });
+
+  // Nudge Chrome users to pin the extension to their toolbar
+  if (navigator && navigator.userAgent && navigator.userAgent.match(/chrome/i)) {
+    $(".pin-nudge").show();
+
+    $(window).scroll(function () {
+      if ($(window).scrollTop() > $(document).height() * 0.5) {
+        $("#pin-nudge-arrow").fadeOut();
+      }
+    });
+  }
 });