feat(i18n): translate home buttons and server tooltips (#361)

This commit is contained in:
Ed L 2021-10-31 22:42:40 +00:00 committed by GitHub
parent 1800aace43
commit 893cd6b4cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 9 deletions

View file

@ -6,6 +6,8 @@ import { ServerPermission } from "revolt.js/dist/api/permissions";
import { Server } from "revolt.js/dist/maps/Servers";
import styled from "styled-components";
import { Text } from "preact-i18n";
import Header from "../ui/Header";
import IconButton from "../ui/IconButton";
@ -31,7 +33,9 @@ export default observer(({ server }: Props) => {
background: bannerURL ? `url('${bannerURL}')` : undefined,
}}>
{server.flags && server.flags & 1 ? (
<Tooltip content={"Official Server"} placement={"bottom-start"}>
<Tooltip
content={<Text id="app.special.server-badges.official" />}
placement={"bottom-start"}>
<svg width="20" height="20">
<image
xlinkHref="/assets/badges/verified.svg"
@ -52,7 +56,9 @@ export default observer(({ server }: Props) => {
</Tooltip>
) : undefined}
{server.flags && server.flags & 2 ? (
<Tooltip content={"Verified Server"} placement={"bottom-start"}>
<Tooltip
content={<Text id="app.special.server-badges.verified" />}
placement={"bottom-start"}>
<svg width="20" height="20">
<image
xlinkHref="/assets/badges/verified.svg"

View file

@ -4,12 +4,14 @@ import styled, { css } from "styled-components";
import styles from "./Home.module.scss";
import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { useContext, useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { dispatch, getState } from "../../redux";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import wideSVG from "../../../public/assets/wide.svg";
import Emoji from "../../components/common/Emoji";
import Tooltip from "../../components/common/Tooltip";
@ -31,6 +33,7 @@ const IconConainer = styled.div`
`;
export default function Home() {
const client = useContext(AppContext);
const [showChannels, setChannels] = useState(
getState().sectionToggle[CHANNELS_SIDEBAR_KEY] ?? true,
);
@ -74,7 +77,11 @@ export default function Home() {
<CategoryButton
action="chevron"
icon={<Emoji emoji="😁" size={32} />}>
Join testers server
{client.servers.get("01F7ZSBSFHQ8TA81725KQCSDDP") ? (
<Text id="app.home.goto-testers" />
) : (
<Text id="app.home.join-testers" />
)}
</CategoryButton>
</Link>
<a
@ -84,14 +91,14 @@ export default function Home() {
<CategoryButton
action="external"
icon={<Emoji emoji="💷" size={32} />}>
Donate to Revolt
<Text id="app.home.donate" />
</CategoryButton>
</a>
<Link to="/settings/feedback">
<CategoryButton
action="chevron"
icon={<Emoji emoji="🎉" size={32} />}>
Give feedback
<Text id="app.home.feedback" />
</CategoryButton>
</Link>
<a
@ -101,15 +108,15 @@ export default function Home() {
<CategoryButton
action="external"
icon={<Emoji emoji="🧭" size={32} />}>
Find Servers & Bots
<Text id="app.home.social" />
</CategoryButton>
</a>
<Tooltip content="You can also right-click the user icon in the top left, or left click it if you're already home.">
<Tooltip content={<Text id="app.home.settings-tooltip" />}>
<Link to="/settings">
<CategoryButton
action="chevron"
icon={<Emoji emoji="🔧" size={32} />}>
Settings
<Text id="app.home.settings" />
</CategoryButton>
</Link>
</Tooltip>