From 8206edb310b9ed49df9c781fa8308184af0453d2 Mon Sep 17 00:00:00 2001
From: efarooqui <efarooqui@pandora.com>
Date: Fri, 21 May 2021 14:48:40 -0700
Subject: [PATCH] Polygon checkbox working active and inactive; need to hook up
 action to filter through events

---
 src/common/constants.js                    |  3 +--
 src/common/utilities.js                    | 12 +++++++---
 src/components/atoms/Checkbox.js           |  4 ++--
 src/components/controls/atoms/PanelTree.js |  7 ++++--
 src/scss/toolbar.scss                      | 26 ++++++++++++++++------
 5 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/common/constants.js b/src/common/constants.js
index 371d923..2601f2a 100644
--- a/src/common/constants.js
+++ b/src/common/constants.js
@@ -27,7 +27,6 @@ export const POLYGON_CLIP_PATH = {
   STAR:
     "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
   DIAMOND: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
-  PENTAGON:
-    "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
+  PENTAGON: "polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)",
   TRIANGLE: "polygon(50% 0%, 0% 100%, 100% 100%)",
 };
diff --git a/src/common/utilities.js b/src/common/utilities.js
index 1e97607..5afe61c 100644
--- a/src/common/utilities.js
+++ b/src/common/utilities.js
@@ -515,9 +515,15 @@ export function mapStyleByShape(shapes, activeShapes) {
   const styledShapes = shapes.map((s) => {
     const { colour, shape, title } = s;
     const style = {
-      background: activeShapes.includes(title) ? colour : "none",
-      border: `1px solid ${colour}`,
-      clipPath: POLYGON_CLIP_PATH[shape],
+      checkboxStyles: {
+        background: activeShapes.includes(title) ? colour : "black",
+        border: "none",
+        clipPath: POLYGON_CLIP_PATH[shape],
+      },
+      containerStyles: {
+        background: colour,
+        clipPath: POLYGON_CLIP_PATH[shape],
+      },
     };
     s.styles = style;
     return s;
diff --git a/src/components/atoms/Checkbox.js b/src/components/atoms/Checkbox.js
index d555a38..e35bced 100644
--- a/src/components/atoms/Checkbox.js
+++ b/src/components/atoms/Checkbox.js
@@ -5,8 +5,8 @@ const Checkbox = ({ label, isActive, onClickCheckbox, color, styleProps }) => {
     <div className={isActive ? "item active" : "item"}>
       <span style={{ color: color }}>{label}</span>
       <button onClick={onClickCheckbox}>
-        <div className="border">
-          <div className="checkbox" style={styleProps} />
+        <div className="border" style={styleProps.containerStyles}>
+          <div className="checkbox" style={styleProps.checkboxStyles} />
         </div>
       </button>
     </div>
diff --git a/src/components/controls/atoms/PanelTree.js b/src/components/controls/atoms/PanelTree.js
index 2896056..18c65af 100644
--- a/src/components/controls/atoms/PanelTree.js
+++ b/src/components/controls/atoms/PanelTree.js
@@ -7,8 +7,11 @@ const PanelTree = ({ data, activeValues, onSelect, defaultCheckboxColor }) => {
       {data.map((val) => {
         const isActive = activeValues.includes(val.title);
         const baseStyles = {
-          background: isActive ? defaultCheckboxColor : "none",
-          border: `1px solid ${defaultCheckboxColor}`,
+          checkboxStyles: {
+            background: isActive ? defaultCheckboxColor : "none",
+            border: `1px solid ${defaultCheckboxColor}`,
+          },
+          containerStyles: {},
         };
         return (
           <li
diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss
index 5950bef..4546e5c 100644
--- a/src/scss/toolbar.scss
+++ b/src/scss/toolbar.scss
@@ -413,14 +413,26 @@
       text-align: left;
       float: left;
 
-      .checkbox {
-        display: inline-block;
-        width: 12px;
-        height: 12px;
-        border: 1px solid $offwhite;
-        box-sizing: border-box;
+      .border {
+        width: 16px;
+        height: 16px;
         background: none;
-        float: left;
+        box-sizing: border-box;
+        position: relative;
+
+        .checkbox {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          border: 1px solid $offwhite;
+          box-sizing: border-box;
+          background: none;
+          float: left;
+          position: absolute;
+          top: 2px;
+          left: 2px;
+          background: none;
+        }
       }
     }