Polygon checkbox working active and inactive; need to hook up action to filter through events

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%)",
 };

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;

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>

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

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;
+        }
       }
     }