feat(@ui): migrate category / overline and header

src/components/common/messaging/Message.tsx

@@ -5,16 +5,17 @@ import { useTriggerEvents } from "preact-context-menu";
 import { memo } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 
+import { Category } from "@revoltchat/ui";
+
 import { internalEmit } from "../../../lib/eventEmitter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { QueuedMessage } from "../../../mobx/stores/MessageQueue";
 
+import { I18nError } from "../../../context/Locale";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
-import Overline from "../../ui/Overline";
-
 import { Children } from "../../../types/Preact";
 import Markdown from "../../markdown/Markdown";
 import UserIcon from "../user/UserIcon";
@@ -162,7 +163,9 @@ const Message = observer(
                         {replacement ?? <Markdown content={content} />}
                         {!queued && <InviteList message={message} />}
                         {queued?.error && (
-                            <Overline type="error" error={queued.error} />
+                            <Category>
+                                <I18nError error={queued.error} />
+                            </Category>
                         )}
                         {message.attachments?.map((attachment, index) => (
                             <Attachment

src/components/common/messaging/embed/EmbedInvite.tsx

@@ -7,10 +7,11 @@ import styled, { css } from "styled-components/macro";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Button, Preloader } from "@revoltchat/ui";
+import { Button, Category, Preloader } from "@revoltchat/ui";
 
 import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 
+import { I18nError } from "../../../../context/Locale";
 import {
     AppContext,
     ClientStatus,
@@ -19,7 +20,6 @@ import {
 import { takeError } from "../../../../context/revoltjs/util";
 
 import ServerIcon from "../../../../components/common/ServerIcon";
-import Overline from "../../../ui/Overline";
 
 const EmbedInviteBase = styled.div`
     width: 400px;
@@ -159,7 +159,11 @@ export function EmbedInvite({ code }: Props) {
                     </Button>
                 )}
             </EmbedInviteBase>
-            {joinError && <Overline type="error" error={joinError} />}
+            {joinError && (
+                <Category>
+                    <I18nError error={joinError} />
+                </Category>
+            )}
         </>
     );
 }

src/components/common/user/UserHeader.tsx

@@ -7,13 +7,12 @@ import styled from "styled-components/macro";
 import { openContextMenu } from "preact-context-menu";
 import { Text, Localizer } from "preact-i18n";
 
-import { IconButton } from "@revoltchat/ui";
+import { Header, IconButton } from "@revoltchat/ui";
 
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
-import Header from "../../ui/Header";
 import Tooltip from "../Tooltip";
 import UserStatus from "./UserStatus";
 
@@ -52,7 +51,7 @@ export default observer(({ user }: Props) => {
     const { writeClipboard } = useIntermediate();
 
     return (
-        <Header topBorder placement="secondary">
+        <Header topBorder palette="secondary">
             <HeaderBase>
                 <Localizer>
                     <Tooltip content={<Text id="app.special.copy_username" />}>

src/components/navigation/left/HomeSidebar.tsx

@@ -1,3 +1,4 @@
+import { Plus } from "@styled-icons/boxicons-regular";
 import {
     Home,
     UserDetail,
@@ -11,6 +12,8 @@ import styled, { css } from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
 
+import { Category, IconButton } from "@revoltchat/ui";
+
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
@@ -20,7 +23,6 @@ import { useApplicationState } from "../../../mobx/State";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
-import Category from "../../ui/Category";
 import placeholderSVG from "../items/placeholder.svg";
 
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
@@ -125,15 +127,18 @@ export default observer(() => {
                         </ButtonItem>
                     </Link>
                 )}
-                <Category
+                <Category>
-                    text={<Text id="app.main.categories.conversations" />}
+                    <Text id="app.main.categories.conversations" />
-                    action={() =>
+                    <IconButton
-                        openScreen({
+                        onClick={() =>
-                            id: "special_input",
+                            openScreen({
-                            type: "create_group",
+                                id: "special_input",
-                        })
+                                type: "create_group",
-                    }
+                            })
-                />
+                        }>
+                        <Plus size={16} />
+                    </IconButton>
+                </Category>
                 {channels.length === 0 && (
                     <img src={placeholderSVG} loading="eager" />
                 )}

src/components/navigation/left/ServerListSidebar.tsx

@@ -30,11 +30,14 @@ export default observer(() => {
 
     return (
         <ServerList
+            // @ts-expect-error FIXME
             client={client}
             active={server_id}
             createServer={createServer}
+            // @ts-expect-error FIXME
             permit={state.notifications}
             home={state.layout.getLastHomePath}
+            // @ts-expect-error FIXME
             servers={state.ordering.orderedServers}
             reorder={state.ordering.reorderServer}
         />

src/components/navigation/left/ServerSidebar.tsx

@@ -1,12 +1,12 @@
 import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router";
-import { Server } from "revolt.js";
 import styled, { css } from "styled-components/macro";
 
-import { Ref } from "preact";
 import { useTriggerEvents } from "preact-context-menu";
 import { useEffect } from "preact/hooks";
 
+import { Category } from "@revoltchat/ui";
+
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { internalEmit } from "../../../lib/eventEmitter";
@@ -18,8 +18,6 @@ import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import CollapsibleSection from "../../common/CollapsibleSection";
 import ServerHeader from "../../common/ServerHeader";
-import Category from "../../ui/Category";
-
 import { ChannelButton } from "../items/ButtonItem";
 import ConnectionStatus from "../items/ConnectionStatus";
 
@@ -126,7 +124,7 @@ export default observer(() => {
                 <CollapsibleSection
                     id={`category_${category.id}`}
                     defaultValue
-                    summary={<Category text={category.title} />}>
+                    summary={<Category>{category.title}</Category>}>
                     {channels}
                 </CollapsibleSection>,
             );

src/components/navigation/right/Search.tsx

@@ -5,12 +5,11 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, InputBox, Preloader } from "@revoltchat/ui";
+import { Button, Category, Error, InputBox, Preloader } from "@revoltchat/ui";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../common/messaging/Message";
-import Overline from "../../ui/Overline";
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 
 type SearchState =
@@ -100,12 +99,14 @@ export function SearchSidebar({ close }: Props) {
         <GenericSidebarBase data-scroll-offset="with-padding">
             <GenericSidebarList>
                 <SearchBase>
-                    <Overline type="accent" block hover>
+                    <Category>
-                        <a onClick={close}>« back to members</a>
+                        <Error
-                    </Overline>
+                            error={<a onClick={close}>« back to members</a>}
-                    <Overline type="subtle" block>
+                        />
+                    </Category>
+                    <Category>
                         <Text id="app.main.channel.search.title" />
-                    </Overline>
+                    </Category>
                     <InputBox
                         value={query}
                         onKeyDown={(e) => e.key === "Enter" && search()}

src/components/ui/Category.tsx

@@ -1,55 +0,0 @@
-import { Plus } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components/macro";
-
-import { Children } from "../../types/Preact";
-
-const CategoryBase = styled.div<Pick<Props, "variant">>`
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-
-    margin-top: 4px;
-    padding: 6px 0 6px 8px;
-    margin-bottom: 4px;
-    white-space: nowrap;
-
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    justify-content: space-between;
-
-    svg {
-        cursor: pointer;
-    }
-
-    &:first-child {
-        margin-top: 0;
-        padding-top: 0;
-    }
-
-    ${(props) =>
-        props.variant === "uniform" &&
-        css`
-            padding-top: 6px;
-        `}
-`;
-
-type Props = Omit<
-    JSX.HTMLAttributes<HTMLDivElement>,
-    "children" | "as" | "action"
-> & {
-    text: Children;
-    action?: () => void;
-    variant?: "default" | "uniform";
-};
-
-export default function Category(props: Props) {
-    const { text, action, ...otherProps } = props;
-
-    return (
-        <CategoryBase {...otherProps}>
-            {text}
-            {action && <Plus size={16} onClick={action} />}
-        </CategoryBase>
-    );
-}

src/components/ui/Header.tsx

@@ -7,6 +7,8 @@ import { observer } from "mobx-react-lite";
 import { useLocation } from "react-router-dom";
 import styled, { css } from "styled-components/macro";
 
+import { Header } from "@revoltchat/ui";
+
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../mobx/State";
@@ -18,82 +20,11 @@ interface Props {
     topBorder?: boolean;
     bottomBorder?: boolean;
 
-    background?: boolean;
+    withBackground?: boolean;
-    transparent?: boolean;
+    withTransparency?: boolean;
     placement: "primary" | "secondary";
 }
 
-const Header = styled.div<Props>`
-    gap: 10px;
-    flex: 0 auto;
-    display: flex;
-    flex-shrink: 0;
-    padding: 0 16px;
-    font-weight: 600;
-    user-select: none;
-    align-items: center;
-
-    height: var(--header-height);
-
-    background-size: cover !important;
-    background-position: center !important;
-
-    svg {
-        flex-shrink: 0;
-    }
-
-    .menu {
-        margin-inline-end: 8px;
-        color: var(--secondary-foreground);
-    }
-
-    ${(props) =>
-        props.transparent
-            ? css`
-                  background-color: rgba(
-                      var(--primary-header-rgb),
-                      max(var(--min-opacity), 0.75)
-                  );
-                  backdrop-filter: blur(20px);
-                  z-index: 20;
-                  position: absolute;
-                  width: 100%;
-              `
-            : css`
-                  background-color: var(--primary-header);
-              `}
-
-    ${(props) =>
-        props.background &&
-        css`
-            height: 120px !important;
-            align-items: flex-end;
-
-            text-shadow: 0px 0px 1px black;
-        `}
-
-    ${(props) =>
-        props.placement === "secondary" &&
-        css`
-            background-color: var(--secondary-header);
-            padding: 14px;
-        `}
-
-    ${(props) =>
-        props.topBorder &&
-        css`
-            border-start-start-radius: 8px;
-        `}
-
-    ${(props) =>
-        props.bottomBorder &&
-        css`
-            border-end-start-radius: 8px;
-        `}
-`;
-
-export default Header;
-
 const IconContainer = styled.div`
     display: flex;
     align-items: center;
@@ -128,7 +59,7 @@ export const PageHeader = observer(
         return (
             <Header
                 {...props}
-                placement="primary"
+                palette="primary"
                 topBorder={!visible}
                 bottomBorder={!pathname.includes("/server")}>
                 {!noBurger && <HamburgerAction />}

src/components/ui/Overline.tsx

@@ -1,91 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-import { Text } from "preact-i18n";
-
-import { Children } from "../../types/Preact";
-
-type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
-    error?: string;
-    hover?: boolean;
-    block?: boolean;
-    spaced?: boolean;
-    noMargin?: boolean;
-    children?: Children;
-    type?: "default" | "subtle" | "error" | "accent";
-};
-
-const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
-    display: inline;
-    transition: 0.2s ease filter;
-
-    ${(props) =>
-        props.hover &&
-        css`
-            cursor: pointer;
-            transition: 0.2s ease filter;
-
-            &:hover {
-                filter: brightness(1.2);
-            }
-        `}
-
-    ${(props) =>
-        !props.noMargin &&
-        css`
-            margin: 0.4em 0;
-        `}
-
-    ${(props) =>
-        props.spaced &&
-        css`
-            margin-top: 0.8em;
-        `}
-
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--foreground);
-    text-transform: uppercase;
-
-    ${(props) =>
-        props.type === "subtle" &&
-        css`
-            font-size: 12px;
-            color: var(--secondary-foreground);
-        `}
-
-    ${(props) =>
-        props.type === "error" &&
-        css`
-            font-size: 12px;
-            font-weight: 400;
-            color: var(--error);
-        `}
-
-    ${(props) =>
-        props.type === "accent" &&
-        css`
-            font-size: 12px;
-            font-weight: 400;
-            color: var(--accent);
-        `}
-
-    ${(props) =>
-        props.block &&
-        css`
-            display: block;
-        `}
-`;
-
-export default function Overline(props: Props) {
-    return (
-        <OverlineBase {...props}>
-            {props.children}
-            {props.children && props.error && <> &middot; </>}
-            {props.error && (
-                <Overline type="error">
-                    <Text id={`error.${props.error}`}>{props.error}</Text>
-                </Overline>
-            )}
-        </OverlineBase>
-    );
-}

src/context/Locale.tsx

@@ -5,9 +5,11 @@ import update from "dayjs/plugin/updateLocale";
 import defaultsDeep from "lodash.defaultsdeep";
 import { observer } from "mobx-react-lite";
 
-import { IntlProvider } from "preact-i18n";
+import { IntlProvider, Text } from "preact-i18n";
 import { useCallback, useEffect, useState } from "preact/hooks";
 
+import { Error } from "@revoltchat/ui";
+
 import { useApplicationState } from "../mobx/State";
 
 import { Languages } from "../../external/lang/Languages";
@@ -143,3 +145,12 @@ function transformLanguage(source: Dictionary) {
 
     return obj;
 }
+
+export function I18nError({ error, children }: { error: any; children?: any }) {
+    return (
+        <Error
+            error={error ? <Text id={error} children={error} /> : undefined}
+            children={children}
+        />
+    );
+}

src/context/intermediate/modals/Input.tsx

@@ -4,11 +4,11 @@ import { Server } from "revolt.js";
 import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
-import { InputBox } from "@revoltchat/ui";
+import { Category, InputBox } from "@revoltchat/ui";
 
 import Modal from "../../../components/ui/Modal";
-import Overline from "../../../components/ui/Overline";
 import { Children } from "../../../types/Preact";
+import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 
@@ -60,11 +60,15 @@ export function InputModal({
             ]}
             onClose={onClose}>
             {field ? (
-                <Overline error={error} block>
+                <Category>
-                    {field}
+                    <I18nError error={error}>{field}</I18nError>
-                </Overline>
+                </Category>
             ) : (
-                error && <Overline error={error} type="error" block />
+                error && (
+                    <Category>
+                        <I18nError error={error} />
+                    </Category>
+                )
             )}
             <InputBox
                 value={value}

src/context/intermediate/modals/Prompt.tsx

@@ -7,15 +7,15 @@ import styles from "./Prompt.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { InputBox, Radio } from "@revoltchat/ui";
+import { Category, Error, InputBox, Radio } from "@revoltchat/ui";
 
 import { TextReact } from "../../../lib/i18n";
 
 import Message from "../../../components/common/messaging/Message";
 import UserIcon from "../../../components/common/user/UserIcon";
 import Modal, { Action } from "../../../components/ui/Modal";
-import Overline from "../../../components/ui/Overline";
 import { Children } from "../../../types/Preact";
+import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 import { useIntermediate } from "../Intermediate";
@@ -44,7 +44,11 @@ export function PromptModal({
             actions={actions}
             onClose={onClose}
             disabled={disabled}>
-            {error && <Overline error={error} type="error" />}
+            {error && (
+                <Category>
+                    <I18nError error={error} />
+                </Category>
+            )}
             {content}
         </Modal>
     );
@@ -385,9 +389,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                                 id="app.special.modals.prompt.confirm_ban"
                                 fields={{ name: props.user?.username }}
                             />
-                            <Overline>
+                            <Category>
                                 <Text id="app.special.modals.prompt.confirm_ban_reason" />
-                            </Overline>
+                            </Category>
                             <InputBox
                                 value={reason ?? ""}
                                 onChange={(e) =>
@@ -452,9 +456,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                     ]}
                     content={
                         <>
-                            <Overline block type="subtle">
+                            <Category>
                                 <Text id="app.main.servers.channel_type" />
-                            </Overline>
+                            </Category>
                             <Radio
                                 title={
                                     <Text id="app.main.servers.text_channel" />
@@ -469,9 +473,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                                 value={type === "Voice"}
                                 onSelect={() => setType("Voice")}
                             />
-                            <Overline block type="subtle">
+                            <Category>
                                 <Text id="app.main.servers.channel_name" />
-                            </Overline>
+                            </Category>
                             <InputBox
                                 value={name}
                                 onChange={(e) => setName(e.currentTarget.value)}
@@ -527,9 +531,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                     ]}
                     content={
                         <>
-                            <Overline block type="subtle">
+                            <Category>
                                 <Text id="app.main.servers.category_name" />
-                            </Overline>
+                            </Category>
                             <InputBox
                                 value={name}
                                 onChange={(e) => setName(e.currentTarget.value)}

src/context/intermediate/popovers/CreateBot.tsx

@@ -4,10 +4,11 @@ import { API } from "revolt.js";
 import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
-import Modal from "../../../components/ui/Modal";
+import { Category } from "@revoltchat/ui";
-import Overline from "../../../components/ui/Overline";
 
+import Modal from "../../../components/ui/Modal";
 import FormField from "../../../pages/login/FormField";
+import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 
@@ -70,9 +71,10 @@ export function CreateBotModal({ onClose, onCreate }: Props) {
                     error={errors.name?.message}
                 />
                 {error && (
-                    <Overline type="error" error={error}>
+                    <Category>
-                        <Text id="app.special.popovers.create_bot.failed" />
+                        <Text id="app.special.popovers.create_bot.failed" />{" "}
-                    </Overline>
+                        &middot; <I18nError error={error} />
+                    </Category>
                 )}
             </form>
         </Modal>

src/context/intermediate/popovers/ModifyAccount.tsx

@@ -3,9 +3,9 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
-import Modal from "../../../components/ui/Modal";
+import { Category, Error } from "@revoltchat/ui";
-import Overline from "../../../components/ui/Overline";
 
+import Modal from "../../../components/ui/Modal";
 import FormField from "../../../pages/login/FormField";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
@@ -140,9 +140,13 @@ export function ModifyAccountModal({ onClose, field }: Props) {
                     disabled={processing}
                 />
                 {error && (
-                    <Overline type="error" error={error}>
+                    <Category compact>
-                        <Text id="app.special.modals.account.failed" />
+                        <Error
-                    </Overline>
+                            error={
+                                <Text id="app.special.modals.account.failed" />
+                            }
+                        />
+                    </Category>
                 )}
             </form>
         </Modal>

src/context/intermediate/popovers/ServerIdentityModal.tsx

@@ -5,12 +5,11 @@ import styles from "./ServerIdentityModal.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, InputBox } from "@revoltchat/ui";
+import { Button, Category, InputBox } from "@revoltchat/ui";
 
 import { noop } from "../../../lib/js";
 
 import Modal from "../../../components/ui/Modal";
-import Overline from "../../../components/ui/Overline";
 import { FileUploader } from "../../revoltjs/FileUploads";
 import { useClient } from "../../revoltjs/RevoltClient";
 
@@ -47,9 +46,9 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
             onClose={onClose}>
             <div className={styles.identityMain}>
                 <div>
-                    <Overline type="subtle">
+                    <Category>
                         <Text id="app.special.popovers.server_identity.avatar" />
-                    </Overline>
+                    </Category>
                     <FileUploader
                         width={80}
                         height={80}
@@ -78,9 +77,9 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
                     />
                 </div>
                 <div>
-                    <Overline type="subtle">
+                    <Category>
                         <Text id="app.special.popovers.server_identity.nickname" />
-                    </Overline>
+                    </Category>
                     <InputBox
                         value={nickname}
                         placeholder={client.user!.username}

src/context/intermediate/popovers/UserPicker.tsx

@@ -4,7 +4,6 @@ import { useState } from "preact/hooks";
 
 import UserCheckbox from "../../../components/common/user/UserCheckbox";
 import Modal from "../../../components/ui/Modal";
-
 import { useClient } from "../../revoltjs/RevoltClient";
 
 interface Props {
@@ -42,7 +41,7 @@ export function UserPicker(props: Props) {
                         <UserCheckbox
                             key={x._id}
                             user={x}
-                            checked={selected.includes(x._id)}
+                            value={selected.includes(x._id)}
                             onChange={(v) => {
                                 if (v) {
                                     setSelected([...selected, x._id]);

src/context/intermediate/popovers/UserProfile.tsx

@@ -15,7 +15,7 @@ import styles from "./UserProfile.module.scss";
 import { Localizer, Text } from "preact-i18n";
 import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
 
-import { Button, IconButton, Preloader } from "@revoltchat/ui";
+import { Button, Category, Error, IconButton, Preloader } from "@revoltchat/ui";
 
 import { noop } from "../../../lib/js";
 
@@ -28,7 +28,6 @@ import { Username } from "../../../components/common/user/UserShort";
 import UserStatus from "../../../components/common/user/UserStatus";
 import Markdown from "../../../components/markdown/Markdown";
 import Modal from "../../../components/ui/Modal";
-import Overline from "../../../components/ui/Overline";
 import {
     ClientStatus,
     StatusContext,
@@ -278,19 +277,19 @@ export const UserProfile = observer(
                             <div>
                                 {flags & 1 ? (
                                     /** ! FIXME: i18n this area */
-                                    <Overline type="error" block>
+                                    <Category>
-                                        User is suspended
+                                        <Error error="User is suspended" />
-                                    </Overline>
+                                    </Category>
                                 ) : undefined}
                                 {flags & 2 ? (
-                                    <Overline type="error" block>
+                                    <Category>
-                                        User deleted their account
+                                        <Error error="User deleted their account" />
-                                    </Overline>
+                                    </Category>
                                 ) : undefined}
                                 {flags & 4 ? (
-                                    <Overline type="error" block>
+                                    <Category>
-                                        User is banned
+                                        <Error error="User is banned" />
-                                    </Overline>
+                                    </Category>
                                 ) : undefined}
                                 {user.bot ? (
                                     <>

src/pages/Open.tsx

@@ -4,6 +4,8 @@ import { useHistory, useParams } from "react-router-dom";
 import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
 
+import { Header } from "@revoltchat/ui";
+
 import { useIntermediate } from "../context/intermediate/Intermediate";
 import {
     AppContext,
@@ -11,8 +13,6 @@ import {
     StatusContext,
 } from "../context/revoltjs/RevoltClient";
 
-import Header from "../components/ui/Header";
-
 export default function Open() {
     const history = useHistory();
     const client = useContext(AppContext);
@@ -22,7 +22,7 @@ export default function Open() {
 
     if (status !== ClientStatus.ONLINE) {
         return (
-            <Header placement="primary">
+            <Header palette="primary">
                 <Text id="general.loading" />
             </Header>
         );
@@ -72,7 +72,7 @@ export default function Open() {
     });
 
     return (
-        <Header placement="primary">
+        <Header palette="primary">
             <Text id="general.loading" />
         </Header>
     );

src/pages/channels/ChannelHeader.tsx

@@ -1,31 +1,19 @@
-import {
+import { At, Hash } from "@styled-icons/boxicons-regular";
-    At,
-    ChevronLeft,
-    ChevronRight,
-    Hash,
-} from "@styled-icons/boxicons-regular";
 import { Notepad, Group } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js";
 import { User } from "revolt.js";
-import styled, { css } from "styled-components/macro";
+import styled from "styled-components/macro";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
-import { useApplicationState } from "../../mobx/State";
-import { SIDEBAR_CHANNELS, SIDEBAR_MEMBERS } from "../../mobx/stores/Layout";
-
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import { getChannelName } from "../../context/revoltjs/util";
 
 import { useStatusColour } from "../../components/common/user/UserIcon";
 import UserStatus from "../../components/common/user/UserStatus";
-import Header, {
-    HamburgerAction,
-    PageHeader,
-} from "../../components/ui/Header";
-
 import Markdown from "../../components/markdown/Markdown";
+import { PageHeader } from "../../components/ui/Header";
 import HeaderActions from "./actions/HeaderActions";
 
 export interface ChannelHeaderProps {
@@ -98,7 +86,7 @@ export default observer(({ channel }: ChannelHeaderProps) => {
     }
 
     return (
-        <PageHeader icon={icon} transparent>
+        <PageHeader icon={icon} withTransparency>
             <Info>
                 <span className="name">{name}</span>
                 {isTouchscreenDevice &&

src/pages/developer/Developer.tsx

@@ -7,7 +7,7 @@ import { TextReact } from "../../lib/i18n";
 
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-import Header, { PageHeader } from "../../components/ui/Header";
+import { PageHeader } from "../../components/ui/Header";
 
 export default function Developer() {
     // const voice = useContext(VoiceContext);

src/pages/discover/Discover.tsx

@@ -5,7 +5,7 @@ import styled, { css } from "styled-components/macro";
 
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
-import { Preloader } from "@revoltchat/ui";
+import { Header, Preloader } from "@revoltchat/ui";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
@@ -14,8 +14,6 @@ import { useApplicationState } from "../../mobx/State";
 import { Overrides } from "../../context/Theme";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 
-import Header from "../../components/ui/Header";
-
 const Container = styled.div`
     flex-grow: 1;
     display: flex;
@@ -165,7 +163,7 @@ export default function Discover() {
     return (
         <Container>
             {isTouchscreenDevice && (
-                <Header placement="primary" transparent>
+                <Header palette="primary" withTransparency>
                     <Compass size={27} />
                     Discover
                 </Header>

src/pages/friends/Friends.tsx

@@ -68,7 +68,10 @@ export default observer(() => {
     const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
     return (
         <>
-            <PageHeader icon={<UserDetail size={24} />} transparent noBurger>
+            <PageHeader
+                icon={<UserDetail size={24} />}
+                withTransparency
+                noBurger>
                 <div className={styles.title}>
                     <Text id="app.navigation.tabs.friends" />
                 </div>

src/pages/home/Home.tsx

@@ -86,7 +86,7 @@ export default observer(() => {
                     </div>
                 )}
                 <div className="content">
-                    <PageHeader icon={<HomeIcon size={24} />} transparent>
+                    <PageHeader icon={<HomeIcon size={24} />} withTransparency>
                         <Text id="app.navigation.tabs.home" />
                     </PageHeader>
                     <div className={styles.homeScreen}>

src/pages/invite/Invite.tsx

@@ -7,7 +7,7 @@ import styles from "./Invite.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Button, Preloader } from "@revoltchat/ui";
+import { Button, Category, Error, Preloader } from "@revoltchat/ui";
 
 import { TextReact } from "../../lib/i18n";
 
@@ -23,7 +23,6 @@ import { takeError } from "../../context/revoltjs/util";
 
 import ServerIcon from "../../components/common/ServerIcon";
 import UserIcon from "../../components/common/user/UserIcon";
-import Overline from "../../components/ui/Overline";
 
 export default function Invite() {
     const history = useHistory();
@@ -149,7 +148,9 @@ export default function Invite() {
                                 }}
                             />
                         </h3>
-                        <Overline type="error" error={error} />
+                        <Category>
+                            <Error error={error} />
+                        </Category>
                         <Button
                             palette="secondary"
                             onClick={async () => {

src/pages/invite/InviteBot.tsx

@@ -4,13 +4,12 @@ import styled from "styled-components/macro";
 
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, ComboBox, Preloader, Tip } from "@revoltchat/ui";
+import { Button, Category, ComboBox, Preloader, Tip } from "@revoltchat/ui";
 
 import { useClient } from "../../context/revoltjs/RevoltClient";
 
 import UserIcon from "../../components/common/user/UserIcon";
 import Markdown from "../../components/markdown/Markdown";
-import Overline from "../../components/ui/Overline";
 
 const BotInfo = styled.div`
     gap: 12px;
@@ -58,7 +57,7 @@ export default function InviteBot() {
                             )}
                         </div>
                     </BotInfo>
-                    <Overline type="subtle">Add to server</Overline>
+                    <Category>Add to server</Category>
                     <Option>
                         <ComboBox
                             value={server}
@@ -81,7 +80,7 @@ export default function InviteBot() {
                             Add
                         </Button>
                     </Option>
-                    <Overline type="subtle">Add to group</Overline>
+                    <Category>Add to group</Category>
                     <Option>
                         <ComboBox
                             value={group}

src/pages/login/FormField.tsx

@@ -2,9 +2,9 @@ import { UseFormMethods } from "react-hook-form";
 
 import { Text, Localizer } from "preact-i18n";
 
-import { InputBox } from "@revoltchat/ui";
+import { Category, InputBox } from "@revoltchat/ui";
 
-import Overline from "../../components/ui/Overline";
+import { I18nError } from "../../context/Locale";
 
 type FieldType =
     | "email"
@@ -32,9 +32,11 @@ export default function FormField({
     return (
         <>
             {showOverline && (
-                <Overline error={error}>
+                <Category compact>
-                    <Text id={`login.${type}`} />
+                    <I18nError error={error}>
-                </Overline>
+                        <Text id={`login.${type}`} />
+                    </I18nError>
+                </Category>
             )}
             <Localizer>
                 <InputBox

src/pages/login/forms/Form.tsx

@@ -6,16 +6,16 @@ import styles from "../Login.module.scss";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
-import { Button, Preloader } from "@revoltchat/ui";
+import { Button, Category, Preloader } from "@revoltchat/ui";
 import { Tip } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../../mobx/State";
 
+import { I18nError } from "../../../context/Locale";
 import { takeError } from "../../../context/revoltjs/util";
 
 import WaveSVG from "../../settings/assets/wave.svg";
 
-import Overline from "../../../components/ui/Overline";
 import FormField from "../FormField";
 import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
 import { MailProvider } from "./MailProvider";
@@ -199,9 +199,11 @@ export const Form = observer(({ page, callback }: Props) => {
                     />
                 )}
                 {error && (
-                    <Overline type="error" error={error}>
+                    <Category>
-                        <Text id={`login.error.${page}`} />
+                        <I18nError error={error}>
-                    </Overline>
+                            <Text id={`login.error.${page}`} />
+                        </I18nError>
+                    </Category>
                 )}
                 <Button>
                     <Text

src/pages/login/forms/FormVerify.tsx

@@ -1,14 +1,14 @@
 import { useHistory, useParams } from "react-router-dom";
 
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
-import { Preloader } from "@revoltchat/ui";
+import { Category, Preloader } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../../mobx/State";
 
+import { I18nError } from "../../../context/Locale";
 import { takeError } from "../../../context/revoltjs/util";
 
-import Overline from "../../../components/ui/Overline";
 import { Form } from "./Form";
 
 export function FormResend() {
@@ -41,7 +41,9 @@ export function FormVerify() {
     }, []);
 
     return error ? (
-        <Overline type="error" error={error} />
+        <Category>
+            <I18nError error={error} />
+        </Category>
     ) : (
         <Preloader type="ring" />
     );

src/pages/settings/ChannelSettings.tsx

@@ -7,8 +7,6 @@ import { Text } from "preact-i18n";
 import { useClient } from "../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../context/revoltjs/util";
 
-import Category from "../../components/ui/Category";
-
 import { GenericSettings } from "./GenericSettings";
 import Overview from "./channel/Overview";
 import Permissions from "./channel/Permissions";

src/pages/settings/GenericSettings.tsx

@@ -5,23 +5,15 @@ import { useHistory, useParams } from "react-router-dom";
 import styles from "./Settings.module.scss";
 import classNames from "classnames";
 import { Text } from "preact-i18n";
-import {
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-    useCallback,
-    useContext,
-    useEffect,
-    useRef,
-    useState,
-} from "preact/hooks";
 
-import { IconButton, LineDivider } from "@revoltchat/ui";
+import { Category, Header, IconButton, LineDivider } from "@revoltchat/ui";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../mobx/State";
 
 import ButtonItem from "../../components/navigation/items/ButtonItem";
-import Category from "../../components/ui/Category";
-import Header from "../../components/ui/Header";
 import { Children } from "../../types/Preact";
 
 interface Props {
@@ -98,7 +90,7 @@ export function GenericSettings({
                 />
             </Helmet>
             {isTouchscreenDevice && (
-                <Header placement="primary" transparent>
+                <Header palette="primary" withTransparency>
                     {typeof page === "undefined" ? (
                         <>
                             {showExitButton && (
@@ -139,10 +131,9 @@ export function GenericSettings({
                                 entry.hidden ? undefined : (
                                     <>
                                         {entry.category && (
-                                            <Category
+                                            <Category>
-                                                variant="uniform"
+                                                {entry.category}
-                                                text={entry.category}
+                                            </Category>
-                                            />
                                         )}
                                         <ButtonItem
                                             active={
@@ -155,7 +146,9 @@ export function GenericSettings({
                                             compact>
                                             {entry.icon} {entry.title}
                                         </ButtonItem>
-                                        {entry.divider && <LineDivider />}
+                                        {entry.divider && (
+                                            <LineDivider compact />
+                                        )}
                                     </>
                                 ),
                             )}

src/pages/settings/panes/Account.tsx

@@ -220,7 +220,6 @@ export const Account = observer(() => {
                     description={
                         "Delete your account, including all of your data. (sends an email to contact@revolt.chat)"
                     }
-                    hover
                     action="external">
                     <Text id="app.settings.pages.account.manage.delete" />
                 </CategoryButton>

src/pages/settings/panes/Audio.tsx

@@ -2,14 +2,14 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, ComboBox, Tip } from "@revoltchat/ui";
+import { Button, Category, ComboBox, Tip } from "@revoltchat/ui";
 
 import { stopPropagation } from "../../../lib/stopPropagation";
 import { voiceState } from "../../../lib/vortex/VoiceState";
 
-import opusSVG from "../assets/opus_logo.svg";
+import { I18nError } from "../../../context/Locale";
 
-import Overline from "../../../components/ui/Overline";
+import opusSVG from "../assets/opus_logo.svg";
 
 {
     /*import OpusSVG from "../assets/opus_logo.svg";*/
@@ -169,11 +169,9 @@ export function Audio() {
                                 </Button>
                             )}
                             {error && error.name === "NotAllowedError" && (
-                                <Overline
+                                <Category>
-                                    error="AudioPermissionBlock"
+                                    <I18nError error="AudioPermissionBlock" />
-                                    type="error"
+                                </Category>
-                                    block
-                                />
                             )}
                         </div>
                     </div>

src/pages/settings/server/Members.tsx

@@ -11,6 +11,7 @@ import { useEffect, useMemo, useState } from "preact/hooks";
 
 import {
     Button,
+    Category,
     Checkbox,
     IconButton,
     InputBox,
@@ -19,7 +20,6 @@ import {
 
 import UserIcon from "../../../components/common/user/UserIcon";
 import { Username } from "../../../components/common/user/UserShort";
-import Overline from "../../../components/ui/Overline";
 
 interface InnerProps {
     member: Member;
@@ -51,7 +51,7 @@ const Inner = observer(({ member }: InnerProps) => {
             </div>
             {open && (
                 <div className={styles.memberView}>
-                    <Overline type="subtle">Roles</Overline>
+                    <Category>Roles</Category>
                     {Object.keys(server_roles).map((key) => {
                         const role = server_roles[key];
                         return (

src/pages/settings/server/Roles.tsx

@@ -13,13 +13,13 @@ import {
     Checkbox,
     ColourSwatches,
     InputBox,
+    Category,
 } from "@revoltchat/ui";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import { PermissionList } from "../../../components/settings/roles/PermissionList";
 import { RoleOrDefault } from "../../../components/settings/roles/RoleSelection";
-import Overline from "../../../components/ui/Overline";
 
 interface Props {
     server: Server;
@@ -136,9 +136,9 @@ export const Roles = observer(({ server }: Props) => {
                         {selected !== "default" && (
                             <>
                                 <section>
-                                    <Overline type="subtle">
+                                    <Category>
                                         <Text id="app.settings.permissions.role_name" />
-                                    </Overline>
+                                    </Category>
                                     <p>
                                         <InputBox
                                             value={currentRoleValue.name}
@@ -153,9 +153,9 @@ export const Roles = observer(({ server }: Props) => {
                                     </p>
                                 </section>
                                 <section>
-                                    <Overline type="subtle">
+                                    <Category>
                                         <Text id="app.settings.permissions.role_colour" />
-                                    </Overline>
+                                    </Category>
                                     <p>
                                         <ColourSwatches
                                             value={
@@ -169,9 +169,9 @@ export const Roles = observer(({ server }: Props) => {
                                     </p>
                                 </section>
                                 <section>
-                                    <Overline type="subtle">
+                                    <Category>
                                         <Text id="app.settings.permissions.role_options" />
-                                    </Overline>
+                                    </Category>
                                     <p>
                                         <Checkbox
                                             value={
@@ -190,9 +190,9 @@ export const Roles = observer(({ server }: Props) => {
                                     </p>
                                 </section>
                                 <section>
-                                    <Overline type="subtle">
+                                    <Category>
                                         <Text id="app.settings.permissions.role_ranking" />
-                                    </Overline>
+                                    </Category>
                                     <p>
                                         <InputBox
                                             type="number"