clean up instances

frontend/src/metabase/admin/people/components/GroupSelect.jsx

@@ -12,7 +12,10 @@ const GroupOption = ({ group, selectedGroups = {}, onGroupChange }) => {
     return (
         <div className={cx("GroupOption flex align-center p1 px2", { "cursor-pointer": !disabled })} onClick={() => !disabled && onGroupChange(group, !selected) }>
             <span className={cx("pr1", getGroupColor(group), { disabled })}>
-                <CheckBox checked={selected} borderColor="currentColor" size={18} />
+                <CheckBox
+                    checked={selected}
+                    size={18}
+                />
             </span>
             {group.name}
         </div>

frontend/src/metabase/admin/people/components/UserGroupSelect.jsx

@@ -14,7 +14,10 @@ import GroupSummary from "./GroupSummary.jsx";
 const GroupOption = ({ name, color, selected, disabled, onChange }) =>
     <div className={cx("flex align-center p1 px2", { "cursor-pointer": !disabled })} onClick={() => !disabled && onChange(!selected) }>
         <span className={cx("pr1", color, { disabled })}>
-            <CheckBox checked={selected} borderColor="currentColor" size={18} />
+            <CheckBox
+                checked={selected}
+                size={18}
+            />
         </span>
         {name}
     </div>

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

@@ -36,19 +36,18 @@ const Item = ({
                     />
                 }
                 { setItemSelected &&
-                    <CheckBox
-                        className={cx(
-                            "cursor-pointer absolute top left",
-                            { "visible text-brand": selected },
-                            { "hover-child text-brand-hover text-light-blue transition-color": !selected }
-                        )}
-                        checked={selected}
-                        onChange={(e) => setItemSelected({ [id]: e.target.checked })}
-                        size={ITEM_ICON_SIZE}
-                        padding={3}
-                        borderColor="currentColor"
-                        invertChecked
-                    />
+                    <span className={cx(
+                        "absolute top left",
+                        { "visible": selected },
+                        { "hover-child": !selected }
+                    )}>
+                        <CheckBox
+                            checked={selected}
+                            onChange={e => setItemSelected({ [id]: e.target.checked })}
+                            size={ITEM_ICON_SIZE}
+                            padding={3}
+                        />
+                    </span>
                 }
             </div>
             <ItemBody

frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedFields.jsx

@@ -56,7 +56,10 @@ export default class ChartSettingOrderedFields extends Component {
                         outline="list"
                     >
                         <div className={cx("flex align-center p1", { "text-grey-2": !item.enabled })} >
-                            <CheckBox checked={item.enabled} className={cx("text-brand", { "text-grey-2": !item.enabled })} onChange={(e) => this.setEnabled(i, e.target.checked)} invertChecked />
+                            <CheckBox
+                                checked={item.enabled}
+                                onChange={e => this.setEnabled(i, e.target.checked)}
+                            />
                             <span className="ml1 h4">{columnNames[item.name]}</span>
                             <Icon className="flex-align-right text-grey-2 mr1 cursor-pointer" name="grabber" width={14} height={14}/>
                         </div>