feat: add mtc logo to the top nav, remove from footer

doorway-ui-components/src/headers/SiteHeader.scss

@@ -271,7 +271,7 @@
   }
 
   @media (min-width: $screen-md) and (max-width: $screen-lg) {
-    padding: var(--logo-tablet-padding);
+    margin-right: calc(2px - var(--logo-tablet-padding));
   }
 
   @media (min-width: $screen-print) {

doorway-ui-components/src/navigation/LanguageNav.scss

@@ -1,51 +1,94 @@
 .language-bar {
-  --inner-max-width: var(--bloom-width-5xl);
-  --inner-width: inherit;
-  --inner-desktop-padding: inherit;
-  --inner-mobile-padding: inherit;
-  background-color: var(--bloom-color-gray-200);
+  --bar-background-color: var(--seeds-bg-color-canvas);
+  --selected-language-color: var(--seeds-color-secondary);
+  --inner-max-width: var(--seeds-width-5xl);
+  --inner-gap: var(--seeds-s2);
+
+  background-color: var(--seeds-bg-color-surface);
+
+  @media (min-width: $screen-md) {
+    background-color: var(--bar-background-color);
+  }
 }
 
 .language-bar__inner {
   max-width: var(--inner-max-width);
-  width: var(--inner-width);
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--inner-gap);
   margin: auto;
-  padding: var(--inner-mobile-padding);
-  padding: var(--bloom-s2) 0;
+  padding-block: var(--inner-gap) 0;
 
-  @media (max-width: $screen-md) {
-    justify-content: center;
+  @media (min-width: $screen-md) {
+    flex-direction: row;
+    align-items: center;
+    padding-block-end: var(--inner-gap);
+  }
+}
+
+.language-nav {
+  width: 100%;
+  background-color: var(--bar-background-color);
+  padding-block: var(--seeds-s1);
+
+  @media (min-width: $screen-md) {
+    padding-block: 0;
+    width: auto;
   }
 }
 
 .language-nav__list {
   display: flex;
-  @media (max-width: $screen-md) {
-    justify-content: center;
-  }
+
   li:not(:last-child) {
     border-right: var(--doorway-standard-border);
   }
 }
 
 .language-nav__list-button {
-  padding: var(--bloom-s1) var(--bloom-s3);
-  color: var(--bloom-text-color);
-  border-radius: var(--bloom-rounded-full);
+  padding: var(--seeds-s1) var(--seeds-s3);
+  color: var(--seeds-text-color);
+  border-radius: var(--seeds-rounded-full);
   font-weight: 500;
-  font-size: var(--bloom-font-size-xs);
+  font-size: var(--seeds-font-size-xs);
   cursor: pointer;
   background-color: transparent;
-  margin: 0 var(--bloom-s1_5);
+  margin: 0 var(--seeds-s1_5);
 
   &:hover {
-    background-color: var(--doorway-color-secondary);
+    background-color: var(--selected-language-color);
   }
 
   &.is-active {
-    color: var(--bloom-text-color);
-    background-color: var(--doorway-color-secondary);
+    color: var(--seeds-text-color);
+    background-color: var(--selected-language-color);
+  }
+}
+
+.language-bar__association-logo {
+  background-color: var(--seeds-bg-color-surface);
+
+  @media (min-width: $screen-md) {
+    background-color: transparent;
+  }
+
+  a {
+    display: block;
+  }
+
+  img {
+    height: 20px;
+    margin-left: var(--inner-gap);
+
+    @media (min-width: $screen-md) {
+      height: 30px;
+      margin-left: calc(var(--logo-tablet-padding) * 0.75);
+    }
+
+    @media (min-width: $screen-lg) {
+      margin-left: -2px;
+    }
   }
 }

doorway-ui-components/src/navigation/LanguageNav.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { t } from "@bloom-housing/ui-components"
 import "./LanguageNav.scss"
 
 export type LangItem = {
@@ -16,6 +17,11 @@ const LanguageNav = ({ ariaLabel, languages }: LanguageNavProps) => {
   return (
     <div className="language-bar">
       <div className="language-bar__inner">
+        <figure className="language-bar__association-logo">
+          <a href="https://mtc.ca.gov/">
+            <img src="/images/mtc-abag-logo.png" alt={t("nav.mtcLogo")} />
+          </a>
+        </figure>
         <nav {...{ "aria-label": ariaLabel ?? "Language" }} className="language-nav">
           <ul className="language-nav__list">
             {languages.map((item) => (

shared-helpers/src/locales/es.json

@@ -633,7 +633,6 @@
   "footer.instagramLogo": "Logo de Instagram",
   "footer.linkedinLogo": "Logo de LinkedIn",
   "footer.mondayToFriday": "De lunes a viernes, de 9:00 a 17:00",
-  "footer.mtcLogo": "Logo de Association of Bay Area Governments - Metropolitan Transportation Commission",
   "footer.twitterLogo": "Logo de Twitter",
   "footer.youtubeLogo": "Logo de YouTube",
   "help.faq.affordableDifferences": "¿Cuál es la diferencia entre una vivienda asequible regulada y una que no está regulada? ¿Por qué algunas viviendas asequibles están reguladas por el Gobierno?",
@@ -1105,6 +1104,7 @@
   "nav.getFeedback": "Nos encantaría recibir sus comentarios",
   "nav.helpCenter": "Centro de Asistencia",
   "nav.listings": "Listados",
+  "nav.mtcLogo": "Logo de Association of Bay Area Governments - Metropolitan Transportation Commission",
   "nav.myAccount": "Mi Cuenta",
   "nav.myDashboard": "Mi panel de control",
   "nav.mySettings": "Mis Configuraciones",

shared-helpers/src/locales/general.json

@@ -588,7 +588,6 @@
   "footer.instagramLogo": "Instagram Logo",
   "footer.linkedinLogo": "LinkedIn Logo",
   "footer.mondayToFriday": "Monday-Friday 9:00am - 5:00pm",
-  "footer.mtcLogo": "Association of Bay Area Governments - Metropolitan Transportation Commission Logo",
   "footer.twitterLogo": "Twitter Logo",
   "footer.youtubeLogo": "YouTube Logo",
   "help.faq.affordableDifferences": "What’s the difference between regulated affordable housing and naturally-occurring affordable housing? Why is some affordable housing regulated by the government?",
@@ -1060,6 +1059,7 @@
   "nav.getFeedback": "We'd love to get your feedback!",
   "nav.helpCenter": "Help Center",
   "nav.listings": "Listings",
+  "nav.mtcLogo": "Association of Bay Area Governments - Metropolitan Transportation Commission Logo",
   "nav.myAccount": "My Account",
   "nav.myDashboard": "My Dashboard",
   "nav.mySettings": "My Settings",

shared-helpers/src/locales/tl.json

@@ -598,7 +598,6 @@
   "footer.instagramLogo": "Logo ng Instagram",
   "footer.linkedinLogo": "Logo ng LinkedIn",
   "footer.mondayToFriday": "Lunes - Biyernes 9:00 am - 5:00 pm",
-  "footer.mtcLogo": "Logo ng Association of Bay Area Governments - Metropolitan Transportation Commission",
   "footer.twitterLogo": "Logo ng Twitter",
   "footer.youtubeLogo": "Logo ng YouTube",
   "help.faq.affordableDifferences": "Ano ang pagkakaiba sa pagitan ng kinokontrol na abot-kayang pabahay at natural na nagaganap na abot-kayang pabahay? Bakit kinokontrol ng pamahalaan ang ilang abot-kayang pabahay?",
@@ -1070,6 +1069,7 @@
   "nav.getFeedback": "Gusto naming makuha ang iyong feedback!",
   "nav.helpCenter": "Sentro ng Tulong",
   "nav.listings": "Mga Listahan",
+  "nav.mtcLogo": "Logo ng Association of Bay Area Governments - Metropolitan Transportation Commission",
   "nav.myAccount": "Account Ko",
   "nav.myDashboard": "Aking dashboard",
   "nav.mySettings": "Settings Ko",

shared-helpers/src/locales/vi.json

@@ -636,7 +636,6 @@
   "footer.instagramLogo": "Instagram Logo",
   "footer.linkedinLogo": "LinkedIn Logo",
   "footer.mondayToFriday": "9:00 sáng - 5:00 chiều thứ Hai - thứ Sáu",
-  "footer.mtcLogo": "Association of Bay Area Governments - Metropolitan Transportation Commission Logo",
   "footer.twitterLogo": "Twitter Logo",
   "footer.youtubeLogo": "YouTube Logo",
   "help.faq.affordableDifferences": "Đâu là sự khác biệt giữa nhà ở bình dân được quy định và nhà ở bình dân hình thành tự nhiên? Tại sao một số nhà ở bình dân được chính phủ quy định?",
@@ -1108,6 +1107,7 @@
   "nav.getFeedback": "Chúng tôi rất muốn nhận được phản hồi của bạn",
   "nav.helpCenter": "Trung tâm trợ giúp",
   "nav.listings": "Các danh sách nhà",
+  "nav.mtcLogo": "Association of Bay Area Governments - Metropolitan Transportation Commission Logo",
   "nav.myAccount": "Tài khoản của tôi",
   "nav.myDashboard": "Trang tổng quan của tôi",
   "nav.mySettings": "Thiết lập của tôi",

shared-helpers/src/locales/zh.json

@@ -636,7 +636,6 @@
   "footer.instagramLogo": "Instagram 标志",
   "footer.linkedinLogo": "领英标志",
   "footer.mondayToFriday": "週一至週五，上午 9:00 至下午 5:00",
-  "footer.mtcLogo": "湾区政府协会 - 大都会交通委员会徽标",
   "footer.twitterLogo": "推特标志",
   "footer.youtubeLogo": "YouTube 标志",
   "help.faq.affordableDifferences": "「受監管的可負擔住房」和「自發性可負擔住房」有何不同？為什麼一些可負擔住房會受到政府的監管？",
@@ -1108,6 +1107,7 @@
   "nav.getFeedback": "我們希望得到您的回饋",
   "nav.helpCenter": "幫助中心",
   "nav.listings": "好屋推薦",
+  "nav.mtcLogo": "湾区政府协会 - 大都会交通委员会徽标",
   "nav.myAccount": "我的帳戶",
   "nav.myDashboard": "我的儀表板",
   "nav.mySettings": "我的設定",

sites/public/src/components/shared/CustomSiteFooter.tsx

@@ -18,11 +18,6 @@ const CustomSiteFooter = () => {
               >
                 <img src="/images/bahfa-logo.png" alt={t("footer.bahfaLogo")} />
               </a>
-              <img
-                className={styles["association-icon"]}
-                src="/images/mtc-abag-logo.svg"
-                alt={t("footer.mtcLogo")}
-              />
             </div>
             <div className={styles["jurisdiction-address"]}>
               375 Beale Street, Suite 800

sites/public/styles/overrides.scss

@@ -7,11 +7,11 @@
     --logo-content-padding: 0;
     --logo-desktop-height: var(--base-height);
     --logo-desktop-padding: 0;
-    --logo-tablet-padding: 0 0 0 var(--bloom-s4);
+    --logo-tablet-padding: var(--bloom-s4);
     --logo-image-desktop-max-height: 3rem;
     --link-align-items: center;
     --link-padding-wrapped: var(--bloom-s2) var(--bloom-s4);
-    --link-padding-inline: var(--bloom-s4) var(--bloom-s4) var(--bloom-s3) var(--bloom-s4);
+    --link-padding-inline: var(--bloom-s4) var(--bloom-s3) var(--bloom-s3) var(--bloom-s3);
     --link-bottom-border: 0;
     --link-font-size: var(--bloom-font-size-sm);
     --link-font-weight: 500;
@@ -22,6 +22,10 @@
     --mobile-menu-font-size: var(--bloom-font-size-s);
     --navbar-menu-desktop-margin: inherit;
     --navbar-menu-min-width: 110px;
+
+    @media (min-width: $screen-lg) {
+      --link-padding-inline: var(--bloom-s4) var(--bloom-s4) var(--bloom-s3) var(--bloom-s4);
+    }
   }
 
   .doorway-message {