update translations

beszel/site/src/components/copy-to-clipboard.tsx

@@ -2,19 +2,19 @@ import { useEffect, useMemo, useRef } from "react"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
 import { Textarea } from "./ui/textarea"
 import { $copyContent } from "@/lib/stores"
+import { useTranslation } from "react-i18next"
 
 export default function CopyToClipboard({ content }: { content: string }) {
+	const { t } = useTranslation()
+
 	return (
 		<Dialog defaultOpen={true}>
-			<DialogContent className="w-[90%] rounded-lg" style={{ maxWidth: 530 }}>
+			<DialogContent className="w-[90%] rounded-lg md:pt-4" style={{ maxWidth: 530 }}>
 				<DialogHeader>
-					<DialogTitle>Could not copy to clipboard</DialogTitle>
-					<DialogDescription>Please copy the text manually.</DialogDescription>
+					<DialogTitle>{t("clipboard.title")}</DialogTitle>
+					<DialogDescription className="hidden xs:block">{t("clipboard.des")}</DialogDescription>
 				</DialogHeader>
 				<CopyTextarea content={content} />
-				<p className="text-sm text-muted-foreground">
-					Clipboard API requires a secure context (https, localhost, or *.localhost)
-				</p>
 			</DialogContent>
 		</Dialog>
 	)

beszel/site/src/components/navbar.tsx

@@ -28,6 +28,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { AddSystemButton } from "./add-system"
 import { useTranslation } from "react-i18next"
+import { TFunction } from "i18next"
 
 const CommandPalette = lazy(() => import("./command-palette"))
 
@@ -38,10 +39,10 @@ export default function Navbar() {
 	return (
 		<div className="flex items-center h-14 md:h-16 bg-card px-4 pr-3 sm:px-6 border bt-0 rounded-md my-4">
 			<Link href="/" aria-label="Home" className={"p-2 pl-0"}>
-				<Logo className="h-[1.15rem] md:h-[1.3em] fill-foreground" />
+				<Logo className="h-[1.15rem] md:h-[1.25em] fill-foreground" />
 			</Link>
 
-			<SearchButton />
+			<SearchButton t={t} />
 
 			<div className={"flex ml-auto items-center"}>
 				<LangToggle />
@@ -111,7 +112,7 @@ export default function Navbar() {
 	)
 }
 
-function SearchButton() {
+function SearchButton({ t }: { t: TFunction<"translation", undefined> }) {
 	const [open, setOpen] = useState(false)
 
 	const Kbd = ({ children }: { children: React.ReactNode }) => (
@@ -129,8 +130,8 @@ function SearchButton() {
 			>
 				<span className="flex items-center">
 					<SearchIcon className="mr-1.5 h-4 w-4" />
-					Search
-					<span className="sr-only">Search</span>
+					{t("search")}
+					<span className="sr-only">{t("search")}</span>
 					<span className="flex items-center ml-3.5">
 						<Kbd>{isMac ? "⌘" : "Ctrl"}</Kbd>
 						<Kbd>K</Kbd>

beszel/site/src/components/routes/home.tsx

@@ -100,10 +100,10 @@ export default function () {
 			)}
 			<Card>
 				<CardHeader className="pb-5 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
-					<div className="grid md:flex gap-3 w-full items-end">
+					<div className="grid md:flex gap-5 w-full items-end">
 						<div className="px-2 sm:px-1">
 							<CardTitle className="mb-2.5">{t("all_systems")}</CardTitle>
-							<CardDescription>{t("home.subtitle_1")}</CardDescription>
+							<CardDescription>{t("home.subtitle")}</CardDescription>
 						</div>
 						<Input
 							placeholder={t("filter")}