feat(@ui): migrate checkbox component

src/pages/settings/panes/Plugins.tsx

@@ -1,15 +1,12 @@
-import { Check } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
-import styled from "styled-components";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 
-import { Button } from "@revoltchat/ui";
+import { Button, Checkbox } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../../mobx/State";
 
-import { CheckboxBase, Checkmark } from "../../../components/ui/Checkbox";
 import Tip from "../../../components/ui/Tip";
 
 // Just keeping this here for general purpose. Should probably be exported
@@ -21,45 +18,10 @@ interface Plugin {
     enabled: boolean | undefined;
 }
 
-const CustomCheckboxBase = styled(CheckboxBase)`
-    margin-top: 0 !important;
-`;
-export interface CheckboxProps {
-    checked: boolean;
-    disabled?: boolean;
-    onChange: (state: boolean) => void;
-}
-function PluginCheckbox(props: CheckboxProps) {
-    // HACK HACK HACK(lexisother): THIS ENTIRE THING IS A HACK!!!!
-    /*
-        Until some reviewer points me in the right direction, I've resorted to
-         fabricating my own checkbox component.
-       "WHY?!", you might ask. Well, the normal `Checkbox` component can take
-         textual contents, and *also* adds a `margin-top` of 20 pixels.
-        We... don't need that. At all. *Especially* the margin. It makes our card
-         look disproportionate.
-        
-        Apologies, @insert!
-    */
-    return (
-        <CustomCheckboxBase disabled={props.disabled}>
-            <input
-                type="checkbox"
-                checked={props.checked}
-                onChange={() =>
-                    !props.disabled && props.onChange(!props.checked)
-                }
-            />
-            <Checkmark checked={props.checked} className="check">
-                <Check size={20} />
-            </Checkmark>
-        </CustomCheckboxBase>
-    );
-}
-
 interface CardProps {
     plugin: Plugin;
 }
+
 function PluginCard({ plugin }: CardProps) {
     const plugins = useApplicationState().plugins;
 
@@ -70,12 +32,14 @@ function PluginCard({ plugin }: CardProps) {
             <div key={plugin.id} className={styles.botCard}>
                 <div className={styles.infocontainer}>
                     <div className={styles.infoheader}>
-                        <div className={styles.container}>
-                            {plugin.namespace} / {plugin.id}
-                        </div>
-                        <PluginCheckbox
+                        <Checkbox
                             key={plugin.id}
-                            checked={plugin.enabled!}
+                            value={plugin.enabled!}
+                            title={
+                                <>
+                                    {plugin.namespace} / {plugin.id}
+                                </>
+                            }
                             onChange={() => {
                                 !plugin.enabled
                                     ? plugins.load(plugin.namespace, plugin.id)