feat: migrate onboarding to i18n

lumehq · Jan 30, 2024 · 2b19650 · 2b19650
1 parent 2348253
commit 2b19650
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 345 deletions.
diff --git a/apps/desktop/src/routes/auth/login.tsx b/apps/desktop/src/routes/auth/login.tsx
@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 export function LoginScreen() {
@@ -43,12 +43,15 @@ export function LoginScreen() {
 							>
 								{t("login.loginWithPrivkey")}
 							</Link>
-							<p className="text-sm text-center text-neutral-500">
+							<Trans
+								i18nKey="login.footer"
+								className="text-sm text-center text-neutral-500"
+							>
 								Lume will put your Private Key in{" "}
 								<span className="text-teal-600">Secure Storage</span> depended
 								on your OS Platform. It will be secured by Password or Biometric
 								ID
-							</p>
+							</Trans>
 						</div>
 					</div>
 				</div>

diff --git a/apps/desktop/src/routes/error.tsx b/apps/desktop/src/routes/error.tsx
@@ -53,7 +53,7 @@ export function ErrorScreen() {
 	return (
 		<div
 			data-tauri-drag-region
-			className="relative flex h-screen w-screen items-center justify-center bg-blue-600 overflow-hidden rounded-t-xl"
+			className="relative flex h-screen w-screen items-center justify-center bg-blue-500 overflow-hidden rounded-xl"
 		>
 			<div className="flex w-full max-w-2xl flex-col items-start gap-8">
 				<div className="flex flex-col">
@@ -95,7 +95,7 @@ export function ErrorScreen() {
 						<div className="flex w-full flex-col gap-2">
 							<div className="flex w-full items-center justify-between">
 								<div className="text-xl font-semibold text-white">
-									3. Report this issue to Lume&apos;s Devs
+									3. Report this issue to Lume
 								</div>
 								<a
 									href="https://github.com/luminous-devs/lume/issues/new"
@@ -120,29 +120,29 @@ export function ErrorScreen() {
 							</div>
 							<div className="select-text text-lg font-medium text-blue-300">
 								<p>
-									While waiting for Lume&apos;s Devs to release the bug fixes,
-									you always can use other Nostr clients with your account:
+									While waiting for Lume release the bug fixes, you always can
+									use other Nostr clients with your account:
 								</p>
 								<div className="mt-2 flex flex-col gap-1 text-white">
 									<a
 										className="hover:!underline"
-										href="https://snort.social"
+										href="https://snort.social/"
 										target="_blank"
 										rel="noreferrer"
 									>
 										snort.social
 									</a>
 									<a
 										className="hover:!underline"
-										href="https://primal.net"
+										href="https://nostter.app/"
 										target="_blank"
 										rel="noreferrer"
 									>
-										primal.net
+										nostter
 									</a>
 									<a
 										className="hover:!underline"
-										href="https://nostrudel.ninja"
+										href="https://nostrudel.ninja/"
 										target="_blank"
 										rel="noreferrer"
 									>

diff --git a/packages/ui/src/onboarding/finish.tsx b/packages/ui/src/onboarding/finish.tsx
@@ -5,12 +5,14 @@ import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "framer-motion";
 import { useSetAtom } from "jotai";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export function OnboardingFinishScreen() {
 	const storage = useStorage();
 	const queryClient = useQueryClient();
 	const setOnboarding = useSetAtom(onboardingAtom);
 
+	const [t] = useTranslation();
 	const [loading, setLoading] = useState(false);
 
 	const finish = async () => {
@@ -33,9 +35,9 @@ export function OnboardingFinishScreen() {
 		>
 			<CheckIcon className="size-12 text-teal-500" />
 			<div className="text-center">
-				<p className="text-lg font-medium">Profile setup complete!</p>
+				<p className="text-lg font-medium">{t("onboarding.finish.title")}</p>
 				<p className="leading-tight text-neutral-600 dark:text-neutral-400">
-					You can exit the setup here and start using Lume.
+					{t("onboarding.finish.subtitle")}
 				</p>
 			</div>
 			<div className="mt-4 flex flex-col gap-2 items-center">
@@ -44,15 +46,19 @@ export function OnboardingFinishScreen() {
 					onClick={finish}
 					className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
 				>
-					{loading ? <LoaderIcon className="size-4 animate-spin" /> : "Close"}
+					{loading ? (
+						<LoaderIcon className="size-4 animate-spin" />
+					) : (
+						t("global.close")
+					)}
 				</button>
 				<a
 					href="https://github.com/luminous-devs/lume/issues"
 					target="_blank"
 					className="inline-flex items-center justify-center gap-2 w-44 px-5 font-medium h-11 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-700 dark:text-neutral-600"
 					rel="noreferrer"
 				>
-					Report a issue
+					{t("onboarding.finish.report")}
 				</a>
 			</div>
 		</motion.div>