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

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 Overline from "../../../components/ui/Overline";
+import { Category } from "@revoltchat/ui";
 
+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}>
-                        <Text id="app.special.popovers.create_bot.failed" />
-                    </Overline>
+                    <Category>
+                        <Text id="app.special.popovers.create_bot.failed" />{" "}
+                        &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 Overline from "../../../components/ui/Overline";
+import { Category, Error } from "@revoltchat/ui";
 
+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}>
-                        <Text id="app.special.modals.account.failed" />
-                    </Overline>
+                    <Category compact>
+                        <Error
+                            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>
-                                        User is suspended
-                                    </Overline>
+                                    <Category>
+                                        <Error error="User is suspended" />
+                                    </Category>
                                 ) : undefined}
                                 {flags & 2 ? (
-                                    <Overline type="error" block>
-                                        User deleted their account
-                                    </Overline>
+                                    <Category>
+                                        <Error error="User deleted their account" />
+                                    </Category>
                                 ) : undefined}
                                 {flags & 4 ? (
-                                    <Overline type="error" block>
-                                        User is banned
-                                    </Overline>
+                                    <Category>
+                                        <Error error="User is banned" />
+                                    </Category>
                                 ) : undefined}
                                 {user.bot ? (
                                     <>