From 56c289e75537f37153e0c23037461769c0d227cb Mon Sep 17 00:00:00 2001 From: Jared White Date: Mon, 25 Nov 2024 12:20:48 -0800 Subject: [PATCH 1/8] feat: add mtc logo to the top nav, remove from footer --- .../src/navigation/LanguageNav.scss | 62 +++++++++++++++--- .../src/navigation/LanguageNav.tsx | 6 ++ sites/public/public/images/mtc-abag-logo.png | Bin 0 -> 31225 bytes .../components/shared/CustomSiteFooter.tsx | 5 -- 4 files changed, 59 insertions(+), 14 deletions(-) create mode 100644 sites/public/public/images/mtc-abag-logo.png diff --git a/doorway-ui-components/src/navigation/LanguageNav.scss b/doorway-ui-components/src/navigation/LanguageNav.scss index 33e8298287..8eef466e10 100644 --- a/doorway-ui-components/src/navigation/LanguageNav.scss +++ b/doorway-ui-components/src/navigation/LanguageNav.scss @@ -3,28 +3,46 @@ --inner-width: inherit; --inner-desktop-padding: inherit; --inner-mobile-padding: inherit; - background-color: var(--bloom-color-gray-200); + + background-color: var(--seeds-bg-color-surface); + + @media (min-width: $screen-md) { + background-color: var(--bloom-color-gray-200); + } } .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(--seeds-s2); margin: auto; - padding: var(--inner-mobile-padding); - padding: var(--bloom-s2) 0; + padding-block: var(--seeds-s2) 0; + + @media (min-width: $screen-md) { + flex-direction: row; + align-items: center; + padding-block-end: var(--seeds-s2); + } +} - @media (max-width: $screen-md) { - justify-content: center; +.language-nav { + width: 100%; + background-color: var(--bloom-color-gray-200); + 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); } @@ -49,3 +67,29 @@ background-color: var(--doorway-color-secondary); } } + +.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(--seeds-s2); + + @media (min-width: $screen-md) { + height: 30px; + margin-left: var(--seeds-s5); + } + + @media (min-width: $screen-lg) { + margin-left: -2px; + } + } +} diff --git a/doorway-ui-components/src/navigation/LanguageNav.tsx b/doorway-ui-components/src/navigation/LanguageNav.tsx index 20bb4f5d16..cf35fa7a0c 100644 --- a/doorway-ui-components/src/navigation/LanguageNav.tsx +++ b/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 (
+
+ + {t("footer.mtcLogo")} + +
375 Beale Street, Suite 800 From 68e7a3df8f87e7147b5c563e083274f231e08653 Mon Sep 17 00:00:00 2001 From: Jared White Date: Tue, 26 Nov 2024 20:47:51 -0800 Subject: [PATCH 2/8] feat: add logo link, convert to Seeds design tokens --- .../src/navigation/LanguageNav.scss | 37 +++++++++---------- .../src/navigation/LanguageNav.tsx | 4 +- shared-helpers/src/locales/es.json | 2 +- shared-helpers/src/locales/general.json | 2 +- shared-helpers/src/locales/tl.json | 2 +- shared-helpers/src/locales/vi.json | 2 +- shared-helpers/src/locales/zh.json | 2 +- 7 files changed, 25 insertions(+), 26 deletions(-) diff --git a/doorway-ui-components/src/navigation/LanguageNav.scss b/doorway-ui-components/src/navigation/LanguageNav.scss index 8eef466e10..72036c74d4 100644 --- a/doorway-ui-components/src/navigation/LanguageNav.scss +++ b/doorway-ui-components/src/navigation/LanguageNav.scss @@ -1,37 +1,36 @@ .language-bar { - --inner-max-width: var(--bloom-width-5xl); - --inner-width: inherit; - --inner-desktop-padding: inherit; - --inner-mobile-padding: inherit; + --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(--bloom-color-gray-200); + background-color: var(--bar-background-color); } } .language-bar__inner { max-width: var(--inner-max-width); - width: var(--inner-width); display: flex; flex-direction: column; align-items: start; justify-content: space-between; - gap: var(--seeds-s2); + gap: var(--inner-gap); margin: auto; - padding-block: var(--seeds-s2) 0; + padding-block: var(--inner-gap) 0; @media (min-width: $screen-md) { flex-direction: row; align-items: center; - padding-block-end: var(--seeds-s2); + padding-block-end: var(--inner-gap); } } .language-nav { width: 100%; - background-color: var(--bloom-color-gray-200); + background-color: var(--bar-background-color); padding-block: var(--seeds-s1); @media (min-width: $screen-md) { @@ -49,22 +48,22 @@ } .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); } } @@ -81,7 +80,7 @@ img { height: 20px; - margin-left: var(--seeds-s2); + margin-left: var(--inner-gap); @media (min-width: $screen-md) { height: 30px; diff --git a/doorway-ui-components/src/navigation/LanguageNav.tsx b/doorway-ui-components/src/navigation/LanguageNav.tsx index cf35fa7a0c..9e53ae2179 100644 --- a/doorway-ui-components/src/navigation/LanguageNav.tsx +++ b/doorway-ui-components/src/navigation/LanguageNav.tsx @@ -18,8 +18,8 @@ const LanguageNav = ({ ariaLabel, languages }: LanguageNavProps) => {
- - {t("footer.mtcLogo")} + + {t("nav.mtcLogo")}