cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-21 14:40:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Paul Makles 2022-05-30 14:42:09 +01:00
parent 673efc0586
commit 68b9d5ea79
35 changed files with 187 additions and 384 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/common/messaging/Message.tsx
View file

@ -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

10
src/components/common/messaging/embed/EmbedInvite.tsx
View file

@ -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>
)}
</>
);
}

5
src/components/common/user/UserHeader.tsx
View file

@ -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" />}>

25
src/components/navigation/left/HomeSidebar.tsx
View file

@ -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
text={<Text id="app.main.categories.conversations" />}
action={() =>
openScreen({
id: "special_input",
type: "create_group",
})
}
/>
<Category>
<Text id="app.main.categories.conversations" />
<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_group",
})
}>
<Plus size={16} />
</IconButton>
</Category>
{channels.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}

3
src/components/navigation/left/ServerListSidebar.tsx
View file

@ -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}
/>

8
src/components/navigation/left/ServerSidebar.tsx
View file

@ -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>,
);

15
src/components/navigation/right/Search.tsx
View file

@ -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>
<a onClick={close}>« back to members</a>
</Overline>
<Overline type="subtle" block>
<Category>
<Error
error={<a onClick={close}>« back to members</a>}
/>
</Category>
<Category>
<Text id="app.main.channel.search.title" />
</Overline>
</Category>
<InputBox
value={query}
onKeyDown={(e) => e.key === "Enter" && search()}

55
src/components/ui/Category.tsx
View file

@ -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>
);
}

79
src/components/ui/Header.tsx
View file

@ -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 />}

91
src/components/ui/Overline.tsx
View file

@ -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>
);
}

13
src/context/Locale.tsx
View file

@ -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}
/>
);
}

16
src/context/intermediate/modals/Input.tsx
View file

@ -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>
{field}
</Overline>
<Category>
<I18nError error={error}>{field}</I18nError>
</Category>
) : (
error && <Overline error={error} type="error" block />
error && (
<Category>
<I18nError error={error} />
</Category>
)
)}
<InputBox
value={value}

26
src/context/intermediate/modals/Prompt.tsx
View file

@ -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)}

12
src/context/intermediate/popovers/CreateBot.tsx
View file

@ -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>

14
src/context/intermediate/popovers/ModifyAccount.tsx
View file

@ -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>

11
src/context/intermediate/popovers/ServerIdentityModal.tsx
View file

@ -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}

3
src/context/intermediate/popovers/UserPicker.tsx
View file

@ -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]);

21
src/context/intermediate/popovers/UserProfile.tsx
View file

@ -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 ? (
<>

8
src/pages/Open.tsx
View file

@ -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>
);

20
src/pages/channels/ChannelHeader.tsx
View file

@ -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 &&

2
src/pages/developer/Developer.tsx
View file

@ -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);

6
src/pages/discover/Discover.tsx
View file

@ -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>

5
src/pages/friends/Friends.tsx
View file

@ -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>

2
src/pages/home/Home.tsx
View file

@ -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}>

7
src/pages/invite/Invite.tsx
View file

@ -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 () => {

7
src/pages/invite/InviteBot.tsx
View file

@ -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}

12
src/pages/login/FormField.tsx
View file

@ -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

12
src/pages/login/forms/Form.tsx
View file

@ -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

10
src/pages/login/forms/FormVerify.tsx
View file

@ -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" />
);

2
src/pages/settings/ChannelSettings.tsx
View file

@ -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";

25
src/pages/settings/GenericSettings.tsx
View file

@ -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 />
)}
</>
),
)}

1
src/pages/settings/panes/Account.tsx
View file

@ -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>

14
src/pages/settings/panes/Audio.tsx
View file

@ -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>

4
src/pages/settings/server/Members.tsx
View file

@ -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 (

18
src/pages/settings/server/Roles.tsx
View file

@ -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"