Update the name of the tools

mongabay · Dec 5, 2023 · 15e5f84 · 15e5f84
1 parent a9295fc
commit 15e5f84
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# supply-chain-chart
+# Trade Flow Map
 
-Supply chain chart is tool that generates flow map images for Mongabay's articles.
+Create images of maps with flows representing the exchange of a variety of commodities across the world.
 
 <p align="center">
   <img src="docs/assets/hero.png" alt="Supply chain chart" />

diff --git a/components/head/component.js b/components/head/component.js
@@ -4,9 +4,7 @@ import Head from 'next/head';
 
 const HeadComponent = ({ title, description }) => (
   <Head>
-    <title key="title">
-      {title ? `${title} | Supply Chain Data Tool` : 'Supply Chain Data Tool'}
-    </title>
+    <title key="title">{title ? `${title} | Trade Flow Map` : 'Trade Flow Map'}</title>
     <meta
       key="description"
       name="description"

diff --git a/components/header/component.js b/components/header/component.js
@@ -14,7 +14,7 @@ const Header = () => {
           />
         </div>
         <div className="header__content">
-          <p>supply chain Tool</p>
+          <p className="header__content__name">Trade Flow Map</p>
           <HeaderMenu />
         </div>
       </div>

diff --git a/components/header/constants.js b/components/header/constants.js
@@ -2,43 +2,29 @@ export const COLORS = ['#03755E', '#184B95', '#A01200', '#7E56D8'];
 
 export const TOOLS = [
   {
-    id: 'satellite',
-    title: 'Satellite',
-    description:
-      'Create images of maps using a wide set of basemaps, contextual layers and data layers or explore the map presets that provide information about topics like conservation.',
+    id: 'earth-atlas',
+    name: 'Earth Atlas',
     color: COLORS[1],
-    image: '/images/satellite-tool.png',
-    name: 'Satellite Tool',
     url: 'https://maps.mongabay.com',
   },
   {
-    id: 'fire',
-    title: 'Fire Drought',
-    description:
-      'Explore and report temporal interactions between annual precipitation and fire occurrences at national and subnational scales.',
+    id: 'fire-weather-almanac',
+    name: 'Fire Weather Almanac',
     color: COLORS[2],
     image: '/images/fire-tool.png',
-    name: 'Fire Drought',
     url: 'https://charts.mongabay.com',
   },
   {
-    id: 'reforestation',
+    id: 'reforestation-app',
     title: 'Reforestation App',
-    description:
-      'Mongabay’s global directory of reforestation and tree-planting projects is a starting point for people wanting to support reforestation.',
     color: COLORS[0],
-    image: '/images/reforestation-tool.png',
     name: 'Reforestation App',
     url: 'https://reforestation.app',
   },
   {
-    id: 'supply',
-    title: 'Supply Chain',
-    description:
-      'Create images of maps with flows representing the exchange of a variety of commodities across the world.',
+    id: 'trade-flow-map',
+    name: 'Trade Flow Map',
     color: COLORS[3],
-    image: '/images/supply-tool.png',
-    name: 'Supply Chain',
     url: 'https://chains.mongabay.com',
   },
 ];
diff --git a/components/header/menu/index.js b/components/header/menu/index.js
@@ -40,7 +40,7 @@ const HeaderMenu = () => {
             <span className="sr-only">close navigation menu</span>
             <Icon name="menu-close" className="header__menu__content__wrap__close-btn__icon" />
           </button>
-          <p className="header__menu__content__wrap__title">Mongabay Chart Tools</p>
+          <p className="header__menu__content__wrap__title">Data Journalism Tools</p>
           <ul className="space-y-6">
             {TOOLS.map(({ name, url, id, color }) => (
               <li key={name}>
@@ -50,7 +50,7 @@ const HeaderMenu = () => {
                       backgroundColor: color,
                     }}
                   >
-                    <Icon className={cx(id === 'supply' ? '--lg' : '--md')} name={id} />
+                    <Icon className={cx(id === 'trade-flow-map' ? '--lg' : '--md')} name={id} />
                   </div>
                   {name}
                 </a>

diff --git a/components/header/style.scss b/components/header/style.scss
@@ -27,6 +27,10 @@
       letter-spacing: 0.96px;
       text-transform: uppercase;
     }
+
+    &__name {
+      text-transform: uppercase;
+    }
   }
   &__menu {
     flex-shrink: 0;

diff --git a/components/icons/index.js b/components/icons/index.js
diff --git a/components/tool/sidebar/component.jsx b/components/tool/sidebar/component.jsx
@@ -50,7 +50,7 @@ const Sidebar = ({
     <aside className="c-tool-sidebar">
       <DownloadSuccessModal open={downloadModalOpen} onClose={() => setDownloadModalOpen(false)} />
       <div className="content">
-        <h1>Supply Chain Data Tool</h1>
+        <h1>Trade Flow Map</h1>
         <p>
           Create images of maps with flows representing the exchange of a variety of commodities
           across the world.

diff --git a/docs/assets/hero.png b/docs/assets/hero.png