Merge pull request neo4j#878 from oskarhane/label-colors

Replace and add more viz styling colors

Author: pe4cey

src/browser/modules/D3Visualization/graphStyle.js

@@ -111,39 +111,64 @@ export default function neoGraphStyle () {
   ]
   const defaultColors = [
     {
-      color: '#A5ABB6',
+      color: '#FFE081',
       'border-color': '#9AA1AC',
       'text-color-internal': '#FFFFFF'
     },
     {
-      color: '#68BDF6',
-      'border-color': '#5CA8DB',
+      color: '#C990C0',
+      'border-color': '#b261a5',
       'text-color-internal': '#FFFFFF'
     },
     {
-      color: '#6DCE9E',
-      'border-color': '#60B58B',
+      color: '#F79767',
+      'border-color': '#f36924',
       'text-color-internal': '#FFFFFF'
     },
     {
-      color: '#FF756E',
-      'border-color': '#E06760',
+      color: '#57C7E3',
+      'border-color': '#23b3d7',
       'text-color-internal': '#FFFFFF'
     },
     {
-      color: '#DE9BF9',
-      'border-color': '#BF85D6',
+      color: '#F16667',
+      'border-color': '#eb2728',
       'text-color-internal': '#FFFFFF'
     },
     {
-      color: '#FB95AF',
-      'border-color': '#E0849B',
+      color: '#D9C8AE',
+      'border-color': '#c0a378',
+      'text-color-internal': '#604A0E'
+    },
+    {
+      color: '#8DCC93',
+      'border-color': '#5db665',
+      'text-color-internal': '#604A0E'
+    },
+    {
+      color: '#ECB5C9',
+      'border-color': '#da7298',
+      'text-color-internal': '#604A0E'
+    },
+    {
+      color: '#4C8EDA',
+      'border-color': '#2870c2',
       'text-color-internal': '#FFFFFF'
     },
     {
-      color: '#FFD86E',
-      'border-color': '#EDBA39',
+      color: '#FFC454',
+      'border-color': '#d7a013',
       'text-color-internal': '#604A0E'
+    },
+    {
+      color: '#DA7194',
+      'border-color': '#cc3c6c',
+      'text-color-internal': '#FFFFFF'
+    },
+    {
+      color: '#569480',
+      'border-color': '#447666',
+      'text-color-internal': '#FFFFFF'
     }
   ]
   const Selector = (function () {

src/browser/modules/D3Visualization/graphStyle.test.js

@@ -84,8 +84,8 @@ relationship {
 }
 
 node.foo {
-  color: #68BDF6;
-  border-color: #5CA8DB;
+  color: #C990C0;
+  border-color: #b261a5;
   text-color-internal: #FFFFFF;
   defaultCaption: <id>;
 }
@@ -124,8 +124,8 @@ relationship {
 }
 
 node.foo\\.bar {
-  color: #68BDF6;
-  border-color: #5CA8DB;
+  color: #C990C0;
+  border-color: #b261a5;
   text-color-internal: #FFFFFF;
   defaultCaption: <id>;
 }

src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.js.snap

@@ -29,7 +29,7 @@ exports[`Visualization renders with result 1`] = `
               >
                 <li
                   class="token token-label styled__StyledLabelToken-sc-13boxex-16 jNYiQl"
-                  style="background-color: rgb(109, 206, 158); color: rgb(255, 255, 255);"
+                  style="background-color: rgb(247, 151, 103); color: rgb(255, 255, 255);"
                 >
                   *
                   <span
@@ -49,7 +49,7 @@ exports[`Visualization renders with result 1`] = `
               >
                 <li
                   class="token token-label styled__StyledLabelToken-sc-13boxex-16 jNYiQl"
-                  style="background-color: rgb(104, 189, 246); color: rgb(255, 255, 255);"
+                  style="background-color: rgb(201, 144, 192); color: rgb(255, 255, 255);"
                 >
                   Person
                   <span
@@ -102,9 +102,9 @@ exports[`Visualization renders with result 1`] = `
                     class="outline"
                     cx="0"
                     cy="0"
-                    fill="#68BDF6"
+                    fill="#C990C0"
                     r="25"
-                    stroke="#5CA8DB"
+                    stroke="#b261a5"
                     stroke-width="2px"
                   />
                   <text