Make the "sign in or sign up" clickable in banner

Fixes: #5054 CSS fixes: * Move common colors into variables * Remove left padding from sign-in link
mozilla-services · Oct 29, 2018 · f39042c · f39042c
1 parent bbeb53a
commit f39042c
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl
@@ -15,7 +15,7 @@ buttonSignIn =
     .title = Sign In
 screenshotsLogo =
     .title = Screenshots Home
-bannerMessage = Sign in or sign up to access your shots across devices and save your favorites forever.
+bannerSignIn = <a>Sign in or sign up</a> to access your shots across devices and save your favorites forever.
 bannerUpsell = {gScreenshotsDescription} <a>Get Firefox now</a>
 
 ## Footer

diff --git a/server/src/ad-banner.js b/server/src/ad-banner.js
@@ -12,6 +12,10 @@ exports.AdBanner = class AdBanner extends React.Component {
     sendEvent("click-install-firefox-shot", {useBeacon: true});
   }
 
+  clickedSignIn() {
+    sendEvent("fxa-signin-ad-banner", {useBeacon: true});
+  }
+
   render() {
     let bannerContent = null;
 
@@ -25,9 +29,12 @@ exports.AdBanner = class AdBanner extends React.Component {
           </p>
         </Localized>;
     } else if (!this.props.hasFxa) {
-      bannerContent = <Localized id="bannerMessage">
+      const signInLink = <a className="signInLink"
+        href="/api/fxa-oauth/login/shots"
+        onClick={ this.clickedSignIn.bind(this) }></a>;
+      bannerContent = <Localized id="bannerSignIn" a={signInLink}>
           <p>
-            Sign in or sign up to sync shots across devices, save your favorite shots forever.
+            <a>Sign in or sign up</a> to sync shots across devices, save your favorite shots forever.
           </p>
         </Localized>;
     }

diff --git a/static/css/onboarding.scss b/static/css/onboarding.scss
@@ -9,9 +9,6 @@ $slide-height-small: 360px;
 $next-prev-size: 70px;
 $slide-status-color: $light-default;
 
-$medium-dark-blue: #009ec0;
-$super-blue: #00d1e6;
-
 html,
 body {
   box-sizing: border-box;

diff --git a/static/css/partials/_header.scss b/static/css/partials/_header.scss
@@ -170,6 +170,10 @@
 
   .upsellLink {
     padding-left: 10px;
-    color: #009ec0;
+    color: $medium-dark-blue;
+  }
+
+  .signInLink {
+    color: $medium-dark-blue;
   }
 }
diff --git a/static/css/partials/_variables.scss b/static/css/partials/_variables.scss
@@ -20,6 +20,8 @@ $link-medium: #858585;
 $warning: #d92215;
 $alt-dark: #38383d;
 $alt-dark-title: #6f7fb6;
+$medium-dark-blue: #009ec0;
+$super-blue: #00d1e6;
 
 // BASE GRID
 $grid-unit: 20px;