clean up stacked checkbox

frontend/src/metabase/components/StackedCheckBox.info.js

@@ -8,7 +8,7 @@ A stacked checkbox, representing "all" items.
 `;
 
 export const examples = {
-    "off": <StackedCheckBox />,
-    "on": <StackedCheckBox checked />,
-    "on inverted": <StackedCheckBox style={{ color: "#509EE3" }} invertChecked checked />
+    "Off - Default": <StackedCheckBox />,
+    "Checked": <StackedCheckBox checked />,
+    "Checked with color": <StackedCheckBox checked color='purple' />,
 };

frontend/src/metabase/components/StackedCheckBox.jsx

 import React from "react";
-
 import CheckBox from "metabase/components/CheckBox.jsx";
 
+const OFFSET = 4;
+
 const StackedCheckBox = (props) =>
-    <span className={props.className} style={{ ...props.style, position: "relative" }}>
-        <CheckBox {...props} className={null} style={{ position: "absolute", top: -3, left: 3, zIndex: -1 }} />
-        <CheckBox {...props} className={null} style={{}} />
-    </span>
+    <div className="relative">
+        <span
+            className="absolute"
+            style={{
+                top: -OFFSET,
+                left: OFFSET,
+                zIndex: -1
+            }}
+        >
+            <CheckBox {...props} />
+        </span>
+        <CheckBox {...props} />
+    </div>
 
 export default StackedCheckBox;

frontend/src/metabase/questions/components/ActionHeader.jsx

@@ -14,13 +14,14 @@ import LabelPopover from "../containers/LabelPopover.jsx";
 const ActionHeader = ({ visibleCount, selectedCount, allAreSelected, sectionIsArchive, setAllSelected, setArchived, labels }) =>
     <div className={S.actionHeader}>
         <Tooltip tooltip={"Select all " + visibleCount} isEnabled={!allAreSelected}>
-            <StackedCheckBox
-                checked={allAreSelected}
-                className="ml1"
-                onChange={(e) => setAllSelected(e.target.checked)}
-                size={20} padding={3} borderColor="currentColor"
-                invertChecked
-            />
+            <span className="ml1">
+                <StackedCheckBox
+                    checked={allAreSelected}
+                    onChange={e => setAllSelected(e.target.checked)}
+                    size={20}
+                    padding={3}
+                />
+            </span>
         </Tooltip>
         <span className={S.selectedCount}>
             {selectedCount} selected