Refresh: nav tweaks [fix #15564]

* Change Mozilla AI to Mozilla.ai [fix #15606] * Add Relay to products list [fix #15586] * Update close button style * Constrain dropdown width * Add transition to all category link arrow * Remove underlines from links (hover only) * Fix mobile category titles * Use small icons * RTL fixes
mozilla · Dec 2, 2024 · f7c1aae · f7c1aae
1 parent 2babbd5
commit f7c1aae
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 57 deletions.
diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html
@@ -64,7 +64,7 @@ <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mozilla-foundation'
             </li>
             <li>
               <section class="m24-c-menu-item">
-                <a class="m24-c-menu-item-link" href="https://www.mozilla.ai/?{{ utm_params }}" data-link-text="Mozilla AI" data-link-position="topnav - about">
+                <a class="m24-c-menu-item-link" href="https://www.mozilla.ai/?{{ utm_params }}" data-link-text="Mozilla.ai" data-link-position="topnav - about">
                   <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mozilla-ai-v2') }}</h4>
                 </a>
               </section>

diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html
@@ -73,7 +73,9 @@ <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-thunderbird') }}</h
         <p class="m24-c-menu-category-link">
           <a href="{{ url('products.landing') }}" data-link-text="Go to all browsers and products" data-link-position="topnav - products">
             {{ ftl('navigation-refresh-all-products') }}
-            <svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath><g clip-path="url(#a)"><path d="M10.45 10.789v1.806H5V10.79zm8.55.903L10.45 4.5v6.289h1.806v-2.41l3.938 3.313-3.938 3.312v-2.409H10.45v6.289z" fill="#fff"/></g></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24" viewBox="0 0 23.4 24" fill="currentColor">
+              <path d="M23.4 12 9.1 0v10.5H0v3h9.1V24l14.3-12zm-11.3-1.5v-4l6.6 5.5-6.6 5.5v-7z"/>
+            </svg>
           </a>
         </p>
       </div>

diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html
@@ -48,6 +48,12 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-love-the-internet') }}</h2>
           <span class="m24-c-launchpad-info">{{ ftl('m24-home-get-a-headsup') }}</span>
         </a>
       </li>
+      <li class="m24-c-launchpad-item">
+        <a class="m24-c-launchpad-link m24-t-product-relay" href="https://relay.firefox.com/?{{ utm_params }}" data-cta-text="Relay" data-cta-position="product-list">
+          <strong class="m24-c-launchpad-title">{{ ftl('m24-home-firefox-relay') }}</strong>
+          <span class="m24-c-launchpad-info">{{ ftl('m24-home-mask-your-email') }}</span>
+        </a>
+      </li>
     </ul>
     <p class="m24-c-section-cta"><a href="{{ url('products.landing') }}" class="m24-c-cta" data-cta-text="Explore our products">{{ ftl('m24-home-explore-our-products') }}</a></p>
   </section>

diff --git a/l10n/en/brands.ftl b/l10n/en/brands.ftl
@@ -123,7 +123,7 @@
 -brand-name-mozilla-account = Mozilla account
 -brand-name-mozilla-accounts = Mozilla accounts
 -brand-name-mozilla-social = Mozilla.social
--brand-name-mozilla-ai = Mozilla AI
+-brand-name-mozilla-ai = Mozilla.ai
 -brand-name-mozilla-ventures = Mozilla Ventures
 -brand-name-rise25 = Rise25
 -brand-name-thunderbird = Thunderbird

diff --git a/l10n/en/mozorg/home-m24.ftl b/l10n/en/mozorg/home-m24.ftl
@@ -34,6 +34,8 @@ m24-home-mozilla-vpn = { -brand-name-mozilla-vpn }
 m24-home-keep-your-location = Keep your location and online adventures private — stream like a local, anywhere.
 m24-home-mozilla-monitor = { -brand-name-mozilla-monitor }
 m24-home-get-a-headsup = Get a heads-up if your personal info is at risk and lock it down like a pro.
+m24-home-firefox-relay = { -brand-name-firefox-relay }
+m24-home-mask-your-email = Mask your email and phone number so you only get the messages you want.
 
 ## Donate
 

diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss
@@ -102,17 +102,17 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
 }
 
 .js .m24-c-navigation-menu-button {
-    background-color: inherit;
+    background-color: transparent;
     border: none;
     color: $color-black;
     display: block;
+    float: right;
     font-family: $primary-font;
     font-weight: 600;
     height: 32px;
     margin: 4px 0 0;
     padding: 0;
     position: relative;
-    @include bidi(((float, right, left),));
 
     &::after {
         background: $color-black;
@@ -141,6 +141,10 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
     }
 }
 
+[dir='rtl'].js .m24-c-navigation-menu-button {
+    float: left;
+}
+
 .m24-c-navigation-logo-link {
     display: inline-block;
 }
@@ -228,12 +232,17 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
         border-bottom: transparent;
 
         .m24-c-menu-title {
-            @include bidi(((padding-left, 48px, padding-right, 48px),));
+            @include bidi(((padding-left, $spacing-md, padding-right, $spacing-md),));
+
+            &::before {
+                content: '/';
+                padding: 0 $spacing-xs;
+            }
         }
 
         .m24-c-menu-panel {
             display: block;
-            @include bidi(((animation, nav-slide-in 0.45s ease, nav-slide-in-reverse 0.45s ease),));
+            @include bidi(((animation, nav-slide-in 450ms ease, nav-slide-in-reverse 450ms ease),));
 
             @media (prefers-reduced-motion: reduce) {
                 @include bidi(((animation, none, none),));
@@ -242,20 +251,22 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
     }
 
     // Arrow styles for mobile menu items.
-    &::before {
-        background: url('/media/img/m24/arrow-dark-up.svg') top left repeat;
+    &::after {
+        background: url('/media/img/icons/m24-small/up-arrow.svg') center center no-repeat;
         content: '';
         height: 20px;
         position: absolute;
-        top: 10px;
+        top: 0;
         width: 20px;
+        padding: $spacing-xs 0;
         @include bidi((
             (transform, rotate(90deg), rotate(-90deg)),
             (right, 8px, left, auto),
         ));
+        @include background-size(14px, 14px);
     }
 
-    &.mzp-is-selected::before {
+    &.mzp-is-selected::after {
         @include bidi((
             (transform, rotate(-90deg), rotate(90deg)),
             (left, 8px, right, auto),
@@ -271,6 +282,11 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
             .m24-c-menu-title {
                 color: $m24-color-dark-green;
                 @include bidi(((padding-left, 0, padding-right, 0),));
+
+                &::before {
+                    content: none;
+                    display: none;
+                }
             }
 
             &::after {
@@ -282,7 +298,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
             }
         }
 
-        &::before {
+        &::after {
             display: none;
         }
     }
@@ -310,7 +326,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
 
     .m24-c-menu-category-has-icon {
         .m24-c-menu-title-icon {
-            @include bidi(((margin-right, 8px, margin-right, 8px),));
+            @include bidi(((margin, 0 8px 0 0, 0 0 0 8px),));
         }
 
         .m24-c-menu-title::after {
@@ -329,9 +345,10 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
 }
 
 .m24-c-menu-title {
+    align-items: center;
     border: none;
     color: $color-black;
-    display: block;
+    display: flex;
     font-family: $primary-font;
     font-size: $text-button-sm;
     font-weight: 600;
@@ -340,6 +357,10 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
     text-decoration: none;
     width: 100%;
 
+    .m24-c-menu-title-icon {
+        @include bidi(((margin, 0 8px 0 0, 0 0 0 8px),));
+    }
+
     @media #{$mq-md} {
         &::after {
             background: $color-black;
@@ -388,9 +409,15 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
 }
 
 .m24-c-menu-panel .m24-c-menu-panel-container {
+    margin: 0 auto;
+
     @media #{$mq-md} {
         padding: $spacer-lg 0;
     }
+
+    @media #{$mq-lg} {
+        max-width: grid(8);
+    }
 }
 
 .m24-c-menu-item-title {
@@ -423,17 +450,6 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
         .m24-c-menu-item-title {
             border: none;
             position: relative;
-
-            &::after {
-                background: $color-black;
-                bottom: 1px;
-                content: "";
-                display: block;
-                height: 1px;
-                left: 0;
-                position: absolute;
-                width: 100%;
-            }
         }
     }
 }
@@ -458,6 +474,13 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
 
         &::after {
             background: $m24-color-dark-green;
+            bottom: 1px;
+            content: "";
+            display: block;
+            height: 1px;
+            left: 0;
+            position: absolute;
+            width: 100%;
         }
     }
 
@@ -534,16 +557,33 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
     text-decoration: none;
     width: fit-content;
 
-    svg path {
-        fill: $color-black;
+    svg {
+        @include bidi((
+            (left, auto, 0),
+            (margin-left, $spacing-xs, 0),
+            (margin-right, 0, $spacing-xs),
+            (right, 0, auto),
+            (transition-property, right, left),
+            (transform, none, rotate(-180deg)),
+        ));
+        height: 0.8em;
+        position: relative;
+        top: 0.15em;
+        transition-duration: $fast;
+        transition-timing-function: $bezier;
+        width: auto;
     }
 }
 
-.m24-c-menu-panel .m24-c-menu-category-link a:hover {
+.m24-c-menu-panel .m24-c-menu-category-link a:hover,
+.m24-c-menu-panel .m24-c-menu-category-link a:focus {
     color: $m24-color-dark-green;
 
-    svg path {
-        fill: $m24-color-dark-green;
+    svg {
+        @include bidi((
+            (right, -$spacing-sm, auto),
+            (left, auto, -$spacing-sm),
+        ));
     }
 }
 
@@ -565,47 +605,36 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
         border: none;
         font-weight: 600;
         position: relative;
-
-        &::after {
-            background: $color-black;
-            bottom: 1px;
-            content: "";
-            display: block;
-            height: 1px;
-            left: 0;
-            position: absolute;
-            width: 100%;
-        }
     }
 }
 
 .mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:hover,
 .mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:visited:hover {
     .m24-c-menu-item-title {
         border: none;
-
-        &::after {
-            background: $m24-color-dark-green;
-        }
     }
 }
 
 // Menu panel close button shown on desktop sized view ports.
 .m24-c-menu-button-close {
+    @include bidi(((right, 15px, left, auto), (left, auto, right, 15px)));
+    @include image-replaced;
     background: $color-white url('/media/protocol/img/icons/close.svg') center center no-repeat;
-    border-radius: $border-radius-sm;
-    border: none;
-    box-shadow: $box-shadow-sm;
+    @include background-size(20px, 20px);
+    border: $border-width solid transparent;
     cursor: pointer;
     display: none;
     height: 24px;
     padding: var(--spacer-xs);
     position: absolute;
     top: 15px;
     width: 24px;
-    @include background-size(20px, 20px);
-    @include bidi(((right, 15px, left, auto), (left, auto, right, 15px)));
-    @include image-replaced;
+    transition: border-color $fast $bezier;
+
+    &:hover,
+    &:focus {
+        border-color: $m24-color-medium-gray;
+    }
 }
 
 // page content - hide all content except for the nav when mobile nav menu is open

diff --git a/media/css/m24/components/pencil-banner.scss b/media/css/m24/components/pencil-banner.scss
@@ -21,21 +21,22 @@
     }
 
     .m24-pencil-banner-close {
+        @include bidi(((right, $spacer-sm, auto), (left, auto, $spacer-sm)));
+        @include image-replaced;
         background: transparent url('/media/img/icons/m24-small/close.svg') center center no-repeat;
-        border: none;
+        @include background-size(20px 20px);
+        border: $border-width solid transparent;
         cursor: pointer;
         height: 24px;
+        padding: var(--spacer-xs);
         position: absolute;
         top: $spacer-sm;
+        transition: border-color $fast $bezier;
         width: 24px;
-        @include background-size(24px 24px);
-        @include bidi(((right, $spacer-sm, auto), (left, auto, $spacer-sm)));
-        @include image-replaced;
 
         &:hover,
         &:focus {
-            @include transition(transform 0.1s ease-in-out);
-            @include transform(scale(1.1));
+            border-color: $m24-color-green;
         }
     }
 }

diff --git a/media/css/m24/launchpad.scss b/media/css/m24/launchpad.scss
@@ -106,6 +106,10 @@ $launchpad-logo-spacing: $launchpad-logo-width + $launchpad-logo-padding;
     &.m24-t-product-thunderbird::before {
         background-image: url('/media/img/logos/thunderbird/logo-thunderbird.svg');
     }
+
+    &.m24-t-product-relay::before {
+        background-image: url('/media/protocol/img/logos/firefox/relay/logo.svg');
+    }
 }
 
 .m24-c-launchpad-title {