feat: revamp alby account page + change button variants to large

getAlby · Jan 22, 2025 · 4f5c295 · 4f5c295
1 parent d1c5f4b
commit 4f5c295
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 57 deletions.
diff --git a/frontend/src/components/layouts/SettingsLayout.tsx b/frontend/src/components/layouts/SettingsLayout.tsx
@@ -113,7 +113,6 @@ export default function SettingsLayout() {
             )}
             <MenuItem to="/settings/developer">Developer</MenuItem>
             <MenuItem to="/settings/debug-tools">Debug Tools</MenuItem>
-            <MenuItem to="/settings/shutdown">Shutdown</MenuItem>
           </nav>
         </aside>
         <div className="flex-1 lg:max-w-2xl">

diff --git a/frontend/src/screens/BackupMnemonic.tsx b/frontend/src/screens/BackupMnemonic.tsx
@@ -120,7 +120,11 @@ export function BackupMnemonic() {
               />
             </div>
             <div className="flex justify-start">
-              <LoadingButton loading={loading} variant={"secondary"}>
+              <LoadingButton
+                loading={loading}
+                variant={"secondary"}
+                size={"lg"}
+              >
                 View Recovery Phase
               </LoadingButton>
             </div>

diff --git a/frontend/src/screens/settings/AlbyAccount.tsx b/frontend/src/screens/settings/AlbyAccount.tsx
@@ -1,15 +1,9 @@
-import { ExitIcon } from "@radix-ui/react-icons";
-import { ExternalLinkIcon } from "lucide-react";
+import { Link2Off, RefreshCcw, SquareArrowOutUpRight } from "lucide-react";
 
-import ExternalLink from "src/components/ExternalLink";
 import Loading from "src/components/Loading";
 import SettingsHeader from "src/components/SettingsHeader";
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "src/components/ui/card";
+import { Button, ExternalLinkButton } from "src/components/ui/button";
+import { Separator } from "src/components/ui/separator";
 import { UnlinkAlbyAccount } from "src/components/UnlinkAlbyAccount";
 import { useAlbyMe } from "src/hooks/useAlbyMe";
 import { useInfo } from "src/hooks/useInfo";
@@ -26,48 +20,73 @@ export function AlbyAccount() {
     <>
       <SettingsHeader
         title="Alby Account"
-        description="Manage your Alby Account"
+        description="Manage your Alby Account."
       />
-      <ExternalLink
-        to="https://getalby.com/settings"
-        className="w-full flex flex-row items-center gap-2"
-      >
-        <Card className="w-full">
-          <CardHeader>
-            <CardTitle>Your Alby Account</CardTitle>
-            <CardDescription className="flex gap-2 items-center">
-              <ExternalLinkIcon className="w-4 h-4" /> Manage your Alby Account
-              Settings such as your lightning address on getalby.com
-            </CardDescription>
-          </CardHeader>
-        </Card>
-      </ExternalLink>
-      <UnlinkAlbyAccount
-        navigateTo="/alby/auth?force_login=true"
-        successMessage="Please login with another Alby Account"
-      >
-        <Card className="w-full cursor-pointer">
-          <CardHeader>
-            <CardTitle>Change Alby Account</CardTitle>
-            <CardDescription className="flex gap-2 items-center">
-              <ExitIcon className="w-4 h-4" /> Link your Hub to a different Alby
-              Account
-            </CardDescription>
-          </CardHeader>
-        </Card>
-      </UnlinkAlbyAccount>
-
-      <UnlinkAlbyAccount>
-        <Card className="w-full cursor-pointer">
-          <CardHeader>
-            <CardTitle>Disconnect Alby Account</CardTitle>
-            <CardDescription className="flex gap-2 items-center">
-              <ExitIcon className="w-4 h-4" /> Use Alby Hub without an Alby
-              Account
-            </CardDescription>
-          </CardHeader>
-        </Card>
-      </UnlinkAlbyAccount>
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1 text-sm">
+            <h3 className="font-semibold">Manage Alby Account</h3>
+            <p className="text-muted-foreground">
+              Manage your Alby Account settings such as lightning address or
+              notifications on getalby.com
+            </p>
+          </div>
+          <div>
+            <ExternalLinkButton
+              size={"lg"}
+              variant={"secondary"}
+              to="https://getalby.com/settings"
+              className="flex-1 gap-2 items-center justify-center"
+            >
+              Alby Account Settings{" "}
+              <SquareArrowOutUpRight className="w-4 h-4 mr-2" />
+            </ExternalLinkButton>
+          </div>
+        </div>
+        <Separator />
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1 text-sm">
+            <h3 className="font-semibold">Change Alby Account</h3>
+            <p className="text-muted-foreground">
+              Link your Hub to a different Alby Account
+            </p>
+          </div>
+          <div>
+            <UnlinkAlbyAccount
+              navigateTo="/alby/auth?force_login=true"
+              successMessage="Please login with another Alby Account"
+            >
+              <Button
+                size={"lg"}
+                variant={"destructive"}
+                className="flex-1 gap-2 items-center justify-center py-2 px-4"
+              >
+                <RefreshCcw className="w-4 h-4 mr-2" /> Change Alby Account
+              </Button>
+            </UnlinkAlbyAccount>
+          </div>
+        </div>
+        <Separator />
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1 text-sm">
+            <h3 className="font-semibold">Unlink Alby Account</h3>
+            <p className="text-muted-foreground">
+              Use your Alby Hub without an Alby Account.
+            </p>
+          </div>
+          <div>
+            <UnlinkAlbyAccount>
+              <Button
+                size={"lg"}
+                variant={"destructive"}
+                className="flex-1 gap-2 items-center justify-center py-2 px-4"
+              >
+                <Link2Off className="w-4 h-4 mr-2" /> Unlink Alby Account
+              </Button>
+            </UnlinkAlbyAccount>
+          </div>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/frontend/src/screens/settings/Backup.tsx b/frontend/src/screens/settings/Backup.tsx
@@ -148,6 +148,7 @@ export default function Backup() {
               <LoadingButton
                 loading={loading}
                 variant="secondary"
+                size={"lg"}
                 disabled={!unlockPassword}
               >
                 View Recovery Phase
@@ -192,6 +193,7 @@ export default function Backup() {
                             variant="secondary"
                             loading={isMigratingStorage}
                             disabled={info.ldkVssEnabled}
+                            size={"lg"}
                           >
                             {info.ldkVssEnabled
                               ? "Automated Backups Enabled"
@@ -250,7 +252,9 @@ export default function Backup() {
                   stopped.
                 </p>
                 <Link to="/settings/node-backup">
-                  <Button variant="secondary">Migrate Your Alby Hub</Button>
+                  <Button variant="secondary" size={"lg"}>
+                    Migrate Your Alby Hub
+                  </Button>
                 </Link>
               </div>
             )}

diff --git a/frontend/src/screens/settings/DebugTools.tsx b/frontend/src/screens/settings/DebugTools.tsx
@@ -256,7 +256,7 @@ export default function DebugTools() {
     <div>
       <SettingsHeader
         title="Debug Tools"
-        description="Extra tools for debugging purposes"
+        description="Extra tools for debugging purposes."
       />
       <div className="grid mt-6 gap-6 mb-8 lg:mb-8 md:grid-cols-2 xl:grid-cols-3">
         <AlertDialog

diff --git a/frontend/src/screens/settings/DeveloperSettings.tsx b/frontend/src/screens/settings/DeveloperSettings.tsx
@@ -59,7 +59,7 @@ export default function DeveloperSettings() {
     <>
       <SettingsHeader
         title="Developer"
-        description="Power your apps with Alby Hub"
+        description="Power your apps with Alby Hub."
       />
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 text-sm">
@@ -73,7 +73,7 @@ export default function DeveloperSettings() {
         </div>
         <div>
           <ExternalLinkButton
-            size={"sm"}
+            size={"lg"}
             variant={"secondary"}
             to="https://nwc.dev"
             className="flex-1 gap-2 items-center justify-center"
@@ -98,7 +98,7 @@ export default function DeveloperSettings() {
         {!token && !showCreateTokenForm && (
           <div>
             <Button
-              size={"sm"}
+              size={"lg"}
               variant={"secondary"}
               onClick={() => setShowCreateTokenForm(true)}
               className="flex-1"