feat(@ui): port category button

src/pages/home/Home.tsx

@@ -17,6 +17,8 @@ import "./snow.scss";
 import { Text } from "preact-i18n";
 import { useContext, useMemo } from "preact/hooks";
 
+import { CategoryButton } from "@revoltchat/ui";
+
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../mobx/State";
@@ -24,10 +26,10 @@ import { useApplicationState } from "../../mobx/State";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-import { PageHeader } from "../../components/ui/Header";
-import CategoryButton from "../../components/ui/fluent/CategoryButton";
 import wideSVG from "/assets/wide.svg";
 
+import { PageHeader } from "../../components/ui/Header";
+
 const Overlay = styled.div`
     display: grid;
     height: 100%;

src/pages/settings/panes/Account.tsx

@@ -14,7 +14,7 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Button, LineDivider, Tip } from "@revoltchat/ui";
+import { Button, CategoryButton, LineDivider, Tip } from "@revoltchat/ui";
 
 import { stopPropagation } from "../../../lib/stopPropagation";
 
@@ -27,7 +27,6 @@ import {
 
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
 
 export const Account = observer(() => {
     const { openScreen, writeClipboard } = useIntermediate();

src/pages/settings/panes/Feedback.tsx

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
+import { CategoryButton } from "@revoltchat/ui";
 
 export function Feedback() {
     return (
@@ -15,7 +15,6 @@ export function Feedback() {
                 target="_blank"
                 rel="noreferrer">
                 <CategoryButton
-                    hover
                     action="external"
                     icon={<Github size={24} />}
                     description={
@@ -29,7 +28,6 @@ export function Feedback() {
                 target="_blank"
                 rel="noreferrer">
                 <CategoryButton
-                    hover
                     action="external"
                     icon={<ListOl size={24} />}
                     description={
@@ -43,7 +41,6 @@ export function Feedback() {
                 target="_blank"
                 rel="noreferrer">
                 <CategoryButton
-                    hover
                     action="external"
                     icon={<BugAlt size={24} />}
                     description={
@@ -55,7 +52,6 @@ export function Feedback() {
             <Link to="/invite/Testers">
                 <a>
                     <CategoryButton
-                        hover
                         action="chevron"
                         icon={<Group size={24} />}
                         description="You can report issues and discuss improvements with us directly here.">

src/pages/settings/panes/MyBots.tsx

@@ -11,7 +11,13 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useCallback, useEffect, useState } from "preact/hooks";
 
-import { Button, Checkbox, InputBox, Tip } from "@revoltchat/ui";
+import {
+    Button,
+    CategoryButton,
+    Checkbox,
+    InputBox,
+    Tip,
+} from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { internalEmit } from "../../../lib/eventEmitter";
@@ -28,7 +34,6 @@ import AutoComplete, {
 import CollapsibleSection from "../../../components/common/CollapsibleSection";
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
 
 interface Data {
     _id: string;

src/pages/settings/panes/Native.tsx

@@ -2,12 +2,10 @@ import { Refresh } from "@styled-icons/boxicons-regular";
 
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, Checkbox, Tip } from "@revoltchat/ui";
+import { Button, CategoryButton, Checkbox, Tip } from "@revoltchat/ui";
 
 import RLogo from "../assets/revolt_r.svg";
 
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
-
 export function Native() {
     if (typeof window.native === "undefined") return null;
     /* eslint-disable react-hooks/rules-of-hooks */

src/pages/settings/panes/Sessions.tsx

@@ -18,14 +18,18 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Button, LineDivider, Preloader, Tip } from "@revoltchat/ui";
+import {
+    Button,
+    CategoryButton,
+    LineDivider,
+    Preloader,
+    Tip,
+} from "@revoltchat/ui";
 
 import { dayjs } from "../../../context/Locale";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
-
 dayjs.extend(relativeTime);
 
 export function Sessions() {