feat(@ui): migrate category / overline and 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 &&