Merge pull request #15911 from mozilla/FXA-8323

refactor(l10n): Activate fxa-react rebrand strings, update header logo

packages/fxa-react/components/Head/index.tsx

@@ -13,11 +13,11 @@ const Head = ({ title }: { title?: string }) => {
       <title>
         {title
           ? l10n.getString(
-              'app-page-title',
+              'app-page-title-2',
               { title },
-              `${title} | Firefox Accounts`
+              `${title} | Mozilla accounts`
             )
-          : l10n.getString('app-default-title', null, 'Firefox Accounts')}
+          : l10n.getString('app-default-title-2', null, 'Mozilla accounts')}
       </title>
     </Helmet>
   );

packages/fxa-react/components/LogoLockup/index.tsx

@@ -4,7 +4,7 @@
 
 import React, { ReactElement } from 'react';
 import { Localized } from '@fluent/react';
-import logo from '../../images/ff-logo.svg';
+import logo from '../../images/moz-m-logo.svg';
 
 type LogoLockupProps = {
   children: string | ReactElement;
@@ -14,12 +14,12 @@ type LogoLockupProps = {
 export const LogoLockup = ({ children, className = '' }: LogoLockupProps) => {
   return (
     <>
-      <Localized id="app-logo-alt">
+      <Localized id="app-logo-alt-3">
         <img
           src={logo}
           data-testid="logo"
           className="h-10 w-10 ltr:mr-4 rtl:ml-4"
-          alt="Firefox logo"
+          alt="Mozilla m logo"
         />
       </Localized>
       <h1

packages/fxa-react/images/moz-m-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500" xml:space="preserve"><path d="M-4-4h508v508H-4z"/><path d="M428.2 314h29.1v47.5h-91.7V238.4c0-37.8-12.6-52.4-37.3-52.4-30.1 0-42.2 21.3-42.2 51.9V314h29.1v47.5h-91.7V238.4c0-37.8-12.6-52.4-37.4-52.4-30.1 0-42.2 21.3-42.2 51.9V314h41.7v47.5H52.3V314h29.1V190.3H52.3v-47.5H144v33c13.1-23.3 35.9-37.3 66.4-37.3 31.5 0 60.6 15 71.3 47 12.1-29.1 36.9-47 71.3-47 39.3 0 75.2 23.8 75.2 75.7V314z" style="fill:#fff"/></svg>

packages/fxa-settings/src/components/BrandMessaging/index.tsx

@@ -9,6 +9,7 @@ import { FtlMsg } from 'fxa-react/lib/utils';
 import { ReactComponent as CloseIcon } from 'fxa-react/images/close.svg';
 import { Localized } from '@fluent/react';
 import { createPortal } from 'react-dom';
+import logo from 'fxa-react/images/moz-m-logo.svg';
 
 export const bannerClosedLocalStorageKey =
   '__fxa_storage.fxa_disable_brand_banner';
@@ -102,7 +103,7 @@ export const BrandMessaging = ({
               <Localized id="brand-m-logo" attrs={{ alt: true }}>
                 <img
                   className="w-8 h-8 bg-black m-4 mt-1"
-                  src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC43NjkyMjYiIHk9IjAuNzY5MjI2IiB3aWR0aD0iMzAuNDYxNSIgaGVpZ2h0PSIzMC40NjE1IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMjcuNzMxNCAyMC41MDg0SDI5LjY0NDFWMjMuNjE1NEgyMy42MTIxVjE1LjI3NDVDMjMuNjEyMSAxMi42NTY3IDIyLjc3ODEgMTEuNjcyOCAyMS4xNTkyIDExLjY3MjhDMTkuMTk3MiAxMS42NzI4IDE4LjQxMjQgMTMuMTYwOSAxOC40MTI0IDE1LjIxMzlWMjAuNDQ5NkgyMC4zMjUxVjIzLjU2MDRIMTQuMzAwOFYxNS4yNjg5QzE0LjMwMDggMTIuNjUxIDEzLjQ2NjcgMTEuNjY3MSAxMS44NDc4IDExLjY2NzFDOS44ODU4MyAxMS42NjcxIDguNzg4MjUgMTMuMTU1MiA4Ljc4ODI1IDE1LjIwODJWMjAuNDQzOUgxMS44MzY0VjIzLjU2MDRIMy4wMTQxNFYyMC40NTM0SDQuODIyNThWMTIuMzU3MkgyLjkyNjk0VjguNjU0OThIOC4zNzY5VjEwLjk5NDJDOS41MDExOSA5LjMyNDQ0IDExLjM5OTMgOC4zNDMyMiAxMy40MTE3IDguMzkxNDlDMTUuNTIxNCA4LjI3NjQ3IDE3LjQzOTkgOS42MDg1NCAxOC4wNjkzIDExLjYyNTRDMTguNzQ2NyA5LjY0MzQ2IDIwLjYzNSA4LjMzMjg3IDIyLjcyODggOC4zOTE0OUMyNC4xMDE5IDguMzI4NzkgMjUuNDM1MSA4Ljg2MzI2IDI2LjM4NDYgOS44NTcxNkMyNy4zMzQyIDEwLjg1MTEgMjcuODA3MyAxMi4yMDcyIDI3LjY4MjEgMTMuNTc2MVYyMC41MDg0SDI3LjczMTRaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K"
+                  src={logo}
                   alt="Mozilla m logo"
                 />
               </Localized>

packages/fxa-settings/src/components/Settings/HeaderLockup/index.tsx

@@ -50,9 +50,9 @@ export const HeaderLockup = () => {
         >
           <LogoLockup>
             <>
-              <Localized id="header-title">
+              <Localized id="header-title-2">
                 <span className="font-bold ltr:mr-2 rtl:ml-2">
-                  Firefox Account
+                  Mozilla account
                 </span>
               </Localized>
             </>