add Inrae to About Us modal

.cloudbuild.yaml

@@ -24,6 +24,6 @@ steps:
     args:
       - '-c'
       - |
-        gcloud container clusters get-credentials soils-revealed-cluster  --project=$PROJECT_ID --zone=europe-west4-a
+        gcloud container clusters get-credentials soils-revealed-cluster-v20 --project=$PROJECT_ID --zone=europe-west4-a
         kubectl set image deployment/$REPO_NAME --namespace=$BRANCH_NAME soils-revealed=eu.gcr.io/$PROJECT_ID/$REPO_NAME/$BRANCH_NAME/$REPO_NAME:$SHORT_SHA
         kubectl rollout restart deployment $REPO_NAME --namespace=$BRANCH_NAME

.env.default

@@ -9,5 +9,3 @@ AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
 AWS_MAX_Z_TILE_STORAGE=
 DEPLOYMENT_KEY=
-AIRTABLE_API_KEY=
-AIRTABLE_USER_ID=

Dockerfile

@@ -1,4 +1,4 @@
-FROM docker.io/debian:stable-slim@sha256:a939c03c4d3e3f53e3ef4ef6e75cb681a3ad56537842f95bf89755da86559b13
+FROM docker.io/debian:bullseye-slim@sha256:312218c8dae688bae4e9d12926704fa9af6f7307a6edb4f66e479702a9af5a0c
 
 # Source: https://www.kabisa.nl/tech/nvm-in-docker/
 # docker build --force-rm --no-cache -t soils-revealed:latest .
@@ -7,8 +7,8 @@ FROM docker.io/debian:stable-slim@sha256:a939c03c4d3e3f53e3ef4ef6e75cb681a3ad565
 SHELL ["/bin/bash","-l","-c"] 
 ENV DEBIAN_FRONTEND noninteractive
 
