feat: add encrypted backups card to connect alby account page

getAlby · Nov 14, 2024 · d28a5d8 · d28a5d8
1 parent d577be4
commit d28a5d8
Showing 1 changed file with 18 additions and 12 deletions.
diff --git a/frontend/src/screens/ConnectAlbyAccount.tsx b/frontend/src/screens/ConnectAlbyAccount.tsx
@@ -1,9 +1,9 @@
 import {
   CreditCard,
+  DatabaseBackup,
   Headphones,
   LifeBuoy,
   Mail,
-  PartyPopper,
   Zap,
 } from "lucide-react";
 import Container from "src/components/Container";
@@ -47,10 +47,19 @@ export function ConnectAlbyAccount({ connectUrl }: ConnectAlbyAccountProps) {
               </CardDescription>
             </CardHeader>
           </Card>
+          <Card className="w-full">
+            <CardHeader className="flex flex-col justify-center items-center text-center p-4">
+              <DatabaseBackup className="w-6 h-6" />
+              <CardTitle className="text-sm">Encrypted Backups</CardTitle>
+              <CardDescription className="text-xs">
+                Ensures you can always recover funds from lightning channels
+              </CardDescription>
+            </CardHeader>
+          </Card>
           <Card className="w-full">
             <CardHeader className="flex flex-col justify-center items-center text-center p-4">
               <LifeBuoy className="w-6 h-6" />
-              <CardTitle className="text-sm">Support</CardTitle>
+              <CardTitle className="text-sm">Real Support</CardTitle>
               <CardDescription className="text-xs">
                 Human support via live chat when you need a helping hand
               </CardDescription>
@@ -74,17 +83,14 @@ export function ConnectAlbyAccount({ connectUrl }: ConnectAlbyAccountProps) {
               </CardDescription>
             </CardHeader>
           </Card>
-          <Card className="w-full">
-            <CardHeader className="flex flex-col justify-center items-center text-center p-4">
-              <PartyPopper className="w-6 h-6" />
-              <CardTitle className="text-sm">and there's more...</CardTitle>
-              <CardDescription className="text-xs">
-                Claim your Nostr address, discover apps, etc
-              </CardDescription>
-            </CardHeader>
-          </Card>
         </div>
-        <div className="flex flex-col items-center justify-center mt-8 gap-2">
+        <div className="flex flex-col justify-center items-center text-center p-4 mt-4">
+          <CardTitle className="text-sm">and there's more...</CardTitle>
+          <CardDescription className="text-xs">
+            Claim your Nostr address, discover apps, etc
+          </CardDescription>
+        </div>
+        <div className="flex flex-col items-center justify-center gap-2">
           <LinkButton to={connectUrl || "/alby/auth"} size="lg">
             Connect now
           </LinkButton>