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

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;
-    transparent?: boolean;
+    withBackground?: 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>
-    );
-}