-RUN apt-get update \
-    && apt-get install -y tini curl \
+RUN apt update \
+    && apt install -y tini curl \
     && rm -rf /var/lib/apt/lists/*
 
 RUN mkdir /soils-revealed

README.md

@@ -45,9 +45,6 @@ Below is a description of each of the keys.
 | AWS_ACCESS_KEY_ID | Access key ID of the AWS server storing the tiles of the soils layers |
 | AWS_SECRET_ACCESS_KEY | Secret access key of the AWS server storing the tiles of the soils layers |
 | AWS_MAX_Z_TILE_STORAGE | Maximum zoom at which tiles generated on-the-fly will be saved in the AWS S3 bucket |
-| AIRTABLE_API_KEY | Secret access key for [Airtable](https://airtable.com/) |
-| AIRTABLE_USER_ID | Airtable User ID |
-
 
 ## Deployment
 
@@ -88,8 +85,8 @@ Overall, deploying to either environment takes between 5 to 10 minutes to comple
 
 The platform is hosted on an Amazon server and consists of two main applications:
 
-- the web server
-- the on-the-fly analysis service
+- the web server.
+- the on-the-fly analysis service.
 
 The web server is a Node.js application made out of two elements: the Next.js server and an API the server relies on for all of its non-cartographic data (e.g. analysis data) and some of its cartographic data (e.g. the soils layers).
 

components/about-modal/component.js

@@ -25,7 +25,7 @@ const AboutModal = ({ open, onClose }) => (
     <p>The project involves collaboration with the following partners:</p>
     <div className="container mt-3">
       <div className="row align-items-center text-center">
-        <div className="col-6 col-md-3 pl-md-0 mb-4 mb-md-0">
+        <div className="col-6 col-md-4 pl-md-0 mb-4">
           <a href="https://www.nature.org" target="_blank" rel="noopener noreferrer">
             <Image
               src="/images/tnc-logo.svg"
@@ -35,31 +35,36 @@ const AboutModal = ({ open, onClose }) => (
             />
           </a>
         </div>
-        <div className="col-6 col-md-3 mb-4 mb-md-0">
+        <div className="col-6 col-md-4 mb-4">
           <a href="https://www.cornell.edu" target="_blank" rel="noopener noreferrer">
             <Image
               src="/images/cornell-university-logo.svg"
               alt="Cornell University"
-              width={100}
-              height={100}
+              width={90}
+              height={90}
             />
           </a>
         </div>
-        <div className="col-6 col-md-3">
+        <div className="col-6 col-md-4 pr-md-0 mb-4">
           <a href="https://www.isric.org" target="_blank" rel="noopener noreferrer">
-            <Image src="/images/isric-logo.svg" alt="ISRIC" width={62} height={100} />
+            <Image src="/images/isric-logo.svg" alt="ISRIC" width={59} height={95} />
           </a>
         </div>
-        <div className="col-6 col-md-3 pr-md-0">
+        <div className="col-6 col-md-4 pl-md-0 mb-4 mb-md-0">
           <a href="https://www.woodwellclimate.org/" target="_blank" rel="noopener noreferrer">
             <Image
               src="/images/wcrc-logo.png"
               alt="Woodwell Climate Research Center"
-              width={185}
-              height={78}
+              width={153}
+              height={65}
             />
           </a>
         </div>
+        <div className="col-6 col-md-4 pr-md-0">
+          <a href="https://www.inrae.fr/en" target="_blank" rel="noopener noreferrer">
+            <Image src="/images/inrae-logo.png" alt="INRAE" width={100} height={26} />
+          </a>
+        </div>
       </div>
     </div>
     <p className="mt-4">Designed and developed by:</p>

components/explore/component.js

@@ -6,7 +6,6 @@ import throttle from 'lodash/debounce';
 
 import { Router } from 'lib/routes';
 import { logEvent } from 'utils/analytics';
-import { isModalShown } from 'utils/explore';
 import { useHasMounted, useDesktop } from 'utils/hooks';
 import { toggleBasemap, toggleLabels, toggleRoads } from 'utils/map';
 import {
@@ -29,7 +28,6 @@ import InfoModal from './info-modal';
 import InteractiveFeaturePopup from './interactive-feature-popup';
 import DrawBoard from './draw-board';
 import MapContainer from './map-container';
-import UserModal from 'components/user-modal';
 
 import './style.scss';
 
@@ -78,14 +76,6 @@ const Explore = ({
   const [interactiveFeatures, setInteractiveFeatures] = useState(null);
   const [showTour, setShowTour] = useState(false);
 
-  // User recruitment modal. This modal should appear just the first time the user
-  // visits the map section
-  const [userModalOpen, setUserModalOpen] = useState(isModalShown());
-
-  const handleModalClose = () => {
-    setUserModalOpen(false);
-  };
-
   // When the user clicks the popup's button that triggers its close, the map also receives the
   // event and it opens a new popup right after
   // This is a bug of react-map-gl's library
@@ -232,7 +222,6 @@ const Explore = ({
       className="c-explore"
       style={isDesktop ? { backgroundColor: BASEMAPS[basemap].backgroundColor } : undefined}
     >
-      <UserModal open={userModalOpen} onClose={handleModalClose} />
       {isDesktop && (
         <>
           {showTour && <Tour />}

components/explore/tour/component.js

@@ -154,7 +154,7 @@ const ExploreTour = props => {
         previousShowTour.current = showTour;
       }
     }
-  }, [previousShowTour.current, showTour, props, stepIndex, setOpened, updateShowTour]);
+  }, [showTour, props, stepIndex, setOpened, updateShowTour]);
 
   const onChange = useCallback(
     ({ action, type }) => {

components/footer/component.js

@@ -3,15 +3,18 @@ import { Link } from 'lib/routes';
 
 import Icon from 'components/icon';
 import AboutModal from 'components/about-modal';
+import JoinUsModal from 'components/join-us-modal';
 
 import './style.scss';
 
 const Footer = () => {
   const [aboutModalOpen, setAboutModalOpen] = useState(false);
+  const [joinUsModalOpen, setJoinUsModalOpen] = useState(false);
 
   return (
     <>
       <AboutModal open={aboutModalOpen} onClose={() => setAboutModalOpen(false)} />
+      <JoinUsModal open={joinUsModalOpen} onClose={() => setJoinUsModalOpen(false)} />
       <footer className="c-footer">
         <div className="container ">
           <div className="row py-4">
@@ -41,6 +44,15 @@ const Footer = () => {
                           About us
                         </button>
                       </li>
+                      <li>
+                        <button
+                          type="button"
+                          className="nav-link pb-0"
+                          onClick={() => setJoinUsModalOpen(true)}
+                        >
+                          Join us
+                        </button>
+                      </li>
                       <li>
                         <a href="mailto:info@soilsrevealed.org" className="nav-link pb-0">
                           Contact

components/homepage/section-1/component.js

@@ -5,11 +5,13 @@ import Image from 'next/image';
 import { Link } from 'lib/routes';
 import { logEvent } from 'utils/analytics';
 import AboutModal from 'components/about-modal';
+import JoinUsModal from 'components/join-us-modal';
 
 import './style.scss';
 
 const Section1 = () => {
   const [aboutModalOpen, setAboutModalOpen] = useState(false);
+  const [joinUsModalOpen, setJoinUsModalOpen] = useState(false);
 
   const onClickExplore = useCallback(() => {
     logEvent('Homepage', 'click on calls to action buttons', 'explore map (top of page)');
@@ -20,9 +22,15 @@ const Section1 = () => {
     setAboutModalOpen(true);
   }, [setAboutModalOpen]);
 
+  const onClickJoinUs = useCallback(() => {
+    logEvent('Homepage', 'click on calls to action buttons', 'join us (top of page)');
+    setJoinUsModalOpen(true);
+  }, [setJoinUsModalOpen]);
+
   return (
     <>
       <AboutModal open={aboutModalOpen} onClose={() => setAboutModalOpen(false)} />
+      <JoinUsModal open={joinUsModalOpen} onClose={() => setJoinUsModalOpen(false)} />
       <section className="c-homepage-section-1">
         <div className="scroll-text-container">
           <div className="container text-center">
@@ -36,15 +44,15 @@ const Section1 = () => {
                 biggest impact.
               </div>
             </div>
-            <div className="row">
-              <div className="col-sm-12 col-md-4 offset-md-2 text-center text-md-right mb-3 mb-md-0">
+            <div className="row justify-content-center">
+              <div className="col-sm-12 col-md-auto mb-3 mb-md-0">
                 <Link to="explore">
                   <a className="btn btn-primary btn-fixed-width" onClick={onClickExplore}>
                     Explore map
                   </a>
                 </Link>
               </div>
-              <div className="col-sm-12 col-md-4 text-center text-md-left">
+              <div className="col-sm-12 col-md-auto mb-3 mb-md-0">
                 <button
                   type="button"
                   className="btn btn-outline-primary btn-fixed-width"
@@ -53,6 +61,15 @@ const Section1 = () => {
                   About us
                 </button>
               </div>
+              <div className="col-sm-12 col-md-auto">
+                <button
+                  type="button"
+                  className="btn btn-outline-primary btn-fixed-width"
+                  onClick={onClickJoinUs}
+                >
+                  Join us
+                </button>
+              </div>
             </div>
           </div>
           <div className="scroll-text">

components/homepage/section-7/component.js

@@ -4,11 +4,13 @@ import PropTypes from 'prop-types';
 import { Link } from 'lib/routes';
 import { logEvent } from 'utils/analytics';
 import AboutModal from 'components/about-modal';
+import JoinUsModal from 'components/join-us-modal';
 
 import './style.scss';
 
 const Section7 = ({ configuration }) => {
   const [aboutModalOpen, setAboutModalOpen] = useState(false);
+  const [joinUsModalOpen, setJoinUsModalOpen] = useState(false);
 
   const onClickExplore = useCallback(() => {
     logEvent('Homepage', 'click on calls to action buttons', 'explore map (bottom of page)');
@@ -19,9 +21,15 @@ const Section7 = ({ configuration }) => {
     setAboutModalOpen(true);
   }, [setAboutModalOpen]);
 
+  const onClickJoinUs = useCallback(() => {
+    logEvent('Homepage', 'click on calls to action buttons', 'join us (bottom of page)');
+    setJoinUsModalOpen(true);
+  }, [setJoinUsModalOpen]);
+
   return (
     <>
       <AboutModal open={aboutModalOpen} onClose={() => setAboutModalOpen(false)} />
+      <JoinUsModal open={joinUsModalOpen} onClose={() => setJoinUsModalOpen(false)} />
       <section id={configuration.anchor} className="c-homepage-section-7">
         <div className="container">
           <div className="row mb-5">
@@ -34,15 +42,15 @@ const Section7 = ({ configuration }) => {
               for future scenarios.
             </div>
           </div>
-          <div className="row">
-            <div className="col-sm-12 col-md-4 offset-md-2 text-center text-md-right mb-3">
+          <div className="row justify-content-center">
+            <div className="col-sm-12 col-md-auto mb-3 mb-md-0 text-center">
               <Link route="explore">
                 <a className="btn btn-secondary btn-fixed-width" onClick={onClickExplore}>
                   Explore map
                 </a>
               </Link>
             </div>
-            <div className="col-sm-12 col-md-4 text-center text-md-left">
+            <div className="col-sm-12 col-md-auto mb-3 mb-md-0 text-center">
               <button
                 type="button"
                 className="btn btn-outline-secondary btn-fixed-width"
@@ -51,6 +59,15 @@ const Section7 = ({ configuration }) => {
                 About us
               </button>
             </div>
+            <div className="col-sm-12 col-md-auto text-center">
+              <button
+                type="button"
+                className="btn btn-outline-secondary btn-fixed-width"
+                onClick={onClickJoinUs}
+              >
+                Join us
+              </button>
+            </div>
           </div>
         </div>
       </section>