Merge pull request #15954 from mozilla/FXA-8512

fix(branding): Fix header styling for Subscriptions and Support pages

packages/fxa-content-server/app/scripts/lib/dom-writer.js

@@ -26,7 +26,5 @@ export default {
     // The user may be scrolled part way down the page
     // on view transition. Force them to the top of the page.
     win.scrollTo(0, 0);
-
-    $('#fox-logo').addClass('fade-in-forward').css('opacity', 1);
   },
 };

packages/fxa-content-server/app/scripts/templates/support.mustache

@@ -1,7 +1,12 @@
 <div id="fxa-settings-header-wrapper">
   <header id="fxa-settings-header">
-    <h1 id="fxa-manage-account" class="text-xl">
-      <span class="fxa-account-title font-bold ltr:mr-2 rtl:ml-2">{{#t}}Mozilla account{{/t}}</span>
+    <h1 class="flex flex-row">
+        <img
+            class="w-8 h-8 bg-black me-4"
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC43NjkyMjYiIHk9IjAuNzY5MjI2IiB3aWR0aD0iMzAuNDYxNSIgaGVpZ2h0PSIzMC40NjE1IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMjcuNzMxNCAyMC41MDg0SDI5LjY0NDFWMjMuNjE1NEgyMy42MTIxVjE1LjI3NDVDMjMuNjEyMSAxMi42NTY3IDIyLjc3ODEgMTEuNjcyOCAyMS4xNTkyIDExLjY3MjhDMTkuMTk3MiAxMS42NzI4IDE4LjQxMjQgMTMuMTYwOSAxOC40MTI0IDE1LjIxMzlWMjAuNDQ5NkgyMC4zMjUxVjIzLjU2MDRIMTQuMzAwOFYxNS4yNjg5QzE0LjMwMDggMTIuNjUxIDEzLjQ2NjcgMTEuNjY3MSAxMS44NDc4IDExLjY2NzFDOS44ODU4MyAxMS42NjcxIDguNzg4MjUgMTMuMTU1MiA4Ljc4ODI1IDE1LjIwODJWMjAuNDQzOUgxMS44MzY0VjIzLjU2MDRIMy4wMTQxNFYyMC40NTM0SDQuODIyNThWMTIuMzU3MkgyLjkyNjk0VjguNjU0OThIOC4zNzY5VjEwLjk5NDJDOS41MDExOSA5LjMyNDQ0IDExLjM5OTMgOC4zNDMyMiAxMy40MTE3IDguMzkxNDlDMTUuNTIxNCA4LjI3NjQ3IDE3LjQzOTkgOS42MDg1NCAxOC4wNjkzIDExLjYyNTRDMTguNzQ2NyA5LjY0MzQ2IDIwLjYzNSA4LjMzMjg3IDIyLjcyODggOC4zOTE0OUMyNC4xMDE5IDguMzI4NzkgMjUuNDM1MSA4Ljg2MzI2IDI2LjM4NDYgOS44NTcxNkMyNy4zMzQyIDEwLjg1MTEgMjcuODA3MyAxMi4yMDcyIDI3LjY4MjEgMTMuNTc2MVYyMC41MDg0SDI3LjczMTRaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K"
+            alt="{{#t}}Mozilla m logo{{/t}}"
+        />
+      <span class="font-bold text-xl">{{#t}}Mozilla account{{/t}}</span>
     </h1>
   </header>
 
@@ -19,12 +24,12 @@
 <div id="fxa-settings">
   <div id="fxa-settings-content" class="card !text-left before:content-none">
 
-    <header id="fxa-settings-profile-header-wrapper">
+    <section id="fxa-settings-profile-header-wrapper">
       <div class="avatar-wrapper avatar-settings-view nohover"></div>
       <div id="fxa-settings-profile-header">
       {{{ unsafeHeaderHTML }}}
       </div>
-    </header>
+    </section>
     <div class="child-views">
       <div class="settings-child-view support">
         <div class="settings-unit">

packages/fxa-content-server/app/styles/_base.scss

@@ -23,7 +23,11 @@ body {
 
   &.settings {
     justify-content: flex-start;
-    padding: 0;
+    padding-top: 0;
+
+    & #mozilla-header {
+      display:none;
+    }
   }
 
   @include respond-to('small') {

packages/fxa-content-server/app/styles/_layout.scss

@@ -224,6 +224,7 @@
     box-shadow: none;
     padding: 15px 0 10px;
     width: 100%;
+    border-radius:0;
   }
 
   &.animate-shadow {
@@ -240,7 +241,7 @@
   width: 100%;
 
   @include respond-to('big') {
-    padding: 0 32px;
+    padding: 16px 32px;
   }
 
   @include respond-to('small') {

packages/fxa-content-server/app/styles/modules/_branding.scss

@@ -5,7 +5,6 @@
   left: 0;
   position: absolute;
   width: 100%;
-  z-index: $fox-logo-zindex;
 
   @include respond-to('big') {
     background-size: auto $firefox-standalone-logo-size-large;

packages/fxa-content-server/app/styles/modules/_settings.scss

@@ -1,10 +1,3 @@
-// this needs to be overridden,
-// or done in a way that doesn't kill these everywhere
-body.settings #fox-logo,
-body.settings .sign-in {
-  display: none;
-}
-
 body.settings .loading {
   position: relative;
   top: 150px;
@@ -53,58 +46,17 @@ body.settings #stage .settings {
   display: flex;
   flex-direction: column;
   width: 100%;
-
-  @include respond-to('big') {
-    height: 96px;
-  }
+  padding-bottom:32px;
 
   @include respond-to('small') {
-    flex-direction: row;
-    height: 64px;
+    padding-inline-start: 16px;
+    padding-bottom:16px;
   }
 
   #fxa-settings-header {
     @include respond-to('small') {
       flex: 1 1;
-      margin-bottom: 0;
-      width: inherit;
-    }
-  }
-
-  #fxa-manage-account {
-    background-image: image-url('moz-m-logo.svg');
-    background-repeat: no-repeat;
-    margin: 0;
-
-    html[dir='ltr'] & {
-      background-position: left center;
-    }
-
-    html[dir='rtl'] & {
-      background-position: right center;
-    }
-
-    @include respond-to('big') {
-      background-size: 36px auto;
-      line-height: 63px;
-    }
-
-    @include respond-to('small') {
-      background-size: 32px auto;
-      height: 48px;
-      line-height: 50px;
-
-      & .fxa-account-title {
-        display: none;
-      }
-
-      html[dir='ltr'] & {
-        padding-left: 36px;
-      }
-
-      html[dir='rtl'] & {
-        padding-right: 36px;
-      }
+      padding:16px 0;
     }
   }
 
@@ -461,17 +413,17 @@ section.modal-panel {
 
 .breadcrumbs {
   margin-top: 0;
-  padding-left: 32px;
+  padding-inline-start: 32px;
   width: 100%;
 
   @include respond-to('small') {
     margin-bottom: 0;
-    margin-left: 0;
+    margin-inline-start: 0;
     padding: 0;
   }
 
   li {
-    float: left;
+    float: inline-start;
     list-style: none;
     margin: 0;
     padding: 0;

packages/fxa-payments-server/src/components/AppLayout/index.scss

@@ -3,18 +3,6 @@
 // HACK: create-react-app forbids using images outside the root level of the
 // project, so let's use local copies from fxa-content-server for now
 
-#main-content:not(.hide-logo)::before {
-  background-image: url('../../images/firefox-logo.svg');
-}
-
-#fxa-settings-header-wrapper {
-  flex-direction: column;
-
-  #fxa-manage-account {
-    background-image: url('../../images/firefox-logo.svg');
-  }
-}
-
 #about-mozilla {
   background-image: url('./images/mozilla.svg');
 }

packages/fxa-payments-server/src/components/AppLayout/index.tsx

@@ -75,28 +75,22 @@ export const SettingsLayout = ({ children }: { children: ReactNode }) => {
   return (
     <AppLayout>
       <div className="settings">
-        <div id="fxa-settings-header-wrapper">
         <header id="fxa-settings-header">
           <Localized id="app-logo-alt-3">
             <img
               src={logo}
               data-testid="logo"
-                className="h-10 w-10 ltr:mr-4 rtl:ml-4"
+              className="h-10 w-10 me-4"
               alt="Mozilla m logo"
             />
           </Localized>
-            <h1 id="fxa-manage-account">
+          <h1 className="text-xl">
             <Localized id="settings-project-header-title">
-                <span className="fxa-account-title">Mozilla account</span>
+              <span>Mozilla account</span>
             </Localized>
           </h1>
-            {/*
-              * TODO: We can't actually sign out of FxA from here. Maybe back to settings?
-              <button id="signout" className="settings-button secondary-button">Sign out</button>
-              */}
         </header>
         {breadcrumbs}
-        </div>
 
         <div id="fxa-settings" className="mb-12">
           <div id="fxa-settings-content">{children}</div>

packages/fxa-payments-server/src/routes/Subscriptions/index.scss

@@ -226,19 +226,9 @@
     width: 100%;
   }
 
-  #fxa-settings-header-wrapper {
-    flex-direction: row;
-  }
-
-  #fxa-settings-header {
-    flex: 1 1;
-    margin-bottom: 0;
-    width: inherit;
-  }
-
   .breadcrumbs {
-    margin: 0;
-    padding: 0;
+    margin-bottom: 16px;
+    padding: 8px 16px;
   }
 
   .subscription-management .payment-update .payment {