mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
feat(@ui): migrate category / overline and header
This commit is contained in:
Paul Makles
parent
673efc0586
commit
68b9d5ea79
35 changed files with 187 additions and 384 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" />}>
|
||||
|
|
|
|||
|
|
@ -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={() =>
|
||||
<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" />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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()}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 />}
|
||||
|
|
|
|||
|
|
@ -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 && <> · </>}
|
||||
{props.error && (
|
||||
<Overline type="error">
|
||||
<Text id={`error.${props.error}`}>{props.error}</Text>
|
||||
</Overline>
|
||||
)}
|
||||
</OverlineBase>
|
||||
);
|
||||
}
|
||||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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" />{" "}
|
||||
· <I18nError error={error} />
|
||||
</Category>
|
||||
)}
|
||||
</form>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<Category compact>
|
||||
<Error
|
||||
error={
|
||||
<Text id="app.special.modals.account.failed" />
|
||||
</Overline>
|
||||
}
|
||||
/>
|
||||
</Category>
|
||||
)}
|
||||
</form>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
|
|
|
|||
|
|
@ -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 ? (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 &&
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,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 () => {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<Category compact>
|
||||
<I18nError error={error}>
|
||||
<Text id={`login.${type}`} />
|
||||
</Overline>
|
||||
</I18nError>
|
||||
</Category>
|
||||
)}
|
||||
<Localizer>
|
||||
<InputBox
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<Category>
|
||||
<I18nError error={error}>
|
||||
<Text id={`login.error.${page}`} />
|
||||
</Overline>
|
||||
</I18nError>
|
||||
</Category>
|
||||
)}
|
||||
<Button>
|
||||
<Text
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
)}
|
||||
</>
|
||||
),
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue