feat(@ui): migrate checkbox component

src/pages/settings/panes/Sync.tsx

@@ -3,11 +3,11 @@ import { observer } from "mobx-react-lite";
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 
+import { Checkbox } from "@revoltchat/ui";
+
 import { useApplicationState } from "../../../mobx/State";
 import { SyncKeys } from "../../../mobx/stores/Sync";
 
-import Checkbox from "../../../components/ui/Checkbox";
-
 export const Sync = observer(() => {
     const sync = useApplicationState().sync;
 
@@ -30,15 +30,15 @@ export const Sync = observer(() => {
             ).map(([key, title]) => (
                 <Checkbox
                     key={key}
-                    checked={sync.isEnabled(key)}
+                    value={sync.isEnabled(key)}
+                    title={<Text id={`app.settings.pages.${title}`} />}
                     description={
                         <Text
                             id={`app.settings.pages.sync.descriptions.${key}`}
                         />
                     }
-                    onChange={() => sync.toggle(key)}>
-                    <Text id={`app.settings.pages.${title}`} />
-                </Checkbox>
+                    onChange={() => sync.toggle(key)}
+                />
             ))}
             {/*<h5 style={{ marginTop: "20px", color: "grey" }}>
                 Last sync at 12:00