Change logos in header and pdf

src/components/half-earth-logo/component.jsx

@@ -1,26 +1,28 @@
 import React from 'react';
 
-import { ReactComponent as Logo } from 'icons/icon_half-earth.svg';
-import { ReactComponent as LogoColour } from 'icons/icon_half-earth_colour.svg';
-import { ReactComponent as LogoPDF } from 'icons/pdf-logo.svg';
+import { t } from '@transifex/native';
 
-function HalfEarthLogo({ withBackground, className, pdf, linkClassName }) {
-  const logo = withBackground ? (
-    <LogoColour className={className} />
+import logoImg from 'icons/eowilson_logo.png';
+import logoImgBlack from 'icons/eowilson_logo_black.png';
+
+function Logo({ className, pdf, linkClassName }) {
+  const alt = t('E.O. Wilson Biodiversity Foundation logo');
+  const logo = pdf ? (
+    <img src={logoImgBlack} alt={alt} className={className} />
   ) : (
-    <Logo className={className} />
+    <img src={logoImg} alt={alt} className={className} />
   );
 
   return (
     <a
-      href="https://www.half-earthproject.org"
+      href="https://eowilsonfoundation.org/"
       target="_blank"
       rel="noopener noreferrer"
       className={linkClassName}
     >
-      {pdf ? <LogoPDF className={className} /> : logo}
+      {logo}
     </a>
   );
 }
 
-export default HalfEarthLogo;
+export default Logo;

src/components/pdf-reports/national-report-pdf/national-report-pdf-component.jsx

@@ -9,7 +9,7 @@ import IndicatorCard from 'containers/nrc-content/nrc-indicators/indicator-card'
 import { getBarStyles } from 'containers/nrc-content/nrc-indicators/nrc-indicators-utils';
 
 import TrendChart from 'components/charts/trend-chart';
-import HalfEarthLogo from 'components/half-earth-logo';
+import Logo from 'components/half-earth-logo';
 
 import { LAND_MARINE } from 'constants/country-mode-constants';
 import { getCountryNames } from 'constants/translation-constants';
@@ -450,12 +450,7 @@ function NationalReportPdf({
           />
         </div>
       </section>
-      <HalfEarthLogo
-        withBackground
-        className={styles.logo}
-        linkClassName={styles.logoContainer}
-        pdf
-      />
+      <Logo pdf className={styles.logo} linkClassName={styles.logoContainer} />
       {renderIndicatorCards()}
       {renderSpecies()}
       {renderChart()}

src/components/pdf-reports/national-report-pdf/national-report-pdf.module.scss

@@ -108,12 +108,13 @@ $gap: 20pt;
 
     .logoContainer {
       align-self: center;
+      justify-self: right;
+      padding-right: 5px;
     }
 
     .logo {
       grid-area: logo;
-      height: 60pt;
-      width: 70pt;
+      height: 52pt;
     }
 
     .indicatorCardsContainer {

src/containers/sidebars/featured-place-card/featured-place-card-selectors.js

@@ -1,9 +1,9 @@
 import { createSelector, createStructuredSelector } from 'reselect';
 
 const selectFeaturedMapsList = ({ featuredMapsList }) =>
-  featuredMapsList.data || null;
+  featuredMapsList?.data || null;
 const selectFeaturedMapPlaces = ({ featuredMapPlaces }) =>
-  featuredMapPlaces.data || null;
+  featuredMapPlaces?.data || null;
 
 const getFeaturedMapsList = createSelector(
   selectFeaturedMapsList,

src/pages/aoi/component.jsx

@@ -6,7 +6,7 @@ import cx from 'classnames';
 
 import AreaOfInterestScene from 'scenes/aoi-scene';
 
-import HalfEarthLogo from 'components/half-earth-logo';
+import Logo from 'components/half-earth-logo';
 
 import uiStyles from 'styles/ui.module.scss';
 
@@ -24,9 +24,7 @@ function AreaOfInterestPageComponent({
 }) {
   return (
     <>
-      <HalfEarthLogo
-        className={cx(styles.hideOnPrint, uiStyles.halfEarthLogoTopLeft)}
-      />
+      <Logo className={cx(styles.hideOnPrint, uiStyles.halfEarthLogoTopLeft)} />
       <AreaOfInterestScene
         activeCategory={activeCategory}
         handleGlobeUpdating={handleGlobeUpdating}

src/pages/data-globe/data-globe-component.jsx

@@ -4,7 +4,7 @@ import loadable from '@loadable/component';
 
 import DataScene from 'scenes/data-scene';
 
-import HalfEarthLogo from 'components/half-earth-logo';
+import Logo from 'components/half-earth-logo';
 
 import uiStyles from 'styles/ui.module.scss';
 
@@ -34,7 +34,7 @@ function DataGlobeComponent({
 }) {
   return (
     <>
-      <HalfEarthLogo className={uiStyles.halfEarthLogoTopLeft} />
+      <Logo className={uiStyles.halfEarthLogoTopLeft} />
       <DataScene
         sceneMode={sceneMode}
         countryISO={countryISO}

src/pages/featured-globe/featured-globe-component.jsx

@@ -14,7 +14,7 @@ import SideMenu from 'containers/menus/sidemenu';
 import SelectedFeaturedMapCard from 'containers/sidebars/featured-map-card';
 
 import FeaturedTaxaSelector from 'components/featured-taxa-selector';
-import HalfEarthLogo from 'components/half-earth-logo';
+import Logo from 'components/half-earth-logo';
 import Scene from 'components/scene';
 import Spinner from 'components/spinner';
 
@@ -55,7 +55,7 @@ function FeaturedGlobe({
 
   return (
     <>
-      <HalfEarthLogo className={uiStyles.halfEarthLogoTopLeft} />
+      <Logo className={uiStyles.halfEarthLogoTopLeft} />
       <Scene
         sceneName="featured-scene"
         sceneSettings={sceneSettings}

src/pages/landing/landing-component.jsx

@@ -6,7 +6,7 @@ import LandingScene from 'scenes/landing-scene';
 
 import About from 'containers/landing/about';
 
-import HalfEarthLogo from 'components/half-earth-logo';
+import Logo from 'components/half-earth-logo';
 import LanguageSwitcher from 'components/language-switcher';
 
 import uiStyles from 'styles/ui.module.scss';
@@ -16,7 +16,7 @@ const InfoModal = loadable(() => import('components/modal-metadata'));
 function LandingComponent({ hasMetadata, sceneSettings }) {
   return (
     <>
-      <HalfEarthLogo className={uiStyles.halfEarthLogoTopLeft} />
+      <Logo className={uiStyles.halfEarthLogoTopLeft} />
       <LanguageSwitcher />
       <About />
       <LandingScene sceneSettings={sceneSettings} />

src/pages/mobile/landing-mobile/landing-mobile-component.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import LandingScene from 'scenes/mobile/landing-scene-mobile';
 
-import HalfEarthLogo from 'components/half-earth-logo';
+import Logo from 'components/half-earth-logo';
 import SideMenuLanguageSwitcher from 'components/sidemenu-language-switcher';
 
 import uiStyles from 'styles/ui.module.scss';
@@ -12,7 +12,7 @@ import styles from './landing-mobile-styles.module.scss';
 function LandingMobileComponent({ sceneSettings }) {
   return (
     <div className={styles.container}>
-      <HalfEarthLogo className={uiStyles.halfEarthLogoTopLeft} />
+      <Logo className={uiStyles.halfEarthLogoTopLeft} />
 
       <div className={styles.switcherWrapper}>
         <SideMenuLanguageSwitcher />

src/pages/nrc-landing/component.jsx

@@ -9,7 +9,7 @@ import NationalReportCardLandingScene from 'scenes/nrc-landing-scene';
 import OnboardingDisclaimer from 'containers/onboarding/onboarding-disclaimer';
 import { useOnboardingOpenSection } from 'containers/onboarding/onboarding-hooks';
 
-import HalfEarthLogo from 'components/half-earth-logo';
+import Logo from 'components/half-earth-logo';
 
 import uiStyles from 'styles/ui.module.scss';
 
@@ -47,7 +47,7 @@ function NationalReportCardLanding({
 
   return (
     <>
-      <HalfEarthLogo className={uiStyles.halfEarthLogoTopLeft} />
+      <Logo className={uiStyles.halfEarthLogoTopLeft} />
       {!!onboardingType && <OnboardingDisclaimer />}
       <NationalReportCardLandingScene
         map={map}

src/pages/nrc/nrc-component.jsx

@@ -19,7 +19,7 @@ import SoundButton from 'containers/onboarding/sound-btn';
 import OnboardingTooltip from 'containers/onboarding/tooltip';
 
 import Button from 'components/button';
-import HalfEarthLogo from 'components/half-earth-logo';
+import Logo from 'components/half-earth-logo';
 import RankingChart from 'components/ranking-chart';
 
 import uiStyles from 'styles/ui.module.scss';
@@ -116,9 +116,7 @@ function NationalReportCard({
         src={nrcBackground}
         className={styles.background}
       />
-      <HalfEarthLogo
-        className={cx(styles.hideOnPrint, uiStyles.halfEarthLogoTopLeft)}
-      />
+      <Logo className={cx(styles.hideOnPrint, uiStyles.halfEarthLogoTopLeft)} />
       <div className={styles.container}>
         <motion.div
           initial={{ width: 300 }}

src/styles/settings.scss

@@ -122,8 +122,8 @@
   $site-gutter: 20px;
   $widget-button-size: 30px;
   $rounded-button-size: 42px;
-  $he-project-logo-size: 25px;
-  $nav-bar-height: 55px;
+  $he-project-logo-size: 52px;
+  $nav-bar-height: 75px;
   // Blur
   $blur-level: 16px;
 

src/styles/ui.module.scss

@@ -12,7 +12,7 @@ $scrollbar-width: 4px;
   position: absolute;
   height: $he-project-logo-size;
   top: $layout-top-margin;
-  left: $site-gutter;
+  left: calc($site-gutter + 8px);
   z-index: $bring-to-front;
 }