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

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 {
-    At,
-    ChevronLeft,
-    ChevronRight,
-    Hash,
-} from "@styled-icons/boxicons-regular";
+import { At, 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}>
-                    <Text id={`login.${type}`} />
-                </Overline>
+                <Category compact>
+                    <I18nError error={error}>
+                        <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}>
-                        <Text id={`login.error.${page}`} />
-                    </Overline>
+                    <Category>
+                        <I18nError error={error}>
+                            <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 {
-    useCallback,
-    useContext,
-    useEffect,
-    useRef,
-    useState,
-} from "preact/hooks";
+import { useCallback, 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
-                                                variant="uniform"
-                                                text={entry.category}
-                                            />
+                                            <Category>
+                                                {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
-                                    error="AudioPermissionBlock"
-                                    type="error"
-                                    block
-                                />
+                                <Category>
+                                    <I18nError error="AudioPermissionBlock" />
+                                </Category>
                             )}
                         </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"