feat(alby): add link and work around flex headline issue #632

raspiblitz · Jul 15, 2023 · e1a4a09 · e1a4a09
1 parent 958c5dc
commit e1a4a09
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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}
       />