diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx index 82928e8e..5962fce7 100644 --- a/src/components/common/messaging/Message.tsx +++ b/src/components/common/messaging/Message.tsx @@ -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 ?? } {!queued && } {queued?.error && ( - + + + )} {message.attachments?.map((attachment, index) => ( )} - {joinError && } + {joinError && ( + + + + )} ); } diff --git a/src/components/common/user/UserHeader.tsx b/src/components/common/user/UserHeader.tsx index e1572dd2..0ab85bfd 100644 --- a/src/components/common/user/UserHeader.tsx +++ b/src/components/common/user/UserHeader.tsx @@ -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 ( -
+
}> diff --git a/src/components/navigation/left/HomeSidebar.tsx b/src/components/navigation/left/HomeSidebar.tsx index bb471340..220f542c 100644 --- a/src/components/navigation/left/HomeSidebar.tsx +++ b/src/components/navigation/left/HomeSidebar.tsx @@ -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(() => { )} - } - action={() => - openScreen({ - id: "special_input", - type: "create_group", - }) - } - /> + + + + openScreen({ + id: "special_input", + type: "create_group", + }) + }> + + + {channels.length === 0 && ( )} diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index 23d2b869..4d7c5381 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/src/components/navigation/left/ServerListSidebar.tsx @@ -30,11 +30,14 @@ export default observer(() => { return ( diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx index 0e228fa4..4a771701 100644 --- a/src/components/navigation/left/ServerSidebar.tsx +++ b/src/components/navigation/left/ServerSidebar.tsx @@ -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(() => { }> + summary={{category.title}}> {channels} , ); diff --git a/src/components/navigation/right/Search.tsx b/src/components/navigation/right/Search.tsx index 2f021471..8694ab11 100644 --- a/src/components/navigation/right/Search.tsx +++ b/src/components/navigation/right/Search.tsx @@ -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) { - - « back to members - - + + « back to members} + /> + + - + e.key === "Enter" && search()} diff --git a/src/components/ui/Category.tsx b/src/components/ui/Category.tsx deleted file mode 100644 index baaa50df..00000000 --- a/src/components/ui/Category.tsx +++ /dev/null @@ -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>` - 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, - "children" | "as" | "action" -> & { - text: Children; - action?: () => void; - variant?: "default" | "uniform"; -}; - -export default function Category(props: Props) { - const { text, action, ...otherProps } = props; - - return ( - - {text} - {action && } - - ); -} diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 4ff01ea5..860a294d 100644 --- a/src/components/ui/Header.tsx +++ b/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` - 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 (
{!noBurger && } diff --git a/src/components/ui/Overline.tsx b/src/components/ui/Overline.tsx deleted file mode 100644 index be34e010..00000000 --- a/src/components/ui/Overline.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import styled, { css } from "styled-components/macro"; - -import { Text } from "preact-i18n"; - -import { Children } from "../../types/Preact"; - -type Props = Omit, "children" | "as"> & { - error?: string; - hover?: boolean; - block?: boolean; - spaced?: boolean; - noMargin?: boolean; - children?: Children; - type?: "default" | "subtle" | "error" | "accent"; -}; - -const OverlineBase = styled.div>` - 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 ( - - {props.children} - {props.children && props.error && <> · } - {props.error && ( - - {props.error} - - )} - - ); -} diff --git a/src/context/Locale.tsx b/src/context/Locale.tsx index ab7ce398..ce115a9b 100644 --- a/src/context/Locale.tsx +++ b/src/context/Locale.tsx @@ -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 ( + : undefined} + children={children} + /> + ); +} diff --git a/src/context/intermediate/modals/Input.tsx b/src/context/intermediate/modals/Input.tsx index 767bfa8e..446a2921 100644 --- a/src/context/intermediate/modals/Input.tsx +++ b/src/context/intermediate/modals/Input.tsx @@ -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 ? ( - - {field} - + + {field} + ) : ( - error && + error && ( + + + + ) )} - {error && } + {error && ( + + + + )} {content} ); @@ -385,9 +389,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => { id="app.special.modals.prompt.confirm_ban" fields={{ name: props.user?.username }} /> - + - + @@ -452,9 +456,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => { ]} content={ <> - + - + @@ -469,9 +473,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => { value={type === "Voice"} onSelect={() => setType("Voice")} /> - + - + setName(e.currentTarget.value)} @@ -527,9 +531,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => { ]} content={ <> - + - + setName(e.currentTarget.value)} diff --git a/src/context/intermediate/popovers/CreateBot.tsx b/src/context/intermediate/popovers/CreateBot.tsx index da57562b..42beded7 100644 --- a/src/context/intermediate/popovers/CreateBot.tsx +++ b/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 && ( - - - + + {" "} + · + )} diff --git a/src/context/intermediate/popovers/ModifyAccount.tsx b/src/context/intermediate/popovers/ModifyAccount.tsx index c001a14d..6d241a90 100644 --- a/src/context/intermediate/popovers/ModifyAccount.tsx +++ b/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 && ( - - - + + + } + /> + )} diff --git a/src/context/intermediate/popovers/ServerIdentityModal.tsx b/src/context/intermediate/popovers/ServerIdentityModal.tsx index 00b2f8aa..c9136004 100644 --- a/src/context/intermediate/popovers/ServerIdentityModal.tsx +++ b/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}>
- + - + { />
- + - + { if (v) { setSelected([...selected, x._id]); diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx index e14692f4..701cce8c 100644 --- a/src/context/intermediate/popovers/UserProfile.tsx +++ b/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(
{flags & 1 ? ( /** ! FIXME: i18n this area */ - - User is suspended - + + + ) : undefined} {flags & 2 ? ( - - User deleted their account - + + + ) : undefined} {flags & 4 ? ( - - User is banned - + + + ) : undefined} {user.bot ? ( <> diff --git a/src/pages/Open.tsx b/src/pages/Open.tsx index bd686e79..20f9b3fa 100644 --- a/src/pages/Open.tsx +++ b/src/pages/Open.tsx @@ -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 ( -
+
); @@ -72,7 +72,7 @@ export default function Open() { }); return ( -
+
); diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx index 69f32d50..46860e4b 100644 --- a/src/pages/channels/ChannelHeader.tsx +++ b/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 ( - + {name} {isTouchscreenDevice && diff --git a/src/pages/developer/Developer.tsx b/src/pages/developer/Developer.tsx index d64cf5f6..46733c44 100644 --- a/src/pages/developer/Developer.tsx +++ b/src/pages/developer/Developer.tsx @@ -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); diff --git a/src/pages/discover/Discover.tsx b/src/pages/discover/Discover.tsx index 7894dc32..7102c532 100644 --- a/src/pages/discover/Discover.tsx +++ b/src/pages/discover/Discover.tsx @@ -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 ( {isTouchscreenDevice && ( -
+
Discover
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx index 63ba7e21..df5fa24c 100644 --- a/src/pages/friends/Friends.tsx +++ b/src/pages/friends/Friends.tsx @@ -68,7 +68,10 @@ export default observer(() => { const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0; return ( <> - } transparent noBurger> + } + withTransparency + noBurger>
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 56c5cfa1..2a5e0da6 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -86,7 +86,7 @@ export default observer(() => {
)}
- } transparent> + } withTransparency>
diff --git a/src/pages/invite/Invite.tsx b/src/pages/invite/Invite.tsx index 2e28da93..b11f0d96 100644 --- a/src/pages/invite/Invite.tsx +++ b/src/pages/invite/Invite.tsx @@ -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() { }} /> - + + +
- Add to server + Add to server - Add to group + Add to group
diff --git a/src/pages/settings/server/Members.tsx b/src/pages/settings/server/Members.tsx index 73661a6f..ff2f08b2 100644 --- a/src/pages/settings/server/Members.tsx +++ b/src/pages/settings/server/Members.tsx @@ -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) => {
{open && (
- Roles + Roles {Object.keys(server_roles).map((key) => { const role = server_roles[key]; return ( diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx index 8aada1f6..aa70f81f 100644 --- a/src/pages/settings/server/Roles.tsx +++ b/src/pages/settings/server/Roles.tsx @@ -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" && ( <>
- + - +

{

- + - +

{

- + - +

{

- + - +