From f892c08d6a9001214bb43f18b17a1cca2ccfe48c Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Fri, 17 May 2019 13:40:34 +0100
Subject: [PATCH] fix colours in infopopup

---
 example.config.js            |  2 +-
 src/components/InfoPopup.jsx | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/example.config.js b/example.config.js
index 6885bd4..22cd3fe 100644
--- a/example.config.js
+++ b/example.config.js
@@ -28,7 +28,7 @@ module.exports = {
     ui: {
       style: {
         categories: {
-          alpha: 'blue',
+          // alpha: 'blue',
           beta: 'orange'
         },
         shapes: {},
diff --git a/src/components/InfoPopup.jsx b/src/components/InfoPopup.jsx
index 3a5121e..5bb4fcd 100644
--- a/src/components/InfoPopup.jsx
+++ b/src/components/InfoPopup.jsx
@@ -7,15 +7,17 @@ export default ({ ui, app, methods }) => {
   }
 
   function renderHalfWithDot () {
-    const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
+    // extract category colors from store for combined display.
+    const categoryKeys = Object.keys(ui.style.categories)
     let firstFill = 'red'
-    let secondFill = 'yellow'
-    if (categories.length >= 1) {
-      firstFill = 'rgb(163, 22, 33)'
+    let secondFill = 'blue'
+    if (categoryKeys.length >= 1) {
+      firstFill = ui.style.categories[categoryKeys[0]]
     }
-    if (categories.length >= 2) {
-      secondFill = '#1c5df9'
+    if (categoryKeys.length >= 2) {
+      secondFill = ui.style.categories[categoryKeys[1]]
     }
+
     return [
       <style>{`.svg-demo { max-width: 30px } .first { fill: ${firstFill} } .second { fill: ${secondFill} } .demo-text { font-size: 9pt; color: white; font-weight:900 }`}</style>,
       <svg viewBox='0 0 30 30' className='svg-demo'>