Replace harcoded strings to allow translation

src/components/settings/account/AccountManagement.tsx

@@ -39,7 +39,7 @@ export default function AccountManagement() {
             <CategoryButton
                 icon={<Block size={24} color="var(--error)" />}
                 description={
-                    "Disable your account. You won't be able to access it unless you contact support."
+                    <Text id="app.settings.pages.account.manage.disable_long" />
                 }
                 action="chevron"
                 onClick={callback("disable")}>
@@ -49,7 +49,7 @@ export default function AccountManagement() {
             <CategoryButton
                 icon={<Trash size={24} color="var(--error)" />}
                 description={
-                    "Your account will be queued for deletion, a confirmation email will be sent."
+                    <Text id="app.settings.pages.account.manage.delete_long" />
                 }
                 action="chevron"
                 onClick={callback("delete")}>

src/components/settings/account/MultiFactorAuthentication.tsx

@@ -198,7 +198,15 @@ export default function MultiFactorAuthentication() {
                         color={!mfa?.totp_mfa ? "var(--error)" : undefined}
                     />
                 }
-                description={"Set up time-based one-time password."}
+                description={
+                    <Text
+                        id={`app.settings.pages.account.2fa.${
+                            mfa?.recovery_active
+                                ? "remove"
+                                : "add"
+                        }_long`}
+                    />
+                }
                 disabled={!mfa || (!mfa.recovery_active && !mfa.totp_mfa)}
                 onClick={totpAction}>
                 <Text

src/pages/discover/Discover.tsx

@@ -5,6 +5,8 @@ import styled, { css } from "styled-components/macro";
 
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
+import { Text } from "preact-i18n";
+
 import { Header, Preloader } from "@revoltchat/ui";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
@@ -165,7 +167,7 @@ export default function Discover() {
             {isTouchscreenDevice && (
                 <Header palette="primary" withTransparency>
                     <Compass size={27} />
-                    Discover
+                    <Text id="app.navigation.tabs.discover" />
                 </Header>
             )}
             {!loaded && (

src/pages/settings/panes/Audio.tsx

@@ -226,7 +226,7 @@ export function Audio() {
             <hr />
             <div className={styles.opus}>
                 <img height="20" src={opusSVG} draggable={false} />
-                Audio codec powered by Opus
+                <Text id="app.settings.pages.audio.audio_codec" />
             </div>
         </>
     );

src/pages/settings/panes/Feedback.tsx

@@ -54,8 +54,8 @@ export function Feedback() {
                     <CategoryButton
                         action="chevron"
                         icon={<Group size={24} />}
-                        description="You can report issues and discuss improvements with us directly here.">
+                        description={<Text id="app.home.join-testers_desc" />}>
-                        Join Testers server.
+                        <Text id="app.home.join-testers_desc" />
                     </CategoryButton>
                 </a>
             </Link>

src/pages/settings/panes/MyBots.tsx

@@ -521,12 +521,12 @@ export const MyBots = observer(() => {
                 <Text id="app.settings.pages.bots.create_bot" />
             </CategoryButton>
             <h5>
-                By creating a bot, you are agreeing to the {` `}
+                <Text id="app.settings.pages.bots.usage_policy.a" />{" "}
                 <a
                     href="https://revolt.chat/aup"
                     target="_blank"
                     rel="noreferrer">
-                    Acceptable Usage Policy
+                    <Text id="app.settings.pages.bots.usage_policy.b" />
                 </a>
                 .
             </h5>

src/pages/settings/panes/Profile.tsx

@@ -175,12 +175,12 @@ export const Profile = observer(() => {
             <div className={styles.markdown}>
                 <Markdown size="24" />
                 <h5>
-                    Descriptions support Markdown formatting,{" "}
+                    <Text id="app.settings.tips.markdown.a" />{" "}
                     <a
                         href="https://developers.revolt.chat/markdown"
                         target="_blank"
                         rel="noreferrer">
-                        learn more here
+                        <Text id="app.settings.tips.markdown.b" />
                     </a>
                     .
                 </h5>
@@ -202,9 +202,9 @@ export const Profile = observer(() => {
             <LineDivider />
             <Tip>
                 <span>
-                    Want to change your username?{" "}
+                    <Text id="app.settings.tips.profile.a" />{" "}
                     <a onClick={() => switchPage("account")}>
-                        Head over to your account settings.
+                        <Text id="app.settings.tips.profile.b" />
                     </a>
                 </span>
             </Tip>

src/pages/settings/panes/Sessions.tsx

@@ -238,7 +238,7 @@ export function Sessions() {
                 icon={<LogOut size={24} color={"var(--error)"} />}
                 action={"chevron"}
                 description={
-                    "Logs you out of all sessions except this device."
+                    <Text id="app.settings.pages.sessions.logout_long" />
                 }>
                 <Text id="app.settings.pages.sessions.logout" />
             </CategoryButton>

src/pages/settings/server/Overview.tsx

@@ -96,12 +96,12 @@ export const Overview = observer(({ server }: Props) => {
             <div className={styles.markdown}>
                 <Markdown size="24" />
                 <h5>
-                    Descriptions support Markdown formatting,{" "}
+                    <Text id="app.settings.tips.markdown.a" />{" "}
                     <a
                         href="https://developers.revolt.chat/markdown"
                         target="_blank"
                         rel="noreferrer">
-                        learn more here
+                        <Text id="app.settings.tips.markdown.b" />
                     </a>
                     .
                 </h5>