PLANET-7265: apply new visual identity (#65)

* Update submodule * Remove deprecated dropdown functionality * Update package json lock * Follow up semantic rules --------- Co-authored-by: Dan Tovbein <[email protected]>
greenpeace · Nov 22, 2023 · 6d6cd9d · 6d6cd9d
1 parent 8ec5160
commit 6d6cd9d
Show file tree

Hide file tree

Showing 16 changed files with 116 additions and 212 deletions.
diff --git a/404.html b/404.html
@@ -63,7 +63,7 @@
     <h1>404</h1>
     <h2 data-l10n-key="title">We looked everywhere...</h2>
     <p data-l10n-key="text">but it looks like this page is missing.</p>
-    <a class="btn btn-primary" href="https://www.greenpeace.org/global/" data-l10n-key="cta">Go to homepage</a>
+    <a class="btn cta-btn" href="https://www.greenpeace.org/global/" data-l10n-key="cta">Go to homepage</a>
   </section>
 
   <script src="{{static}}404.js"></script>

diff --git a/gulpfile.js b/gulpfile.js
@@ -43,7 +43,6 @@ const urls_json = 'urls.json';
 const js_array = [
   dest + api,
   'static/js/app.js',
-  'static/js/dropdown.js',
   'static/js/geoip.js',
   'static/js/country_list.js',
   'static/js/redirect.js'

diff --git a/index.html b/index.html
@@ -49,35 +49,31 @@
 
   <header>
     <div class="page-header-background">
-      <img src="static/img/image.jpg" srcset="static/img/image.jpg 1200w, static/img/image-992w.jpg 992w, static/img/image-768w.jpg 768w, static/img/image-575w.jpg 575w, static/img/image-320w.jpg 320w" class="page-header-image">
+      <img alt="Greenpeace" src="static/img/image.jpg" srcset="static/img/image.jpg 1200w, static/img/image-992w.jpg 992w, static/img/image-768w.jpg 768w, static/img/image-575w.jpg 575w, static/img/image-320w.jpg 320w" class="page-header-image">
     </div>
 
     <div>
       <img src="static/img/gp-logo.svg" alt="Greenpeace" class="logo">
     </div>
 
-    <div class="heading">
+    <h1 class="heading">
       Together we can change the world
-    </div>
+    </h1>
 
     <div id="loading">
       <div class="three-quarters" id="spinner-people">loading...</div>
     </div>
 
-    <div id="cta" class="cta">
-      <div id="dropdown" class="dropdown">
-        <a class="btn btn-primary" id="selection" href="https://www.greenpeace.org/international/">
-          <span class="truncate">Go to Greenpeace <span id="country-name">International</span></span> <i id="arrow" class="arrow arrow-down"></i>
-        </a>
-        <div id="dropdown-group" class="dropdown-group">
-        </div>
-      </div>
-      <span class="hidden-tall">or</span>
-      <a class="btn btn-secondary hidden-tall" href="#country-list" id="country">Select another country/region</a>
-    </div>
+    <nav id="cta" class="cta">
+      <a class="btn cta-btn" id="selection" href="https://www.greenpeace.org/international/">
+        <span class="truncate">Go to Greenpeace <span id="country-name">International</span></span> <i id="arrow" class="arrow arrow-down"></i>
+      </a>
+      <span class="spacer hidden-tall">or</span>
+      <a class="btn cta-btn" href="#country-list-wrapper" id="country">Select another country/region</a>
+    </nav>
   </header>
 
-  <div id="country-list" class="country-list"></div>
+  <div id="country-list-wrapper" class="country-list-wrapper"></div>
 
   <script src="static/main.js"></script>
 </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
-    "@greenpeace/dashdash": "^1.1.3",
+    "@greenpeace/dashdash": "^1.2.1",
     "autoprefixer": "^10.4.13",
     "eslint": "^5.16.0",
     "fs": "0.0.1-security",

diff --git a/static/js/country_list.js b/static/js/country_list.js
@@ -8,12 +8,12 @@ Object.entries(data).forEach(letter => {
   if ( '0' === letter[0] ) {
     international_html += `<a class="international" href="${letter[1][0].url}">${letter[1][0].name}</a>`;
   } else {
-    sublist_html += `<li><h3 class="country-group-letter">${letter[0]}</h3>
+    sublist_html += `<li class="country-list-item"><h3 class="country-group-letter">${letter[0]}</h3>
       <ul class="countries_sublist">`;
     letter[1].forEach(country => {
       const lang = country.lang;
       lang.forEach(item => {
-        sublist_html += `<li>
+        sublist_html += `<li class="countries_sublist-item">
           <a href="${item.url}">${country.name} | ${item.name}</a>
           </li>`;
       });
@@ -22,4 +22,4 @@ Object.entries(data).forEach(letter => {
   }
 });
 let countries_html = `<h2>All countries and regions</h2>${international_html}<ul class="countries_list">${sublist_html}</ul>`;
-byID('country-list').innerHTML = countries_html;
+byID('country-list-wrapper').innerHTML = countries_html;
diff --git a/static/js/dropdown.js b/static/js/dropdown.js
diff --git a/static/js/geoip.js b/static/js/geoip.js
@@ -1,4 +1,4 @@
-/* global data, dropdown_toggle, byID */
+/* global data, byID */
 'use strict';
 
 // IP Geolocation
@@ -12,19 +12,9 @@ Object.entries(data).forEach(letter => {
         byID('selection').setAttribute('href', country.lang[0].url);
       } else {
         byID('selection').setAttribute('href', '#');
-        byID('arrow').style.display = 'inline-block';
-        byID('selection').classList.add('dropdown-toggle');
-        let items = ``;
-        const lang = country.lang;
-        lang.forEach(item => {
-          items += `<a class="btn btn-secondary dropdown-item" href="${item.url}">${item.name}</a>`;
-        });
-        byID('dropdown-group').innerHTML = items;
-        byID('selection').addEventListener('click', dropdown_toggle);
       }
     }
   });
 });
 
 byID('loading').style.display = 'none';
