I18n'ise hardcoded strings

public/locales/en-GB/app.json

@@ -24,6 +24,7 @@
   },
   "application_opened_another_tab": "This application has been opened in another tab.",
   "browser_media_e2ee_unsupported": "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117",
+  "browser_media_e2ee_unsupported_heading": "Incompatible Browser",
   "call_ended_view": {
     "body": "You were disconnected from the call",
     "create_account_button": "Create account",
@@ -37,12 +38,14 @@
   },
   "call_name": "Name of call",
   "common": {
+    "analytics": "Analytics",
     "audio": "Audio",
     "avatar": "Avatar",
     "camera": "Camera",
     "copied": "Copied!",
     "display_name": "Display name",
     "encrypted": "Encrypted",
+    "error": "Error",
     "home": "Home",
     "loading": "Loading…",
     "microphone": "Microphone",
@@ -79,8 +82,11 @@
     "leave_button": "Back to recents"
   },
   "local_volume_label": "Local volume",
+  "log_in": "Log In",
   "logging_in": "Logging in…",
   "login_auth_links": "<0>Create an account</0> Or <2>Access as a guest</2>",
+  "login_auth_links_prompt": "Not registered yet?",
+  "login_subheading": "To continue to Element",
   "login_title": "Login",
   "microphone_off": "Microphone off",
   "microphone_on": "Microphone on",
@@ -105,6 +111,7 @@
   },
   "register_auth_links": "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>",
   "register_confirm_password_label": "Confirm password",
+  "register_heading": "Create your account",
   "return_home_button": "Return to home screen",
   "room_auth_view_eula_caption": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "room_auth_view_join_button": "Join call now",

src/FullScreenView.tsx

@@ -71,7 +71,7 @@ export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
 
   return (
     <FullScreenView>
-      <h1>Error</h1>
+      <h1>{t("common.error")}</h1>
       <p>
         {error instanceof TranslatedError
           ? error.translatedMessage

src/UserMenu.tsx

@@ -96,7 +96,7 @@ export const UserMenu: FC<Props> = ({
   if (!isAuthenticated) {
     return (
       <LinkButton to={{ pathname: "/login", state: { from: location } }}>
-        Log in
+        {t("log_in")}
       </LinkButton>
     );
   }

src/auth/LoginPage.tsx

@@ -90,8 +90,8 @@ export const LoginPage: FC = () => {
           <div className={styles.formContainer}>
             <Logo width="auto" height="auto" className={styles.logo} />
 
-            <h2>Log In</h2>
-            <h4>To continue to Element</h4>
+            <h2>{t("log_in")}</h2>
+            <h4>{t("login_subheading")}</h4>
             <form onSubmit={onSubmitLoginForm}>
               <FieldRow>
                 <InputField
@@ -132,7 +132,7 @@ export const LoginPage: FC = () => {
             </form>
           </div>
           <div className={styles.authLinks}>
-            <p>Not registered yet?</p>
+            <p>{t("login_auth_links_prompt")}</p>
             <p>
               <Trans i18nKey="login_auth_links">
                 <Link to="/register">Create an account</Link>

src/auth/RegisterPage.tsx

@@ -166,7 +166,7 @@ export const RegisterPage: FC = () => {
         <div className={styles.content}>
           <div className={styles.formContainer}>
             <Logo width="auto" height="auto" className={styles.logo} />
-            <h2>Create your account</h2>
+            <h2>{t("register_heading")}</h2>
             <form onSubmit={onSubmitRegisterForm}>
               <FieldRow>
                 <InputField

src/room/GroupCallView.tsx

@@ -302,7 +302,7 @@ export const GroupCallView: FC<Props> = ({
   } else if (!isE2EESupported() && isRoomE2EE) {
     return (
       <FullScreenView>
-        <Heading>Incompatible Browser</Heading>
+        <Heading>{t("browser_media_e2ee_unsupported_heading")}</Heading>
         <Text>{t("browser_media_e2ee_unsupported")}</Text>
         <Link href="/" onClick={onHomeClick}>
           {t("common.home")}

src/settings/SettingsModal.tsx

@@ -186,8 +186,12 @@ export const SettingsModal: FC<Props> = (props) => {
         </>
       }
     >
-      <h4>Developer</h4>
-      <p>Version: {(import.meta.env.VITE_APP_VERSION as string) || "dev"}</p>
+      <h4>{t("settings.developer_tab_title")}</h4>
+      <p>
+        {t("version", {
+          version: import.meta.env.VITE_APP_VERSION || "dev",
+        })}
+      </p>
       <FieldRow>
         <InputField
           id="developerSettingsTab"
@@ -200,7 +204,7 @@ export const SettingsModal: FC<Props> = (props) => {
           }
         />
       </FieldRow>
-      <h4>Analytics</h4>
+      <h4>{t("common.analytics")}</h4>
       <FieldRow>
         <InputField
           id="optInAnalytics"