From caa82e15a3d5bc2c5eb3e9f3b710b90278d65281 Mon Sep 17 00:00:00 2001
From: Isra <byzkk@protonmail.com>
Date: Tue, 9 Jan 2024 21:14:03 -0600
Subject: [PATCH] Instructions

---
 src/assets/locales/en.json                   |  4 ++--
 src/pages/parts/settings/ConnectionsPart.tsx | 11 ++++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 9329ec0e..425f6c32 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -393,14 +393,14 @@
     },
     "connections": {
       "server": {
-        "description": "If you would like to connect to a custom backend to store your data, enable this and provide the URL.",
+        "description": "If you would like to connect to a custom backend to store your data, enable this and provide the URL. <0>Instructions.</0>",
         "label": "Custom server",
         "urlLabel": "Custom server URL"
       },
       "title": "Connections",
       "workers": {
         "addButton": "Add new worker",
-        "description": "To make the application function, all traffic is routed through proxies. Enable this if you want to bring your own workers.",
+        "description": "To make the application function, all traffic is routed through proxies. Enable this if you want to bring your own workers. <0>Instructions.</0>",
         "emptyState": "No workers yet, add one below",
         "label": "Use custom proxy workers",
         "urlLabel": "Worker URLs",
diff --git a/src/pages/parts/settings/ConnectionsPart.tsx b/src/pages/parts/settings/ConnectionsPart.tsx
index 007a6220..11aa8171 100644
--- a/src/pages/parts/settings/ConnectionsPart.tsx
+++ b/src/pages/parts/settings/ConnectionsPart.tsx
@@ -1,10 +1,11 @@
 import { Dispatch, SetStateAction, useCallback } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { Button } from "@/components/buttons/Button";
 import { Toggle } from "@/components/buttons/Toggle";
 import { Icon, Icons } from "@/components/Icon";
 import { SettingsCard } from "@/components/layout/SettingsCard";
+import { MwLink } from "@/components/text/Link";
 import { AuthInputBox } from "@/components/text-inputs/AuthInputBox";
 import { Divider } from "@/components/utils/Divider";
 import { Heading1 } from "@/components/utils/Text";
@@ -52,7 +53,9 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
             {t("settings.connections.workers.label")}
           </p>
           <p className="max-w-[20rem] font-medium">
-            {t("settings.connections.workers.description")}
+            <Trans i18nKey="settings.connections.workers.description">
+              <MwLink to="https://google.com">Google</MwLink>
+            </Trans>
           </p>
         </div>
         <div>
@@ -118,7 +121,9 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
             {t("settings.connections.server.label")}
           </p>
           <p className="max-w-[20rem] font-medium">
-            {t("settings.connections.server.description")}
+            <Trans i18nKey="settings.connections.server.description">
+              <MwLink to="https://google.com">Google</MwLink>
+            </Trans>
           </p>
         </div>
         <div>