-byID('cta').classList.add('open');
diff --git a/static/js/redirect.js b/static/js/redirect.js
@@ -28,14 +28,13 @@ function redirectFromCookie(cookie, location) {
   const nroName = urls[urlList.indexOf(nroUrl)][1];
 
   // Redirect with spinner and link
-  byID('cta').innerHTML = `<div id="dropdown" class="dropdown">
-    <a id="selection" class="btn btn-primary solo" href="${nroUrl}">Redirecting to <span class="nro-name">Greenpeace ${nroName}</span></a>
-    </div>`;
+  byID('cta').innerHTML = `<a id="selection" class="btn cta-btn" href="${nroUrl}">
+    Redirecting to <span class="nro-name">Greenpeace ${nroName}</span></a>`;
   try {
     window.location.replace(nroUrl);
   } catch (e) {
     byID('loading').style.display = 'none';
   }
 }
 
-redirectFromCookie(document.cookie, document.location);
+redirectFromCookie(document.cookie, document.location);
diff --git a/static/scss/404.scss b/static/scss/404.scss
@@ -1,4 +1,5 @@
 // Global
+@import "master-theme/assets/src/scss/base/tokens";
 @import "master-theme/assets/src/scss/base/variables";
 @import "master-theme/assets/src/scss/base/colors";
 @import "master-theme/assets/src/scss/base/mixins";

diff --git a/static/scss/base/_404.scss b/static/scss/base/_404.scss
@@ -1,18 +1,18 @@
 body {
-  background-color: $white;
+  background-color: var(--white);
 }
 
 header {
   background: none;
   height: auto;
 
   .top-navigation {
-    background: $white;
+    background: var(--white);
     height: 68px;
 
     .site-logo {
       position: relative;
-      padding: 0 24px;
+      padding: 0 $sp-3;
       margin: auto 0;
 
       .logo {
@@ -25,7 +25,7 @@ header {
   .page-header-background {
     position: relative;
     height: auto;
-    margin-top: 3.375rem;
+    margin-top: $sp-7;
     width: 100%;
 
     .page-header-image {
@@ -34,26 +34,25 @@ header {
   }
 }
 
-.btn-primary {
-  background-color: rgb(255, 225, 0);
-  color: black;
+.cta-btn {
+  background-color: var(--p4-action-yellow-500);
+  color: var(--grey-900);
 
   &:visited {
-    background-color: rgb(255, 225, 0);
-    color: black;
+    background-color: var(--p4-action-yellow-500);
+    color: var(--grey-900);
   }
 
   &:active,
   &:hover {
-    background-color: #fece00;
-    color: black;
+    background-color: var(--p4-action-yellow-600);
+    color: var(--grey-900);
   }
 }
 
 section {
-  padding: 24px;
-  color: black;
-  font-family: $roboto;
+  padding: $sp-3;
+  color: var(--grey-900);
   box-sizing: border-box;
 
   h1 {
@@ -72,20 +71,20 @@ section {
   p {
     font-size: $font-size-xl;
     font-weight: 400;
-    margin: 8px 0;
+    margin: $sp-1 0;
     line-height: 1;
   }
 
   .btn {
-    margin-top: 24px;
+    margin-top: $sp-3;
   }
 }
 
 @include medium-and-up {
   header {
     .top-navigation .site-logo {
       text-align: left;
-      padding: 0 60px;
+      padding: 0 $sp-7x;
     }
 
     .page-header-background {
@@ -98,14 +97,14 @@ section {
   }
 
   section {
-    padding: 40px 60px;
+    padding: $sp-5 $sp-7x;
 
     h1 {
       font-size: 90px;
     }
 
     .btn {
-      margin-top: 32px;
+      margin-top: $sp-4;
     }
   }
 }
@@ -127,11 +126,10 @@ section {
   section {
     position: absolute;
     top: 25%;
-    color: white;
+    color: var(--white);
 
     &.maintenance {
-      color: black;
-      background-color: #f6f4ef;
+      color: var(--grey-900);
       opacity: 0.9;
     }
 
@@ -144,7 +142,7 @@ section {
     }
 
     .btn {
-      margin-top: 40px;
+      margin-top: $sp-5;
     }
   }
 }
diff --git a/static/scss/base/_body.scss b/static/scss/base/_body.scss
@@ -9,13 +9,11 @@ html {
 }
 
 body {
-  color: $grey-80;
-  font-family: $lora;
+  font-family: var(--font-family-tertiary);
   font-size: 16px;
-  line-height: 20px;
+  line-height: var(--line-height-s--font-family-tertiary);
   position: relative;
   overflow-y: hidden;
-  background-color: #ecf1f3;
 }
 
 :root {