From 93a01b014aed0bc45598d7d20a3197bf2d3a03bb Mon Sep 17 00:00:00 2001
From: davidlstarr <davidlstarr@hotmail.com>
Date: Wed, 16 Aug 2023 12:22:02 -0400
Subject: [PATCH 01/10] setup banner alert message for trees in mosaic
 landscape

---
 src/css/header.scss                  | 14 +++-
 src/js/components/banner/Banner.scss | 16 +++++
 src/js/components/banner/Banner.tsx  | 14 ++++
 src/js/components/header/Header.tsx  | 96 +++++++++++++++-------------
 4 files changed, 93 insertions(+), 47 deletions(-)
 create mode 100644 src/js/components/banner/Banner.scss
 create mode 100644 src/js/components/banner/Banner.tsx

diff --git a/src/css/header.scss b/src/css/header.scss
index 0960085ae..d4e4ae52b 100644
--- a/src/css/header.scss
+++ b/src/css/header.scss
@@ -2,6 +2,7 @@
 
 .header-container {
   display: flex;
+  flex-direction: column;
   position: absolute;
   justify-content: space-between;
   width: 100%;
@@ -11,6 +12,17 @@
   z-index: 2;
   font-family: $fira-sans;
   color: $dark-grey;
+  .header-spacer {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    top: 0;
+    height: $header-height;
+    background-color: $header-color;
+    z-index: 2;
+    font-family: $fira-sans;
+    color: $dark-grey;
+  }
 
   .title-container {
     display: flex;
@@ -265,8 +277,6 @@
 
 @media screen and (max-width: $mobile-device) {
   .header-container {
-    justify-content: flex-end;
-
     .title-container {
       width: 100%;
 
diff --git a/src/js/components/banner/Banner.scss b/src/js/components/banner/Banner.scss
new file mode 100644
index 000000000..7dc8ef0a9
--- /dev/null
+++ b/src/js/components/banner/Banner.scss
@@ -0,0 +1,16 @@
+.banner {
+  height: auto;
+  z-index: 1;
+  width: 100%;
+  color: #1a1919;
+  border-color: #f3b229;
+  background-color: #f3b229;
+  text-align: center;
+  h1 {
+    font-size: 0.875rem;
+    font-family: 'Fira Sans', sans-serif;
+    font-weight: bold;
+    padding: 3px;
+    margin: 6px;
+  }
+}
diff --git a/src/js/components/banner/Banner.tsx b/src/js/components/banner/Banner.tsx
new file mode 100644
index 000000000..ff3a0d7d5
--- /dev/null
+++ b/src/js/components/banner/Banner.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import './Banner.scss';
+const Banner = () => {
+  return (
+    <div className="banner">
+      <h1 className="banner__text__title">
+        Trees in Mosaic Landscape dataset will be deprecated as of Aug 2024. Please update your configurations by going
+        to <a href="https://mapbuilder.wri.org/">https://mapbuilder.wri.org/</a>.
+      </h1>
+    </div>
+  );
+};
+
+export default Banner;
diff --git a/src/js/components/header/Header.tsx b/src/js/components/header/Header.tsx
index 1786e151e..a6421099d 100644
--- a/src/js/components/header/Header.tsx
+++ b/src/js/components/header/Header.tsx
@@ -10,6 +10,7 @@ import { RootState } from '../../../js/store/index';
 import { headerContent } from '../../../../configs/translations/header.translations';
 
 import '../../../css/header.scss';
+import Banner from '../banner/Banner';
 
 const appSettingsSelector = createSelector(
   (state: RootState) => state.appSettings,
@@ -70,54 +71,59 @@ const Header: FunctionComponent = () => {
   const alternativeMapThemeArray = alternativeMapThemes?.split(';');
   const renderThemeDropdown = Boolean(mapThemes.length) && mapThemeIDArray.length === mapThemeArray.length;
   return (
-    <div className="header-container" data-cy="header">
-      <div className="title-container">
-        {logoUrl && logoLinkUrl && (
-          <a href={logoLinkUrl} target={target} rel="noopener noreferrer" tabIndex={0}>
-            <img src={logoUrl} alt="Global Forest Watch logo" className="gfw-logo" />
-          </a>
-        )}
-        <div className="titles">
-          <h1>{appTitle.toUpperCase()}</h1>
-          <h2>{appSubtitle}</h2>
-        </div>
-      </div>
-      <div className="selectors-container">
-        {renderThemeDropdown && (
-          <ThemeDropdown
-            selectedLanguage={selectedLanguage}
-            alternativeLanguage={alternativeLanguage}
-            mapThemeIds={mapThemeIDArray}
-            mapThemes={mapThemeArray}
-            alternativeMapThemes={alternativeMapThemeArray}
-          />
-        )}
-        {downloadLinkUrl && downloadLinkUrl.length && (
-          <div>
-            <a className="header-link" href={aboutLinkUrl} target={target} rel="noopener noreferrer">
-              <DownloadIcon width={16} height={16} fill={'#555'} />
-              {headerContent[selectedLanguage].download}
-            </a>
+    <>
+      <div className="header-container" data-cy="header">
+        <Banner />
+        <div className="header-spacer">
+          <div className="title-container">
+            {logoUrl && logoLinkUrl && (
+              <a href={logoLinkUrl} target={target} rel="noopener noreferrer" tabIndex={0}>
+                <img src={logoUrl} alt="Global Forest Watch logo" className="gfw-logo" />
+              </a>
+            )}
+            <div className="titles">
+              <h1>{appTitle.toUpperCase()}</h1>
+              <h2>{appSubtitle}</h2>
+            </div>
           </div>
-        )}
-        {aboutLinkUrl && aboutLinkUrl.length && (
-          <div>
-            <a className="header-link" href={aboutLinkUrl} target={target} rel="noopener noreferrer">
-              <AboutIcon width={16} height={16} fill={'#555'} />
-              {headerContent[selectedLanguage].about}
-            </a>
+          <div className="selectors-container">
+            {renderThemeDropdown && (
+              <ThemeDropdown
+                selectedLanguage={selectedLanguage}
+                alternativeLanguage={alternativeLanguage}
+                mapThemeIds={mapThemeIDArray}
+                mapThemes={mapThemeArray}
+                alternativeMapThemes={alternativeMapThemeArray}
+              />
+            )}
+            {downloadLinkUrl && downloadLinkUrl.length && (
+              <div>
+                <a className="header-link" href={aboutLinkUrl} target={target} rel="noopener noreferrer">
+                  <DownloadIcon width={16} height={16} fill={'#555'} />
+                  {headerContent[selectedLanguage].download}
+                </a>
+              </div>
+            )}
+            {aboutLinkUrl && aboutLinkUrl.length && (
+              <div>
+                <a className="header-link" href={aboutLinkUrl} target={target} rel="noopener noreferrer">
+                  <AboutIcon width={16} height={16} fill={'#555'} />
+                  {headerContent[selectedLanguage].about}
+                </a>
+              </div>
+            )}
+            {useAlternativeLanguage && alternativeWebmap && alternativeLanguage && (
+              <LanguageDropdown
+                language={language}
+                alternativeLanguage={alternativeLanguage}
+                selectedLanguage={selectedLanguage}
+              />
+            )}
+            {includeMyGFWLogin && <GFWLoginDropdown loggedIn={isLoggedIn} />}
           </div>
-        )}
-        {useAlternativeLanguage && alternativeWebmap && alternativeLanguage && (
-          <LanguageDropdown
-            language={language}
-            alternativeLanguage={alternativeLanguage}
-            selectedLanguage={selectedLanguage}
-          />
-        )}
-        {includeMyGFWLogin && <GFWLoginDropdown loggedIn={isLoggedIn} />}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

From c2a9b6379c5c19ecf35cd1e964d1ca1409c648ef Mon Sep 17 00:00:00 2001
From: davidlstarr <davidlstarr@hotmail.com>
Date: Wed, 16 Aug 2023 13:28:37 -0400
Subject: [PATCH 02/10] setup banner to only trigger when treesMosaicLandscapes
 is set to true

---
 src/js/components/header/Header.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/js/components/header/Header.tsx b/src/js/components/header/Header.tsx
index a6421099d..c724c5135 100644
--- a/src/js/components/header/Header.tsx
+++ b/src/js/components/header/Header.tsx
@@ -54,14 +54,14 @@ const Header: FunctionComponent = () => {
 
   const isLoggedIn = useSelector((store: RootState) => store.appState.isLoggedIn);
 
-  const renderGFWDropdown = useSelector((store: RootState) => store.appState.renderGFWDropdown);
-
   const navLinksInNewTab = useSelector((store: RootState) => store.appSettings.navLinksInNewTab);
 
   const downloadLinkUrl = useSelector((store: RootState) => store.appSettings.downloadLinkUrl);
 
   const aboutLinkUrl = useSelector((store: RootState) => store.appSettings.aboutLinkUrl);
 
+  const appSettings = useSelector((state: any) => state.appSettings);
+
   const target = navLinksInNewTab ? '_blank' : '_self';
   const appTitle = selectedLanguage === language ? title : alternativeLanguageTitle;
   const appSubtitle = selectedLanguage === language ? subtitle : alternativeLanguageSubtitle;
@@ -70,10 +70,11 @@ const Header: FunctionComponent = () => {
   const mapThemeIDArray = mapThemeIds?.split(';');
   const alternativeMapThemeArray = alternativeMapThemes?.split(';');
   const renderThemeDropdown = Boolean(mapThemes.length) && mapThemeIDArray.length === mapThemeArray.length;
+
   return (
     <>
       <div className="header-container" data-cy="header">
-        <Banner />
+        {appSettings.treeMosaicLandscapes && <Banner />}
         <div className="header-spacer">
           <div className="title-container">
             {logoUrl && logoLinkUrl && (

From 84915906247cf4e2323bb4242610d99ff07f5709 Mon Sep 17 00:00:00 2001
From: davidlstarr <davidlstarr@hotmail.com>
Date: Wed, 16 Aug 2023 13:34:58 -0400
Subject: [PATCH 03/10] updated banner text

---
 src/js/components/banner/Banner.scss | 1 +
 src/js/components/banner/Banner.tsx  | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/js/components/banner/Banner.scss b/src/js/components/banner/Banner.scss
index 7dc8ef0a9..b0bb4d20a 100644
--- a/src/js/components/banner/Banner.scss
+++ b/src/js/components/banner/Banner.scss
@@ -5,6 +5,7 @@
   color: #1a1919;
   border-color: #f3b229;
   background-color: #f3b229;
+  line-height: 17px;
   text-align: center;
   h1 {
     font-size: 0.875rem;
diff --git a/src/js/components/banner/Banner.tsx b/src/js/components/banner/Banner.tsx
index ff3a0d7d5..a474aa87f 100644
--- a/src/js/components/banner/Banner.tsx
+++ b/src/js/components/banner/Banner.tsx
@@ -4,8 +4,9 @@ const Banner = () => {
   return (
     <div className="banner">
       <h1 className="banner__text__title">
-        Trees in Mosaic Landscape dataset will be deprecated as of Aug 2024. Please update your configurations by going
-        to <a href="https://mapbuilder.wri.org/">https://mapbuilder.wri.org/</a>.
+        The Trees in Mosaic Landscapes dataset will be deprecated as of February 2024. Please use our new Tropical Tree
+        Cover dataset instead. Find out more at{' '}
+        <a href="http://mapbuilder.wri.org/tutorials/tml-to-tcc">Replacing Trees in Mosaic Landscapes - MapBuilder </a>
       </h1>
     </div>
   );

From d3c163414bd24a99e44e6a30d94e128a37b5db5d Mon Sep 17 00:00:00 2001
From: davidlstarr <davidlstarr@hotmail.com>
Date: Wed, 16 Aug 2023 13:54:58 -0400
Subject: [PATCH 04/10] added target blank to href

---
 src/js/components/banner/Banner.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/js/components/banner/Banner.tsx b/src/js/components/banner/Banner.tsx
index a474aa87f..2ecfc5564 100644
--- a/src/js/components/banner/Banner.tsx
+++ b/src/js/components/banner/Banner.tsx
@@ -6,7 +6,9 @@ const Banner = () => {
       <h1 className="banner__text__title">
         The Trees in Mosaic Landscapes dataset will be deprecated as of February 2024. Please use our new Tropical Tree
         Cover dataset instead. Find out more at{' '}
-        <a href="http://mapbuilder.wri.org/tutorials/tml-to-tcc">Replacing Trees in Mosaic Landscapes - MapBuilder </a>
+        <a href="http://mapbuilder.wri.org/tutorials/tml-to-tcc" target="_blank">
+          Replacing Trees in Mosaic Landscapes - MapBuilder{' '}
+        </a>
       </h1>
     </div>
   );

From ce030218d9cb419fdac4d0e28ab05b8a857878f5 Mon Sep 17 00:00:00 2001
From: davidlstarr <davidlstarr@hotmail.com>
Date: Wed, 16 Aug 2023 14:57:57 -0400
Subject: [PATCH 05/10] code cleanup

---
 src/js/components/banner/Banner.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/components/banner/Banner.tsx b/src/js/components/banner/Banner.tsx
index 2ecfc5564..cab989724 100644
--- a/src/js/components/banner/Banner.tsx
+++ b/src/js/components/banner/Banner.tsx
@@ -5,9 +5,9 @@ const Banner = () => {
     <div className="banner">
       <h1 className="banner__text__title">
         The Trees in Mosaic Landscapes dataset will be deprecated as of February 2024. Please use our new Tropical Tree
-        Cover dataset instead. Find out more at{' '}
+        Cover dataset instead. Find out more at
         <a href="http://mapbuilder.wri.org/tutorials/tml-to-tcc" target="_blank">
-          Replacing Trees in Mosaic Landscapes - MapBuilder{' '}
+          Replacing Trees in Mosaic Landscapes - MapBuilder
         </a>
       </h1>
     </div>

From a940a76f77aab70fce574967bb5042b487920b84 Mon Sep 17 00:00:00 2001
From: davidlstarr <davidlstarr@hotmail.com>
Date: Wed, 16 Aug 2023 19:09:56 -0400
Subject: [PATCH 06/10] add spacing

---
 src/js/components/banner/Banner.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/components/banner/Banner.tsx b/src/js/components/banner/Banner.tsx
index cab989724..2ecfc5564 100644
--- a/src/js/components/banner/Banner.tsx
+++ b/src/js/components/banner/Banner.tsx
@@ -5,9 +5,9 @@ const Banner = () => {
     <div className="banner">
       <h1 className="banner__text__title">
         The Trees in Mosaic Landscapes dataset will be deprecated as of February 2024. Please use our new Tropical Tree
-        Cover dataset instead. Find out more at
+        Cover dataset instead. Find out more at{' '}
         <a href="http://mapbuilder.wri.org/tutorials/tml-to-tcc" target="_blank">
-          Replacing Trees in Mosaic Landscapes - MapBuilder
+          Replacing Trees in Mosaic Landscapes - MapBuilder{' '}
         </a>
       </h1>
     </div>

From 2b7fd2ce314a1db538322f39e047f08a166332b5 Mon Sep 17 00:00:00 2001
From: davidlstarr <davidlstarr@hotmail.com>
Date: Thu, 17 Aug 2023 10:40:08 -0400
Subject: [PATCH 07/10] added translations

---
 configs/translations/header.translations.ts | 77 ++++++++++++++++-----
 src/js/components/banner/Banner.tsx         | 15 ++--
 2 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/configs/translations/header.translations.ts b/configs/translations/header.translations.ts
index ea72a5ddb..2032a3a1a 100644
--- a/configs/translations/header.translations.ts
+++ b/configs/translations/header.translations.ts
@@ -15,7 +15,7 @@ export const headerContent = {
     stories: 'My Stories',
     profile: 'My GFW Profile',
     logout: 'Log Out',
-    language: 'Select Language'
+    language: 'Select Language',
   },
   az: {
     about: 'About',
@@ -33,7 +33,7 @@ export const headerContent = {
     stories: 'Mənim Hekayələrim',
     profile: 'Mənim GFW profilim',
     logout: 'Çıxış',
-    language: 'Dili seçin'
+    language: 'Dili seçin',
   },
   nl: {
     about: 'Over ons',
@@ -51,7 +51,7 @@ export const headerContent = {
     stories: 'Mijn verhalen ',
     profile: 'Mijn GFW Profiel',
     logout: 'Log Uit',
-    language: 'Kies taal'
+    language: 'Kies taal',
   },
   hy: {
     about: 'Մեր մասին',
@@ -69,7 +69,7 @@ export const headerContent = {
     stories: 'Իմ պատմությունները ',
     profile: 'Իմ ԱԳՀ հաշիվը/էջը ',
     logout: 'Դուրս գալ ',
-    language: 'Ընտրել լեզուն '
+    language: 'Ընտրել լեզուն ',
   },
   ka: {
     about: 'პროექტის შესახებ',
@@ -87,7 +87,7 @@ export const headerContent = {
     stories: 'My Stories',
     profile: 'ჩემი "GFW" პროფილი',
     logout: 'გამოსვლა',
-    language: 'ენის არჩევა'
+    language: 'ენის არჩევა',
   },
   fr: {
     about: 'A Propos',
@@ -95,8 +95,7 @@ export const headerContent = {
     mapThemes: 'Thèmes',
     myGFWLogin: 'Se connecter à GFW',
     myGFW: 'GFW',
-    loginReq:
-      'Vous devez être connecté pour afficher, gérer et supprimer vos abonnements. Des questions? ',
+    loginReq: 'Vous devez être connecté pour afficher, gérer et supprimer vos abonnements. Des questions? ',
     contactUs: 'Contactez-nous',
     twitter: 'Connectez-vous avec Twitter',
     facebook: 'Connectez-vous avec Facebook',
@@ -105,7 +104,7 @@ export const headerContent = {
     stories: 'Mes histoires',
     profile: 'Mon profil',
     logout: 'Déconnecter',
-    language: 'Choisir Langue'
+    language: 'Choisir Langue',
   },
   es: {
     about: 'Acerca de',
@@ -113,8 +112,7 @@ export const headerContent = {
     mapThemes: 'Temas',
     myGFWLogin: 'Entrar a mi GFW',
     myGFW: 'MI GFW',
-    loginReq:
-      'Es necesario iniciar sesión para ver, administrar y eliminar tus suscripciones. ¿Alguna pregunta? ',
+    loginReq: 'Es necesario iniciar sesión para ver, administrar y eliminar tus suscripciones. ¿Alguna pregunta? ',
     contactUs: 'Contáctanos',
     twitter: 'Ingresar con Twitter',
     facebook: 'Iniciar sesión con Facebook',
@@ -123,7 +121,7 @@ export const headerContent = {
     stories: 'Mis historias',
     profile: 'Mon profil',
     logout: 'Cerrar sesión',
-    language: 'Seleccionar idioma'
+    language: 'Seleccionar idioma',
   },
   pt: {
     about: 'Sobre',
@@ -131,8 +129,7 @@ export const headerContent = {
     mapThemes: 'Temas do Mapa',
     myGFWLogin: 'Fazer Login no MEU GFW',
     myGFW: 'MEU GFW',
-    loginReq:
-      'É necessário iniciar uma sessão para visualizar, gerenciar e deletar suas assinaturas. Dúvidas? ',
+    loginReq: 'É necessário iniciar uma sessão para visualizar, gerenciar e deletar suas assinaturas. Dúvidas? ',
     contactUs: 'Entre em contato',
     twitter: 'Entrar com Twitter',
     facebook: 'Entrar Com Facebook',
@@ -141,7 +138,7 @@ export const headerContent = {
     stories: 'My Stories',
     profile: 'Mon profil',
     logout: 'Sair',
-    language: 'Selecionar Idioma'
+    language: 'Selecionar Idioma',
   },
   id: {
     about: 'About',
@@ -149,8 +146,7 @@ export const headerContent = {
     mapThemes: 'Map Themes',
     myGFWLogin: 'Log in to my GFW',
     myGFW: 'MY GFW',
-    loginReq:
-      'Anda harus masuk untuk dapat melihat, mengelola, serta menghapus langganan Anda. Ada pertanyaan? ',
+    loginReq: 'Anda harus masuk untuk dapat melihat, mengelola, serta menghapus langganan Anda. Ada pertanyaan? ',
     contactUs: 'Hubungi kami',
     twitter: 'Masuk dengan Twitter',
     facebook: 'Masuk dengan Facebook',
@@ -159,7 +155,7 @@ export const headerContent = {
     stories: 'Cerita Saya',
     profile: 'Mon profil',
     logout: 'Keluar',
-    language: 'Select Language'
+    language: 'Select Language',
   },
   zh: {
     about: '关于',
@@ -176,6 +172,49 @@ export const headerContent = {
     stories: '我的故事',
     profile: '我的概述',
     logout: '注销',
-    language: '选择语言'
-  }
+    language: '选择语言',
+  },
+};
+
+export const bannerContent = {
+  en: {
+    text: 'The Trees in Mosaic Landscapes dataset1 will be deprecated as of February 2024. Please use our new Tropical Tree Cover dataset instead. Find out more at',
+    linkUrlText: 'Replacing Trees in Mosaic Landscapes - MapBuilder',
+  },
+  az: {
+    text: 'Mozaika Mənzərələrindəki Ağaclar verilənlər bazası 2024-cü ilin fevral ayından etibarən köhnələcək. Əvəzində yeni Tropik Ağac Örtüsü məlumat dəstimizdən istifadə edin. Daha çox məlumatı Mozaika mənzərələrində ağacların dəyişdirilməsi - MapBuilder-də tapın',
+    linkUrlText: 'Mozaika mənzərələrində ağacların dəyişdirilməsi - MapBuilder',
+  },
+  nl: {
+    text: 'De dataset Trees in Mosaic Landscapes1 wordt beëindigd vanaf februari 2024. Gebruik in plaats daarvan onze nieuwe Tropical Tree Cover-dataset. Lees meer op',
+    linkUrlText: 'Bomen vervangen in mozaïeklandschappen - MapBuilder',
+  },
+  hy: {
+    text: '«Ծառերը խճանկարային լանդշաֆտներում» տվյալների հավաքածուն1 կհնացվի 2024 թվականի փետրվարից: Փոխարենը օգտագործեք մեր նոր Տրոպիկական ծառերի ծածկույթի տվյալների հավաքածուն: Իմացեք ավելին այստեղ',
+    linkUrlText: 'Ծառերի փոխարինում խճանկարային լանդշաֆտներում - MapBuilder',
+  },
+  ka: {
+    text: 'ხეები მოზაიკის პეიზაჟებში მოძველებული იქნება 2024 წლის თებერვლიდან. ამის ნაცვლად, გთხოვთ, გამოიყენოთ ჩვენი ახალი ტროპიკული ხეების საფარის მონაცემთა ნაკრები. შეიტყვეთ მეტი ხეების ჩანაცვლება მოზაიკურ პეიზაჟებში - MapBuilder',
+    linkUrlText: 'ხეების ჩანაცვლება მოზაიკურ პეიზაჟებში - MapBuilder',
+  },
+  fr: {
+    text: 'Le jeu de données Trees in Mosaic Landscapes sera obsolète à partir de février 2024. Veuillez utiliser notre nouveau jeu de données Tropical Tree Cover à la place. En savoir plus sur Remplacer les arbres dans les paysages en mosaïque - MapBuilder',
+    linkUrlText: 'Remplacer les arbres dans les paysages en mosaïque - MapBuilder',
+  },
+  es: {
+    text: 'El conjunto de datos Trees in Mosaic Landscapes quedará obsoleto a partir de febrero de 2024. En su lugar, utilice nuestro nuevo conjunto de datos Cobertura de árboles tropicales. Obtenga más información en Sustitución de árboles en paisajes de mosaico - MapBuilder',
+    linkUrlText: 'Sustitución de árboles en paisajes de mosaico - MapBuilder',
+  },
+  pt: {
+    text: 'O conjunto de dados Trees in Mosaic Landscapes será descontinuado a partir de fevereiro de 2024. Em vez disso, use nosso novo conjunto de dados Tropical Tree Cover. Saiba mais em Substituição de árvores em paisagens de mosaico - MapBuilder',
+    linkUrlText: 'Substituindo Árvores em Paisagens em Mosaico - MapBuilder',
+  },
+  id: {
+    text: 'Set data Pepohonan dalam Lanskap Mosaik tidak akan digunakan lagi mulai Februari 2024. Sebagai gantinya, gunakan set data Tutupan Pohon Tropis kami yang baru. Cari tahu lebih lanjut di Mengganti Pohon di Lanskap Mosaik - MapBuilder',
+    linkUrlText: 'Mengganti Pohon di Lanskap Mosaik - MapBuilder',
+  },
+  zh: {
+    text: '自 2024 年 2 月起，马赛克景观中的树木数据集将被弃用。请改用我们新的热带树木覆盖数据集。了解更多信息，请参阅替换马赛克景观中的树木 - MapBuilder',
+    linkUrlText: '替换马赛克景观中的树木 - MapBuilder',
+  },
 };
diff --git a/src/js/components/banner/Banner.tsx b/src/js/components/banner/Banner.tsx
index 2ecfc5564..e0b69ed97 100644
--- a/src/js/components/banner/Banner.tsx
+++ b/src/js/components/banner/Banner.tsx
@@ -1,13 +1,20 @@
 import React from 'react';
 import './Banner.scss';
+import { bannerContent } from '../../../../configs/translations/header.translations';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../store';
+
 const Banner = () => {
+  const selectedLanguage = useSelector((store: RootState) => store.appState.selectedLanguage);
+  console.log(bannerContent);
+  console.log(selectedLanguage);
+  console.log(bannerContent[selectedLanguage].text);
   return (
     <div className="banner">
       <h1 className="banner__text__title">
-        The Trees in Mosaic Landscapes dataset will be deprecated as of February 2024. Please use our new Tropical Tree
-        Cover dataset instead. Find out more at{' '}
-        <a href="http://mapbuilder.wri.org/tutorials/tml-to-tcc" target="_blank">
-          Replacing Trees in Mosaic Landscapes - MapBuilder{' '}
+        {bannerContent[selectedLanguage].text}{' '}
+        <a href={'http://mapbuilder.wri.org/tutorials/tml-to-tcc'} className="banner__text__link">
+          {bannerContent[selectedLanguage].linkUrlText}
         </a>
       </h1>
     </div>

From 92dc46ebf7fe92270a91a831d50199339e66b9b6 Mon Sep 17 00:00:00 2001
From: davidlstarr <davidlstarr@hotmail.com>
Date: Thu, 17 Aug 2023 10:48:37 -0400
Subject: [PATCH 08/10] added translations

---
 configs/resources.js                        |  4 ++--
 configs/translations/header.translations.ts | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/configs/resources.js b/configs/resources.js
index f150bed38..55ebb3780 100644
--- a/configs/resources.js
+++ b/configs/resources.js
@@ -17,8 +17,8 @@ export default {
   navLinksInNewTab: false,
   customColorTheme: '',
   language: 'en',
-  useAlternativeLanguage: false,
-  alternativeWebmap: '',
+  useAlternativeLanguage: true,
+  alternativeWebmap: 'de85e3fcc07948238aa6c1afd2a4ceb0',
   alternativeLanguage: 'fr',
   alternativeLanguageTitle: 'Mapbuilder',
   alternativeLanguageSubtitle: 'Make maps that matter',
diff --git a/configs/translations/header.translations.ts b/configs/translations/header.translations.ts
index 2032a3a1a..ab5d5cf08 100644
--- a/configs/translations/header.translations.ts
+++ b/configs/translations/header.translations.ts
@@ -182,7 +182,7 @@ export const bannerContent = {
     linkUrlText: 'Replacing Trees in Mosaic Landscapes - MapBuilder',
   },
   az: {
-    text: 'Mozaika Mənzərələrindəki Ağaclar verilənlər bazası 2024-cü ilin fevral ayından etibarən köhnələcək. Əvəzində yeni Tropik Ağac Örtüsü məlumat dəstimizdən istifadə edin. Daha çox məlumatı Mozaika mənzərələrində ağacların dəyişdirilməsi - MapBuilder-də tapın',
+    text: 'Mozaika Mənzərələrindəki Ağaclar dataset1 2024-cü ilin fevral ayından etibarən köhnələcək. Əvəzində yeni Tropik Ağac Örtüsü məlumat dəstimizdən istifadə edin. Ətraflı buradan öyrənin',
     linkUrlText: 'Mozaika mənzərələrində ağacların dəyişdirilməsi - MapBuilder',
   },
   nl: {
@@ -194,27 +194,27 @@ export const bannerContent = {
     linkUrlText: 'Ծառերի փոխարինում խճանկարային լանդշաֆտներում - MapBuilder',
   },
   ka: {
-    text: 'ხეები მოზაიკის პეიზაჟებში მოძველებული იქნება 2024 წლის თებერვლიდან. ამის ნაცვლად, გთხოვთ, გამოიყენოთ ჩვენი ახალი ტროპიკული ხეების საფარის მონაცემთა ნაკრები. შეიტყვეთ მეტი ხეების ჩანაცვლება მოზაიკურ პეიზაჟებში - MapBuilder',
+    text: 'ხეები მოზაიკის პეიზაჟებში მონაცემთა ნაკრები1 მოძველდება 2024 წლის თებერვლიდან. ამის ნაცვლად, გთხოვთ, გამოიყენოთ ჩვენი ახალი ტროპიკული ხეების საფარის მონაცემთა ნაკრები. შეიტყვეთ მეტი აქ',
     linkUrlText: 'ხეების ჩანაცვლება მოზაიკურ პეიზაჟებში - MapBuilder',
   },
   fr: {
-    text: 'Le jeu de données Trees in Mosaic Landscapes sera obsolète à partir de février 2024. Veuillez utiliser notre nouveau jeu de données Tropical Tree Cover à la place. En savoir plus sur Remplacer les arbres dans les paysages en mosaïque - MapBuilder',
+    text: 'Le jeu de données Trees in Mosaic Landscapes1 sera obsolète à partir de février 2024. Veuillez utiliser notre nouveau jeu de données Tropical Tree Cover à la place. En savoir plus sur',
     linkUrlText: 'Remplacer les arbres dans les paysages en mosaïque - MapBuilder',
   },
   es: {
-    text: 'El conjunto de datos Trees in Mosaic Landscapes quedará obsoleto a partir de febrero de 2024. En su lugar, utilice nuestro nuevo conjunto de datos Cobertura de árboles tropicales. Obtenga más información en Sustitución de árboles en paisajes de mosaico - MapBuilder',
+    text: 'El conjunto de datos Trees in Mosaic Landscapes1 quedará obsoleto a partir de febrero de 2024. En su lugar, utilice nuestro nuevo conjunto de datos Cobertura de árboles tropicales. Obtenga más información en',
     linkUrlText: 'Sustitución de árboles en paisajes de mosaico - MapBuilder',
   },
   pt: {
-    text: 'O conjunto de dados Trees in Mosaic Landscapes será descontinuado a partir de fevereiro de 2024. Em vez disso, use nosso novo conjunto de dados Tropical Tree Cover. Saiba mais em Substituição de árvores em paisagens de mosaico - MapBuilder',
+    text: 'O conjunto de dados Trees in Mosaic Landscapes1 será descontinuado a partir de fevereiro de 2024. Em vez disso, use nosso novo conjunto de dados Tropical Tree Cover. Saiba mais em',
     linkUrlText: 'Substituindo Árvores em Paisagens em Mosaico - MapBuilder',
   },
   id: {
-    text: 'Set data Pepohonan dalam Lanskap Mosaik tidak akan digunakan lagi mulai Februari 2024. Sebagai gantinya, gunakan set data Tutupan Pohon Tropis kami yang baru. Cari tahu lebih lanjut di Mengganti Pohon di Lanskap Mosaik - MapBuilder',
+    text: 'Kumpulan data Trees in Mosaic Landscapes1 tidak akan digunakan lagi mulai Februari 2024. Sebagai gantinya, gunakan kumpulan data Tutupan Pohon Tropis kami yang baru. Cari tahu lebih lanjut di',
     linkUrlText: 'Mengganti Pohon di Lanskap Mosaik - MapBuilder',
   },
   zh: {
-    text: '自 2024 年 2 月起，马赛克景观中的树木数据集将被弃用。请改用我们新的热带树木覆盖数据集。了解更多信息，请参阅替换马赛克景观中的树木 - MapBuilder',
+    text: '自 2024 年 2 月起，马赛克景观中的树木数据集 1 将被弃用。请改用我们新的热带树木覆盖数据集。欲了解更多信息，请访问',
     linkUrlText: '替换马赛克景观中的树木 - MapBuilder',
   },
 };

From e736143345906d8e052aab0d95a7f4c0447dfc64 Mon Sep 17 00:00:00 2001
From: davidlstarr <davidlstarr@hotmail.com>
Date: Thu, 17 Aug 2023 10:58:21 -0400
Subject: [PATCH 09/10] added translations

---
 configs/translations/header.translations.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/configs/translations/header.translations.ts b/configs/translations/header.translations.ts
index ab5d5cf08..4f5f340e6 100644
--- a/configs/translations/header.translations.ts
+++ b/configs/translations/header.translations.ts
@@ -178,43 +178,43 @@ export const headerContent = {
 
 export const bannerContent = {
   en: {
-    text: 'The Trees in Mosaic Landscapes dataset1 will be deprecated as of February 2024. Please use our new Tropical Tree Cover dataset instead. Find out more at',
+    text: 'The Trees in Mosaic Landscapes dataset will be deprecated as of February 2024. Please use our new Tropical Tree Cover dataset instead. Find out more at',
     linkUrlText: 'Replacing Trees in Mosaic Landscapes - MapBuilder',
   },
   az: {
-    text: 'Mozaika Mənzərələrindəki Ağaclar dataset1 2024-cü ilin fevral ayından etibarən köhnələcək. Əvəzində yeni Tropik Ağac Örtüsü məlumat dəstimizdən istifadə edin. Ətraflı buradan öyrənin',
+    text: 'Mozaika Mənzərələrindəki Ağaclar verilənlər bazası 2024-cü ilin fevral ayından etibarən köhnələcək. Əvəzində yeni Tropik Ağac Örtüsü məlumat dəstimizdən istifadə edin. Ətraflı buradan öyrənin',
     linkUrlText: 'Mozaika mənzərələrində ağacların dəyişdirilməsi - MapBuilder',
   },
   nl: {
-    text: 'De dataset Trees in Mosaic Landscapes1 wordt beëindigd vanaf februari 2024. Gebruik in plaats daarvan onze nieuwe Tropical Tree Cover-dataset. Lees meer op',
+    text: 'De dataset Trees in Mosaic Landscapes wordt vanaf februari 2024 beëindigd. Gebruik in plaats daarvan onze nieuwe Tropical Tree Cover-dataset. Lees meer op',
     linkUrlText: 'Bomen vervangen in mozaïeklandschappen - MapBuilder',
   },
   hy: {
-    text: '«Ծառերը խճանկարային լանդշաֆտներում» տվյալների հավաքածուն1 կհնացվի 2024 թվականի փետրվարից: Փոխարենը օգտագործեք մեր նոր Տրոպիկական ծառերի ծածկույթի տվյալների հավաքածուն: Իմացեք ավելին այստեղ',
+    text: '«Ծառերը մոզաիկ լանդշաֆտներում» տվյալների բազան կհնացվի 2024 թվականի փետրվարից: Փոխարենը, խնդրում ենք օգտագործել մեր նոր «Արևադարձային ծառերի ծածկույթի» տվյալները: Իմացեք ավելին այստեղ',
     linkUrlText: 'Ծառերի փոխարինում խճանկարային լանդշաֆտներում - MapBuilder',
   },
   ka: {
-    text: 'ხეები მოზაიკის პეიზაჟებში მონაცემთა ნაკრები1 მოძველდება 2024 წლის თებერვლიდან. ამის ნაცვლად, გთხოვთ, გამოიყენოთ ჩვენი ახალი ტროპიკული ხეების საფარის მონაცემთა ნაკრები. შეიტყვეთ მეტი აქ',
+    text: 'ხეები მოზაიკის პეიზაჟებში მოძველებული იქნება 2024 წლის თებერვლიდან. ამის ნაცვლად, გთხოვთ, გამოიყენოთ ჩვენი ახალი ტროპიკული ხეების საფარის მონაცემთა ნაკრები. შეიტყვეთ მეტი აქ',
     linkUrlText: 'ხეების ჩანაცვლება მოზაიკურ პეიზაჟებში - MapBuilder',
   },
   fr: {
-    text: 'Le jeu de données Trees in Mosaic Landscapes1 sera obsolète à partir de février 2024. Veuillez utiliser notre nouveau jeu de données Tropical Tree Cover à la place. En savoir plus sur',
+    text: 'Le jeu de données Trees in Mosaic Landscapes sera obsolète à partir de février 2024. Veuillez utiliser notre nouveau jeu de données Tropical Tree Cover à la place. En savoir plus sur',
     linkUrlText: 'Remplacer les arbres dans les paysages en mosaïque - MapBuilder',
   },
   es: {
-    text: 'El conjunto de datos Trees in Mosaic Landscapes1 quedará obsoleto a partir de febrero de 2024. En su lugar, utilice nuestro nuevo conjunto de datos Cobertura de árboles tropicales. Obtenga más información en',
+    text: 'El conjunto de datos Trees in Mosaic Landscapes quedará obsoleto a partir de febrero de 2024. En su lugar, utilice nuestro nuevo conjunto de datos Cobertura de árboles tropicales. Obtenga más información en',
     linkUrlText: 'Sustitución de árboles en paisajes de mosaico - MapBuilder',
   },
   pt: {
-    text: 'O conjunto de dados Trees in Mosaic Landscapes1 será descontinuado a partir de fevereiro de 2024. Em vez disso, use nosso novo conjunto de dados Tropical Tree Cover. Saiba mais em',
+    text: 'O conjunto de dados Trees in Mosaic Landscapes será descontinuado a partir de fevereiro de 2024. Em vez disso, use nosso novo conjunto de dados Tropical Tree Cover. Saiba mais em',
     linkUrlText: 'Substituindo Árvores em Paisagens em Mosaico - MapBuilder',
   },
   id: {
-    text: 'Kumpulan data Trees in Mosaic Landscapes1 tidak akan digunakan lagi mulai Februari 2024. Sebagai gantinya, gunakan kumpulan data Tutupan Pohon Tropis kami yang baru. Cari tahu lebih lanjut di',
+    text: 'Set data Pepohonan dalam Lanskap Mosaik tidak akan digunakan lagi mulai Februari 2024. Sebagai gantinya, gunakan set data Tutupan Pohon Tropis kami yang baru. Cari tahu lebih lanjut di',
     linkUrlText: 'Mengganti Pohon di Lanskap Mosaik - MapBuilder',
   },
   zh: {
-    text: '自 2024 年 2 月起，马赛克景观中的树木数据集 1 将被弃用。请改用我们新的热带树木覆盖数据集。欲了解更多信息，请访问',
+    text: '自 2024 年 2 月起，马赛克景观中的树木数据集将被弃用。请改用我们新的热带树木覆盖数据集。欲了解更多信息，请访问',
     linkUrlText: '替换马赛克景观中的树木 - MapBuilder',
   },
 };

From 36ff585e3d7c59c550d802e71c06c6a584de2b72 Mon Sep 17 00:00:00 2001
From: davidlstarr <davidlstarr@hotmail.com>
Date: Wed, 23 Aug 2023 09:51:05 -0400
Subject: [PATCH 10/10] added target='_blank' to Banner.tsx

---
 src/js/components/banner/Banner.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/js/components/banner/Banner.tsx b/src/js/components/banner/Banner.tsx
index e0b69ed97..d618daf64 100644
--- a/src/js/components/banner/Banner.tsx
+++ b/src/js/components/banner/Banner.tsx
@@ -6,14 +6,11 @@ import { RootState } from '../../store';
 
 const Banner = () => {
   const selectedLanguage = useSelector((store: RootState) => store.appState.selectedLanguage);
-  console.log(bannerContent);
-  console.log(selectedLanguage);
-  console.log(bannerContent[selectedLanguage].text);
   return (
     <div className="banner">
       <h1 className="banner__text__title">
         {bannerContent[selectedLanguage].text}{' '}
-        <a href={'http://mapbuilder.wri.org/tutorials/tml-to-tcc'} className="banner__text__link">
+        <a href={'http://mapbuilder.wri.org/tutorials/tml-to-tcc'} className="banner__text__link" target="_blank">
           {bannerContent[selectedLanguage].linkUrlText}
         </a>
       </h1>