feat: new onboarding (#2989)

* feat: new unlock screen * feat: style changes in unlock screen * chore: hidden image for short screen * feat: choose connector and connector card improvements * feat: refactor connector form improve connector screens * feat: intermediate step for btcpay * chore: styling descriptions * feat: refactor connector form * chore: revert intermediate steps for btcpay * fix: remove obsolete translations --------- Co-authored-by: René Aaron <rene@twentyuno.net> Co-authored-by: René Aaron <100827540+reneaaron@users.noreply.github.com>
getAlby · Feb 19, 2024 · 8e54b47 · 8e54b47
1 parent 8ca45b9
commit 8e54b47
Show file tree

Hide file tree

Showing 37 changed files with 163 additions and 371 deletions.
diff --git a/src/app/components/ConnectorForm/index.tsx b/src/app/components/ConnectorForm/index.tsx
@@ -32,7 +32,7 @@ function ConnectorForm({
     <div className="flex h-full justify-center items-center">
       {video && (
         <div
-          className="flex-1 relative h-0 mb-6"
+          className="flex-1 relative h-0"
           style={{ paddingBottom: "56.25%" }}
         >
           <video className="absolute t-0 l-0 w-full h-full" controls>
@@ -42,7 +42,7 @@ function ConnectorForm({
       )}
       {image && (
         <>
-          <div className="w-full mb-6">
+          <div className="w-96">
             <img
               src={image}
               alt="Screenshot"
@@ -56,8 +56,8 @@ function ConnectorForm({
 
   return (
     <form onSubmit={onSubmit}>
-      <div className="max-w-xl mx-auto mt-6 relative bg-white dark:bg-surface-02dp p-7 shadow rounded-lg">
-        <div className="flex items-center mb-4">
+      <div className="flex flex-col max-w-xl mx-auto mt-6 relative bg-white dark:bg-surface-02dp p-10 rounded-2xl border border-gray-200 dark:border-neutral-700 gap-4">
+        <div className="flex items-center">
           {logo && <img src={logo} className="w-16 mr-4 rounded-lg" />}
           {/*
               TODO: this can be simplified to always wrap the title in h1, without checking if it
@@ -70,28 +70,27 @@ function ConnectorForm({
             title
           )}
         </div>
-        {media}
         {description && (
-          <div className="text-gray-500 dark:text-white whitespace-pre-line">
+          <div className="text-gray-700 dark:text-white whitespace-pre-line">
             {typeof description === "string" ? (
               <p className="mb-6">{description}</p>
             ) : (
               description
             )}
           </div>
         )}
+        {video || (image && media)}
         <div>{children}</div>
-      </div>
-
-      <div className="my-6 flex justify-center">
-        <Button
-          type="submit"
-          label={submitLabel}
-          loading={submitLoading}
-          disabled={submitDisabled}
-          primary
-          className="w-64"
-        />
+        <div className="mt-4 flex justify-center">
+          <Button
+            type="submit"
+            label={submitLabel}
+            loading={submitLoading}
+            disabled={submitDisabled}
+            primary
+            className="w-64"
+          />
+        </div>
       </div>
     </form>
   );

diff --git a/src/app/components/ConnectorPath/index.tsx b/src/app/components/ConnectorPath/index.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 function ConnectorPath({ title, icon, description, content, actions }: Props) {
   return (
-    <div className="flex flex-col p-10 border border-neutral-200 dark:border-neutral-700 rounded-2xl bg-white dark:bg-surface-02dp">
+    <div className="flex flex-col p-10 border border-gray-200 dark:border-neutral-700 rounded-2xl bg-white dark:bg-surface-02dp">
       <div className="flex flex-col sm:flex-row items-center mb-4 space-x-3">
         {icon}
         <h1 className="text-xl font-bold dark:text-white text-center">

diff --git a/src/app/components/LinkButton/index.tsx b/src/app/components/LinkButton/index.tsx
@@ -9,9 +9,9 @@ type Props = {
 export default function LinkButton({ to, title, logo }: Props) {
   return (
     <Link to={to}>
-      <div className="p-10 h-72 border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-surface-02dp text-center overflow-hidden rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 transition duration-200 flex flex-col justify-center space-y-4">
+      <div className="p-10 h-72 border border-gray-200 dark:border-neutral-700 bg-white dark:bg-surface-02dp text-center overflow-hidden rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 transition duration-200 flex flex-col justify-center space-y-4">
         <div>
-          <img src={logo} alt="logo" className="inline rounded-3xl w-32" />
+          <img src={logo} alt="logo" className="inline rounded-3xl w-32 mb-6" />
         </div>
         <div>
           <span className="block dark:text-white text-lg font-medium">

diff --git a/src/app/components/PasswordForm/index.tsx b/src/app/components/PasswordForm/index.tsx
@@ -88,7 +88,7 @@ export default function PasswordForm<
 
   return (
     <>
-      <div className="w-full">
+      <div className="w-full mt-8">
         <TextField
           autoFocus={autoFocus}
           id="password"

diff --git a/src/app/router/Welcome/Welcome.tsx b/src/app/router/Welcome/Welcome.tsx
@@ -3,7 +3,6 @@ import SetPassword from "@screens/Onboard/SetPassword";
 import TestConnection from "@screens/Onboard/TestConnection";
 import ChooseConnector from "@screens/connectors/ChooseConnector";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Outlet, Route, HashRouter as Router, Routes } from "react-router-dom";
 import Container from "~/app/components/Container";
 import LocaleSwitcher from "~/app/components/LocaleSwitcher/LocaleSwitcher";
@@ -54,8 +53,6 @@ function Welcome() {
 }
 
 function Layout() {
-  const { t } = useTranslation();
-
   const [languageChanged, setLanguageChanged] = useState(false);
   i18n.on("languageChanged", () => {
     // Trigger rerender to update displayed language
@@ -70,21 +67,7 @@ function Layout() {
       <div className="flex justify-center items-center">
         <div className="w-full">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8">
-            <div className="text-center font-serif font-medium text-2xl mt-8 dark:text-white">
-              <p>
-                {t("welcome.title")}
-                <img
-                  src="assets/icons/alby_icon_yellow.svg"
-                  alt="Alby"
-                  className="dark:hidden inline align-middle w-6 ml-2"
-                />
-                <img
-                  src="assets/icons/alby_icon_yellow_dark.svg"
-                  alt="Alby"
-                  className="hidden dark:inline align-middle w-6 ml-2"
-                />
-              </p>
-            </div>
+            <div className="text-center font-serif font-medium text-2xl mt-8 dark:text-white"></div>
           </div>
           <Container maxWidth="xl">
             <Outlet />

diff --git a/src/app/router/connectorRoutes.tsx b/src/app/router/connectorRoutes.tsx
@@ -87,6 +87,12 @@ const connectorMap: { [key: string]: ConnectorRoute } = {
     title: i18n.t("translation:choose_connector.lnd.title"),
     logo: lnd,
   },
+  btcpay: {
+    path: "btcpay",
+    element: <ConnectBtcpay />,
+    title: i18n.t("translation:choose_connector.btcpay.title"),
+    logo: btcpay,
+  },
   "mynode-lnd": {
     path: "lnd",
     element: <ConnectMyNode />,
@@ -153,12 +159,6 @@ const connectorMap: { [key: string]: ConnectorRoute } = {
     title: i18n.t("translation:choose_connector.bitcoin_jungle.title"),
     logo: galoyBitcoinJungle,
   },
-  btcpay: {
-    path: "btcpay",
-    element: <ConnectBtcpay />,
-    title: i18n.t("translation:choose_connector.btcpay.title"),
-    logo: btcpay,
-  },
   voltage: {
     path: "voltage",
     element: <ConnectVoltage />,

diff --git a/src/app/screens/Onboard/SetPassword/index.tsx b/src/app/screens/Onboard/SetPassword/index.tsx
@@ -1,5 +1,9 @@
 import Button from "@components/Button";
 import PasswordForm from "@components/PasswordForm";
+import {
+  PopiconsCircleExclamationLine,
+  PopiconsLockOpenLine,
+} from "@popicons/react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -33,48 +37,51 @@ export default function SetPassword() {
   }
 
   const unlockScreenshot = (
-    <img
-      src="assets/images/unlock_passcode.png"
-      alt="Unlock screen"
-      className="h-44"
-    />
+    <img src="assets/images/unlock_passcode.png" alt="Unlock screen" />
   );
 
   return (
     <form onSubmit={handleSubmit}>
-      <div className="max-w-xl shadow-lg rounded-xl mx-auto relative lg:flex lg:space-x-8 bg-white dark:bg-surface-02dp pt-10 pb-10 px-10">
+      <div className="max-w-xl rounded-2xl mx-auto relative lg:flex lg:space-x-8 bg-white dark:bg-surface-02dp pt-10 pb-10 px-10 border border-gray-200 dark:border-gray-700">
         <div>
-          <h1 className="text-2xl font-bold dark:text-white max-sm:text-center">
+          <h1 className="text-2xl font-bold dark:text-white text-center">
             {t("title")}
           </h1>
 
-          <p className="text-gray-500 my-5 dark:text-gray-400">
-            {t("description")}
-          </p>
-          <div className="w-full flex justify-center short:hidden my-5">
+          <div className="w-full flex justify-center my-8 short:hidden">
             {unlockScreenshot}
           </div>
+
+          <div className="flex flex-row text-gray-500 my-4 dark:text-gray-400">
+            <PopiconsLockOpenLine className="w-6 h-6 mr-2"></PopiconsLockOpenLine>
+            {t("description1")}
+          </div>
+          <div className="flex flex-row text-gray-500 my-4 dark:text-gray-400">
+            <PopiconsCircleExclamationLine className="w-6 h-6 mr-2"></PopiconsCircleExclamationLine>
+            {t("description2")}
+          </div>
+
           <div>
             <PasswordForm
               i18nKeyPrefix="welcome.set_password"
               formData={formData}
               setFormData={setFormData}
             />
           </div>
+          <div className="mt-8 flex justify-center">
+            <Button
+              label={tCommon("actions.next")}
+              type="submit"
+              primary
+              disabled={
+                !formData.password ||
+                formData.password !== formData.passwordConfirmation
+              }
+              className="w-64"
+            />
+          </div>
         </div>
       </div>
-      <div className="my-8 flex justify-center">
-        <Button
-          label={tCommon("actions.next")}
-          type="submit"
-          primary
-          disabled={
-            !formData.password ||
-            formData.password !== formData.passwordConfirmation
-          }
-          className="w-64"
-        />
-      </div>
     </form>
   );
 }
diff --git a/src/app/screens/connectors/ChooseConnector/index.tsx b/src/app/screens/connectors/ChooseConnector/index.tsx
@@ -29,7 +29,7 @@ export default function ChooseConnector({
           {connectorRoutes.map(({ path, title, logo }) => (
             <div
               key={path}
-              className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4 px-2"
+              className="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 mb-4 px-2"
             >
               <LinkButton to={path} title={title} logo={logo} />
             </div>

diff --git a/src/app/screens/connectors/ConnectCommando/index.tsx b/src/app/screens/connectors/ConnectCommando/index.tsx
@@ -1,11 +1,15 @@
-import Button from "@components/Button";
+import {
+  CaretDownIcon,
+  CaretUpIcon,
+} from "@bitcoin-design/bitcoin-icons-react/outline";
 import ConnectorForm from "@components/ConnectorForm";
 import TextField from "@components/form/TextField";
 import ConnectionErrorToast from "@components/toasts/ConnectionErrorToast";
 import * as secp256k1 from "@noble/secp256k1";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import Hyperlink from "~/app/components/Hyperlink";
 import PasswordViewAdornment from "~/app/components/PasswordViewAdornment";
 import toast from "~/app/components/Toast";
 import msg from "~/common/lib/msg";
@@ -151,12 +155,22 @@ export default function ConnectCommando() {
           onChange={handleChange}
         />
       </div>
-      <Button
-        onClick={() => {
-          setShowAdvanced(!showAdvanced);
-        }}
-        label={tCommon("advanced")}
-      />
+
+      <div className="text-center">
+        <Hyperlink onClick={() => setShowAdvanced(!showAdvanced)}>
+          {showAdvanced ? (
+            <>
+              {tCommon("hide_advanced")}
+              <CaretUpIcon className="h-4 w-4 inline-flex" />
+            </>
+          ) : (
+            <>
+              {tCommon("advanced")}
+              <CaretDownIcon className="h-4 w-4 inline-flex" />
+            </>
+          )}
+        </Hyperlink>
+      </div>
       {showAdvanced && (
         <div className="mt-6">
           <div className="mb-6">

diff --git a/src/app/screens/connectors/ConnectLnc/index.tsx b/src/app/screens/connectors/ConnectLnc/index.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import PasswordViewAdornment from "~/app/components/PasswordViewAdornment";
 import toast from "~/app/components/Toast";
 import msg from "~/common/lib/msg";
-import logo from "/static/assets/icons/lnd.png";
+import logo from "/static/assets/icons/lightning_terminal.png";
 
 const initialFormData = Object.freeze({
   pairingPhrase: "",

diff --git a/src/i18n/locales/cs/translation.json b/src/i18n/locales/cs/translation.json
@@ -2,7 +2,6 @@
   "translation": {
     "welcome": {
       "set_password": {
-        "title": "Nastavit pin pro odemčení účtu",
         "description": "Tento pin vám umožní odemykat doplněk Alby na tomto zařízení. Nelze ho resetovat, ale je možné ho později změnit.",
         "choose_password": {
           "label": "Zvolte pin pro odemykání:"
@@ -172,13 +171,9 @@
       },
       "btcpay": {
         "title": "BTCPay Server",
-        "page": {
-          "title": "Připojení k vašemu uzlu BTCPay LND",
-          "instructions": "Přesuňte se do svého BTCPayServer a přihlašte se jako administrátor. Běžte do Nastavení serveru > Služby > LND Rest - Více informací. Následně zvolte \"Zobrazit informace o QR kódu\" a zkopírujte zobrazená data. Vložte je níže:"
-        },
+        "page": {},
         "config": {
-          "label": "Konfigurační data",
-          "placeholder": "config=https://vas-btc-pay.org/lnd-config/212121/lnd.config"
+          "label": "Konfigurační data"
         },
         "errors": {
           "connection_failed": "Připojení se nezdařilo. Je BTCPay URL zadána správně a je přístupná?"
@@ -219,10 +214,7 @@
       "title": "Připojte Lightning peněženku",
       "lnc": {
         "title": "Lightning terminál (LNC)",
-        "page": {
-          "title": "Připojit k vašemu LND uzlu",
-          "description": "Vytvořte nové sezení v terminálu (litd) pro získání nové párovací fráze a vložte ji zde"
-        },
+        "page": {},
         "pairing_phrase": {
           "label": "Vaše párovací fráze ",
           "placeholder": "tajná fráze"
@@ -651,7 +643,6 @@
   },
   "common": {
     "password": "Heslo",
-    "advanced": "Pokročilé",
     "success": "Úspěch",
     "error": "Chyba",
     "settings": "Nastavení",