From 569c8dc1b6201f1bdee49bd42fffbc389cdf58a5 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Fri, 12 May 2023 11:16:28 -0500
Subject: [PATCH] simplify backup header on mobile

---
 src/components/OnboardWarning.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/OnboardWarning.tsx b/src/components/OnboardWarning.tsx
index 2b71418..504ee77 100644
--- a/src/components/OnboardWarning.tsx
+++ b/src/components/OnboardWarning.tsx
@@ -45,14 +45,16 @@ export function OnboardWarning() {
                     <div class="self-center">
                         <img src={save} alt="backup" class="w-8 h-8" />
                     </div>
-                    <div class='flex md:flex-row flex-col items-center gap-4'>
+                    <div class='flex flex-row max-md:items-center justify-between gap-4'>
                         <div class="flex flex-col">
                             <SmallHeader>Secure your funds</SmallHeader>
-                            <p class="text-base font-light">
+                            <p class="text-base font-light max-md:hidden">
                                 You have money stored in this browser. Let's make sure you have a backup.
                             </p>
                         </div>
-                        <ButtonLink intent="blue" layout="xs" class="self-start md:self-auto" href="/backup">Backup</ButtonLink>
+                        <div class="flex items-center">
+                            <ButtonLink intent="blue" layout="xs" class="self-auto" href="/backup">Backup</ButtonLink>
+                        </div>
                     </div>
                     <button tabindex="-1" onClick={() => { setDismissedBackup(true) }} class="self-center hover:bg-white/10 rounded-lg active:bg-m-blue w-8">
                         <img src={close} alt="Close" />