Fixes for Nothing Personal page [#14824] (#14881)

* Browser window title alignment
* Desktop icon hover styles
* Open links in new tab
* fix #14877 - sticky note animation
* fix #14878 - CTA default visibility

bedrock/firefox/templates/firefox/nothing-personal/index.html

@@ -29,10 +29,10 @@
       <div class="cta-group">
         <p>Feeling browser-curious? We won’t tell. <span aria-hidden="true">>>>>></span></p>
 
-        <a href="{{ url('firefox.set-as-default.thanks')}}" class="is-not-default mzp-c-button mzp-t-lg" data-cta-type="button" data-cta-text="Set as default" data-cta-position="primary">Set as default</a>
-
         <a href="https://blog.mozilla.org/en/firefox/" class="is-default mzp-c-button mzp-t-lg" data-cta-type="button" data-cta-text="Learn more" data-cta-position="primary">Learn more</a>
 
+        <a href="{{ url('firefox.set-as-default.thanks')}}" class="is-not-default mzp-c-button mzp-t-lg" data-cta-type="button" data-cta-text="Set as default" data-cta-position="primary">Set as default</a>
+
         {{ download_firefox_thanks(alt_copy='Download Firefox', dom_id='protocol-nav-download-firefox', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='primary') }}
       </div>
     </div>
@@ -146,27 +146,27 @@
             <h4><span aria-hidden="true">[</span>Somewhat Frequently Asked Questions<span aria-hidden="true">]</span></h4>
 
             <h5>Are you even any good?</h5>
-            <p>Calm down. And yes. <a href="{{ url('firefox.features.fast') }}">We’re so fast</a> you won’t even notice the difference.</p>
+            <p>Calm down. And yes. <a href="{{ url('firefox.features.fast') }}" target="_blank">We’re so fast</a> you won’t even notice the difference.</p>
 
             <h5 aria-label="What makes you so special?">What makes you soooo special?</h5>
-            <p><abbr title="No big deal">NBD</abbr>, but people dump their other browsers <a href="{{ url('firefox.features.index') }}">for our features</a> (like <a href="{{ url('firefox.features.picture-in-picture') }}">popping out videos</a> and a <a href="{{ url('firefox.features.pdf-editor') }}">built-in PDF editor</a>).</p>
+            <p><abbr title="No big deal">NBD</abbr>, but people dump their other browsers <a href="{{ url('firefox.features.index') }}" target="_blank">for our features</a> (like <a href="{{ url('firefox.features.picture-in-picture') }}" target="_blank">popping out videos</a> and a <a href="{{ url('firefox.features.pdf-editor') }}" target="_blank">built-in PDF editor</a>).</p>
 
             <h5>What does any of this have to do <br> with me?</h5>
-            <p>Hey, you can customize Firefox to be all about you with <a href="{{ url('firefox.features.add-ons') }}">add-ons</a> and <a href="{{ url('firefox.features.customize') }}">themes</a>. Happy?</p>
+            <p>Hey, you can customize Firefox to be all about you with <a href="{{ url('firefox.features.add-ons') }}" target="_blank">add-ons</a> and <a href="{{ url('firefox.features.customize') }}" target="_blank">themes</a>. Happy?</p>
 
             <h5>Ok, what’s the privacy-catch?</h5>
-            <p><a href="{{ url('firefox.privacy.index') }}">We don’t keep track of where you go</a> because 1. Yawn, and 2. We really don’t need it.</p>
+            <p><a href="{{ url('firefox.privacy.index') }}" target="_blank">We don’t keep track of where you go</a> because 1. Yawn, and 2. We really don’t need it.</p>
           </div>
-          <div class="c-sticky-note c-attached-sticky">
 
+          <div class="c-sticky-note c-attached-sticky">
            <span aria-hidden="true">>>></span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> <<<< </span>
            <br>
            <span aria-hidden="true">>>></span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> <<<< </span>
            <br>
            <span aria-hidden="true">>>></span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> <<<< </span>
             <p>Ok, bye.</p>
-
           </div>
+
         </div>
         {% endcall %}
     </div>

media/css/firefox/nothing-personal/_animations.scss

@@ -43,15 +43,6 @@
                 right: -50%;
             }
 
-            35% {
-                opacity: 1;
-                right: -30%;
-            }
-
-            65% {
-                right: -15%;
-            }
-
             100% {
                 opacity: 1;
                 right: 0;
@@ -60,22 +51,13 @@
 
         @keyframes slide-in-mobile {
             0% {
+                left: 100%;
                 opacity: 0;
-                margin-left: 200px;
-            }
-
-            35% {
-                opacity: 1;
-                margin-left: 80px;
-            }
-
-            65% {
-                margin-left: 60px;
             }
 
             100% {
+                left: 0;
                 opacity: 1;
-                margin-left: auto;
             }
         }
     }

media/css/firefox/nothing-personal/_browser.scss

@@ -24,10 +24,11 @@
             font-weight: 500;
             margin-bottom: 0;
             padding-left: 80px;
-            text-align: center;
+            text-align: start;
             white-space: nowrap;
 
             @media (min-width: $mq-tad-smaller-sm) {
+                text-align: center;
                 padding: 0;
             }
         }

media/css/firefox/nothing-personal/_primary-cta.scss

@@ -4,10 +4,15 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 // -------------------- CTA logic ----------------------- //
-.mzp-c-button.is-not-default, .mzp-c-button.is-default {
+.mzp-c-button.is-not-default,
+.mzp-c-button.is-default {
     display: none;
 }
 
+.is-firefox .mzp-c-button.is-default {
+    display: block;
+}
+
 html.is-firefox {
     #protocol-nav-download-firefox {
         display: none;

media/css/firefox/nothing-personal/_sticky-note.scss

@@ -15,6 +15,8 @@
     text-align: center;
 
     &.c-detached-sticky {
+        position: relative;
+        margin: 0 auto;
         display: block;
         opacity: 1;
 

media/css/firefox/nothing-personal/styles.scss

@@ -32,6 +32,7 @@ $mq-tad-smaller-sm: 455px;
         display: flex;
         flex-direction: column;
         align-items: center;
+        overflow-x: hidden;
     }
 
     aside {
@@ -58,19 +59,19 @@ $mq-tad-smaller-sm: 455px;
                 align-items: center;
                 margin-bottom: $spacing-2xl;
                 padding: $spacing-sm;
-                border: 2px solid transparent;
+                text-decoration: none;
+                cursor: default;
 
                 &:hover,
                 &:active,
                 &:focus {
-                    background-color: $color-blue-60;
                     color: $color-white;
-                    border: 2px dotted $color-white;
                 }
-            }
 
-            .c-trash {
-                cursor: default;
+                &:active,
+                &:focus {
+                    background-color: $color-blue-60;
+                }
             }
         }
     }