Modified cluster styling to have gradients

src/components/presentational/Map/Clusters.jsx

@@ -27,10 +27,10 @@ function ClusterEvents ({
     const totalPoints = calculateTotalPoints()
 
     const styles = ({
-      fill: colors.fallbackEventColor,
-      stroke: colors.darkBackground,
-      strokeWidth: 0,
-      fillOpacity: calcClusterOpacity(pointCount, totalPoints)
+      // fill: colors.fallbackEventColor,
+      // stroke: colors.darkBackground,
+      // strokeWidth: 0,
+      fillOpacity: calcClusterOpacity(pointCount, totalPoints),
     })
 
     return (
@@ -44,6 +44,7 @@ function ClusterEvents ({
           cy='0'
           r={calcClusterSize(pointCount, totalPoints)}
           style={styles}
+          fill="url('#myGradient')"
         />}
       </React.Fragment>
     )

src/components/presentational/Map/DefsClusters.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const DefsClusters = () => (
+  <defs>
+    <radialGradient id="myGradient">
+      <stop offset="10%" stop-color="red" />
+      <stop offset="95%" stop-color="black" />
+      {/* <stop offset="95%" stop-color="red" /> */}
+    </radialGradient>
+  </defs>
+)
+
+export default DefsClusters