Bright mode (#1459)

* first steps light reskin

* ui work

* first revision color and UI changes

* new arrows test

* overflow side panel fix, searchbar background

* left-panel adjustments

* fixed collapsed box shadow on left panel

* added brightmode tooltip

* layer button toggle animation

* added inverse color toggle watermark and logo

* initial onboarding changes

* tooltip style update

* new tooltip on countryhover

* new arrow design finished

* timeslider style and brightmode corrections

* wip, oceancolor

* reverted package-lock

* fixed backgorund bug, introduced new mapbox layer background

* fixed loading bug

* no data overlay style fixes

* logo svg fix, ui and mobile ui fixes

* loading animation gif

* removed live from mobile view

* changed onboarding images

* social button fix & meta image added

* twitter og image replace

* social link watermark fix

* slider style changes

* fixed colorblind bug

* commented out unused arrow outline step and reverted to original

* hardcoded onboarding title electricitymap and removed field from translations

* removed unused ms icon

* code cleanup

* slight colorchange darkmode, removed watermark social icons

* data temporary unavailable style fix

* replaced catamaran with Open Sans

* typo Font css

* bottom section style change

* fixed gauge errors

* outline slider thumb + mobile legend padidng

* removed manuallyselected state from timeslider

* social handles updates

* removed unused image, cleaned up scales.js

* mobile info line height fix

mockserver/update_state.py

@@ -112,7 +112,7 @@
         # Update production
         production['datetime'] = arrow.get(production['datetime']).isoformat()
         # Set random co2 value
-        production['co2intensity'] = random() * 500
+        production['co2intensity'] = random() * 800
         # Set aggregates
         production['maxProduction'] = max([x or 0 for x in production['production'].values()])
         production['totalProduction'] = sum([x or 0 for x in production['production'].values()])

web/generate-arrows.js

@@ -1,18 +1,27 @@
 // Requires `brew install imagemagick`
+// import themes from './helpers/themes'
 
 const child_process = require('child_process');
 const fs = require('fs');
-const d3 = require('d3');
+const d3 = Object.assign(
+  {},
+  require('d3-array'),
+  require('d3-collection'),
+  require('d3-scale'),
+);
+
+const { themes } = require('./src/helpers/themes');
 
 const numTicks = 11;
 const co2color = d3.scaleLinear()
-    .domain([0, 375, 725, 800])
-    .range(['green', 'orange', 'rgb(26,13,0)']);
+  .domain(themes.dark.co2Scale.steps)
+  .range(themes.dark.co2Scale.colors);
 const keys = d3.range(0, 800 + 80, 80);
 const colors = {};
 keys.forEach((k) => { colors[k] = co2color(k) });
+colors['nan'] = '#A9A9A9';
 
-for(let co2value in colors) {
+for (let co2value in colors) {
   // generate specific color
   console.log([
     'public/images/arrow-template.png',
@@ -29,29 +38,29 @@ for(let co2value in colors) {
       return;
     }
 
-    // make an outline
-    const outlineSize = 2;
-    const whiteArrowAfterCo2Intensity = 640;
-    child_process.spawn('convert', [
-      `public/images/arrow-${co2value}.png`,
-      '-bordercolor', 'none',
-      '-border', outlineSize,
-      '\(', '-clone', '0', '-alpha', 'off', '-fill', co2value >= whiteArrowAfterCo2Intensity ? 'white' : 'black', '-colorize', '100%', '\)',
-      '\(', '-clone', '0', '-alpha', 'extract', '-morphology', 'edgeout', 'octagon:'+outlineSize, '\)',
-      '-compose', 'over',
-      '-composite', `public/images/arrow-${co2value}-outline.png`
-    ]).on('close', code => {
-      if(code !== 0) {
-        console.log('child exited with code', code);
-        return;
-      }
+    // make an outline (NOT being currently used with new arrow shape)
+    // const outlineSize = 2;
+    // const whiteArrowAfterCo2Intensity = 640;
+    // child_process.spawn('convert', [
+    //   `public/images/arrow-${co2value}.png`,
+    //   '-bordercolor', 'none',
+    //   '-border', outlineSize,
+    //   '\(', '-clone', '0', '-alpha', 'off', '-fill', co2value >= whiteArrowAfterCo2Intensity ? 'white' : 'black', '-colorize', '100%', '\)',
+    //   '\(', '-clone', '0', '-alpha', 'extract', '-morphology', 'edgeout', 'octagon:'+outlineSize, '\)',
+    //   '-compose', 'over',
+    //   '-composite', `public/images/arrow-${co2value}-outline.png`
+    // ]).on('close', code => {
+    //   if(code !== 0) {
+    //     console.log('child exited with code', code);
+    //     return;
+    //   }
 
       // Apply highlight and generate GIF
       [10, 6, 2].forEach((speed, index) => {
         const args = [
           '-dispose', 'none',
           '-delay', '0',
-          `public/images/arrow-${co2value}-outline.png`,
+          `public/images/arrow-${co2value}.png`,
           '-dispose', 'previous',
           '-delay', `${speed}`,
           '-loop', '0',
@@ -70,14 +79,14 @@ for(let co2value in colors) {
 
           fs.unlink(`public/images/arrow-${co2value}.png`, () => {});
           fs.unlink(`public/images/arrow-${co2value}-outline.png`, () => {});
-        })
+        });
 
         child.stderr.on('data', (data) => {
           console.log('stderr:', data);
         });
       });
-    })
-  });
+    });
+  // });
 }
 // echo $color;
 // #convert demo-arrow.png +level-colors transparent,"$color" mod-arrow.png

web/locales/de.json

@@ -13,7 +13,6 @@
     },
     "onboarding-modal": {
         "view1": {
-            "header": "Electricity Map",
             "subtitle": "Visualisierung der klimarelevanten Emissionen der Stromerzeugung"
         },
         "view2": {

web/locales/en.json

@@ -8,7 +8,6 @@
     },
     "onboarding-modal": {
         "view1": {
-            "header": "The Electricity Map",
             "subtitle": "Mapping the climate impact of electricity"
         },
         "view2": {

web/locales/pl.json

@@ -8,7 +8,6 @@
     },
     "onboarding-modal": {
         "view1": {
-            "header": "Electricity Map",
             "subtitle": "Obrazujemy wpływ produkcji energii elektrycznej na klimat"
         },
         "view2": {

web/locales/sv.json

@@ -8,7 +8,6 @@
     },
     "onboarding-modal": {
         "view1": {
-            "header": "Electricity Map",
             "subtitle": "Kartlägger klimatpåverkan från elkonsumtion"
         },
         "view2": {

web/public/css/OpenSansFont.css

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: local('OpenSans'),
+  local('Open Sans'),
+  local('OpenSans-Regular'),
+  url(../fonts/OpenSans-Regular.ttf) format('truetype');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('OpenSans Bold'),
+  local('Open Sans Bold'),
+  local('OpenSans-Bold'),
+  url(../fonts/OpenSans-Bold.ttf) format('truetype');
+  font-weight: bold;
+}