feat(@ui): port category button

src/components/settings/AppearanceShims.tsx

@@ -6,7 +6,13 @@ import pSBC from "shade-blend-color";
 
 import { Text } from "preact-i18n";
 
-import { Checkbox, ColourSwatches, ComboBox, Radio } from "@revoltchat/ui";
+import {
+    CategoryButton,
+    Checkbox,
+    ColourSwatches,
+    ComboBox,
+    Radio,
+} from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
 
@@ -21,7 +27,6 @@ import {
     MONOSPACE_FONT_KEYS,
 } from "../../context/Theme";
 
-import CategoryButton from "../ui/fluent/CategoryButton";
 import { EmojiSelector } from "./appearance/EmojiSelector";
 import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
 
@@ -54,8 +59,7 @@ export const ThemeShopShim = () => {
                 action="chevron"
                 description={
                     <Text id="app.settings.pages.appearance.discover.description" />
-                }
-                hover>
+                }>
                 <Text id="app.settings.pages.appearance.discover.title" />
             </CategoryButton>
         </Link>

src/components/ui/fluent/CategoryButton.tsx

@@ -1,172 +0,0 @@
-import {
-    ChevronRight,
-    LinkExternal,
-    Pencil,
-} from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components/macro";
-
-import { Children } from "../../../types/Preact";
-
-interface BaseProps {
-    readonly hover?: boolean;
-    readonly account?: boolean;
-    readonly disabled?: boolean;
-    readonly largeDescription?: boolean;
-}
-
-const CategoryBase = styled.div<BaseProps>`
-    padding: 9.8px 12px;
-    border-radius: var(--border-radius);
-    margin-bottom: 10px;
-    color: var(--foreground);
-    background: var(--secondary-header);
-    gap: 12px;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    overflow: hidden;
-
-    > svg {
-        flex-shrink: 0;
-    }
-
-    .action {
-        display: flex;
-        align-items: center;
-    }
-
-    .content {
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-        font-weight: 600;
-        font-size: 14px;
-
-        .title {
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
-        }
-
-        .description {
-            ${(props) =>
-                props.largeDescription
-                    ? css`
-                          font-size: 14px;
-                      `
-                    : css`
-                          font-size: 11px;
-                      `}
-
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 3;
-            overflow: hidden;
-            font-weight: 500;
-            color: var(--secondary-foreground);
-
-            a:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-
-    ${(props) =>
-        props.hover &&
-        css`
-            cursor: pointer;
-            opacity: 1;
-            transition: 0.1s ease background-color;
-
-            &:hover {
-                background: var(--secondary-background);
-            }
-        `}
-
-    ${(props) =>
-        props.disabled &&
-        css`
-            opacity: 0.4;
-            /*.content,
-            .action {
-                color: var(--tertiary-foreground);
-            }*/
-
-            .action {
-                font-size: 14px;
-            }
-        `}
-    
-    ${(props) =>
-        props.account &&
-        css`
-            height: 54px;
-
-            .content {
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-                .title {
-                    text-transform: uppercase;
-                    font-size: 12px;
-                    color: var(--secondary-foreground);
-                }
-
-                .description {
-                    font-size: 15px;
-                    font-weight: 500 !important;
-                    color: var(--foreground);
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    overflow: hidden;
-                }
-            }
-        `}
-`;
-
-interface Props extends BaseProps {
-    icon?: Children;
-    children?: Children;
-    description?: Children;
-
-    onClick?: () => void;
-    action?: "chevron" | "external" | Children;
-}
-
-export default function CategoryButton({
-    icon,
-    children,
-    description,
-    account,
-    disabled,
-    onClick,
-    hover,
-    action,
-}: Props) {
-    return (
-        <CategoryBase
-            hover={hover || typeof onClick !== "undefined"}
-            onClick={onClick}
-            disabled={disabled}
-            account={account}>
-            {icon}
-            <div class="content">
-                <div className="title">{children}</div>
-
-                <div className="description">{description}</div>
-            </div>
-            <div class="action">
-                {typeof action === "string" ? (
-                    action === "chevron" ? (
-                        <ChevronRight size={24} />
-                    ) : (
-                        <LinkExternal size={20} />
-                    )
-                ) : (
-                    action
-                )}
-            </div>
-        </CategoryBase>
-    );
-}