diff --git a/external/lang b/external/lang index 9406c734ca2cb7b65eefcf926d9e829f9a2056d7..03b206f608b071eb26a099657d9619d32f2bb264 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 9406c734ca2cb7b65eefcf926d9e829f9a2056d7 +Subproject commit 03b206f608b071eb26a099657d9619d32f2bb264 diff --git a/src/components/common/Tooltip.tsx b/src/components/common/Tooltip.tsx index 9bf320e57dbc3a33a1f4b41d25ad8adc38f601fd..86be55cc062a28ce1e56b156a52c21178ed1caeb 100644 --- a/src/components/common/Tooltip.tsx +++ b/src/components/common/Tooltip.tsx @@ -1,3 +1,5 @@ +import { Text } from "preact-i18n"; +import styled from "styled-components"; import { Children } from "../../types/Preact"; import Tippy, { TippyProps } from '@tippyjs/react'; @@ -17,3 +19,24 @@ export default function Tooltip(props: Props) { </Tippy> ); } + +const PermissionTooltipBase = styled.div` + display: flex; + align-items: center; + flex-direction: column; + + code { + font-family: 'Fira Mono'; + } +`; + +export function PermissionTooltip(props: Omit<Props, 'content'> & { permission: string }) { + const { permission, ...tooltipProps } = props; + + return ( + <Tooltip content={<PermissionTooltipBase> + <Text id="app.permissions.required" /> + <code>{ permission }</code> + </PermissionTooltipBase>} {...tooltipProps} /> + ) +} diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index 404e48e19bb3c644e9d4e5f91312eddcd01af431..a8bd63027c5468386df308e32f6fe5d68a11069f 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -1,6 +1,6 @@ import { ulid } from "ulid"; import { Text } from "preact-i18n"; -import Tooltip from "../Tooltip"; +import Tooltip, { PermissionTooltip } from "../Tooltip"; import { Channel } from "revolt.js"; import styled from "styled-components"; import { defer } from "../../../lib/defer"; @@ -90,9 +90,9 @@ function MessageBox({ channel, draft, dispatcher }: Props) { return ( <Base> <Blocked> - <Tooltip content={<div>Permissions Required<div>Send messages</div></div>} placement="top"> + <PermissionTooltip permission="SendMessages" placement="top"> <ShieldX size={22}/> - </Tooltip> + </PermissionTooltip> <Text id="app.main.channel.misc.no_sending" /> </Blocked> </Base>