From e1a4a097cd540337037ee679969209ea27df3d1e Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Sat, 15 Jul 2023 14:49:10 +0800
Subject: [PATCH] feat(alby): add link and work around flex headline issue #632

---
 src/i18n/langs/en.json           |  2 +-
 src/pages/Settings/ActionBox.tsx |  8 +++++---
 src/pages/Settings/index.tsx     | 19 +++++++++++++++++--
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 6cffb22b..d887f493 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -198,7 +198,7 @@
       "debug_report_done": "Debug Report created!",
       "connection_info_error": "Could not get connection info",
       "alby": {
-        "title": "Add LND account to Alby",
+        "title": "Add LND account to <0>Alby</0>",
         "label": "Add account",
         "connection": {
           "hint": "Please install the Alby extension first",
diff --git a/src/pages/Settings/ActionBox.tsx b/src/pages/Settings/ActionBox.tsx
index 3d3925b9..ee8eadcc 100644
--- a/src/pages/Settings/ActionBox.tsx
+++ b/src/pages/Settings/ActionBox.tsx
@@ -1,7 +1,7 @@
-import type { FC } from "react";
+import type { FC, ReactElement } from "react";
 
 export type Props = {
-  name: string;
+  name: string | ReactElement;
   actionName: string;
   action: () => void;
 };
@@ -11,7 +11,9 @@ const ActionBox: FC<Props> = ({ name, action, actionName }) => {
     <div className="box-border w-full transition-colors dark:text-white">
       <article className="relative rounded bg-white p-5 shadow-xl dark:bg-gray-800">
         <div className="flex justify-between">
-          <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">{name}</h4>
+          <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">
+            <span>{name}</span>
+          </h4>
           <button className="bd-button w-1/2 py-1 xl:w-1/3" onClick={action}>
             {actionName}
           </button>
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
index 8d1af7e0..ad26bd66 100644
--- a/src/pages/Settings/index.tsx
+++ b/src/pages/Settings/index.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import ConfirmModal from "../../components/ConfirmModal";
 import useSSE from "../../hooks/use-sse";
 import { enableGutter } from "../../utils";
@@ -124,8 +124,23 @@ const Settings: FC = () => {
           confirmEndpoint="/system/shutdown"
         />
       )}
+
       <ActionBox
-        name={t("settings.alby.title")}
+        name={
+          <Trans
+            i18nKey={"settings.alby.title"}
+            t={t}
+            components={[
+              // eslint-disable-next-line jsx-a11y/anchor-has-content
+              <a
+                className="underline"
+                target="_blank"
+                rel="noreferrer"
+                href="https://getalby.com"
+              ></a>,
+            ]}
+          />
+        }
         actionName={t("settings.alby.label")}
         action={addAlbyAccountHandler}
       />