move claim button

web/pages/link/[slug].tsx

@@ -38,45 +38,47 @@ export default function ClaimPage() {
       <div className="mx-auto max-w-xl px-2">
         <Row className="items-center justify-between">
           <Title text={`Claim M$${manalink.amount} mana`} />
-          <div className="my-auto">
+          <div className="my-auto"></div>
-            <Button
-              onClick={async () => {
-                setClaiming(true)
-                try {
-                  if (user == null) {
-                    await firebaseLogin()
-                    setClaiming(false)
-                    return
-                  }
-                  if (user?.id == manalink.fromId) {
-                    throw new Error("You can't claim your own manalink.")
-                  }
-                  await claimManalink({ slug: manalink.slug })
-                  user && router.push(`/${user.username}?claimed-mana=yes`)
-                } catch (e) {
-                  console.log(e)
-                  const message =
-                    e && e instanceof Object
-                      ? e.toString()
-                      : 'An error occurred.'
-                  setError(message)
-                }
-                setClaiming(false)
-              }}
-              disabled={claiming}
-              size="lg"
-            >
-              {user ? 'Claim' : 'Login'}
-            </Button>
-          </div>
         </Row>
+
         <ManalinkCard info={info} />
+
         {error && (
           <section className="my-5 text-red-500">
             <p>Failed to claim manalink.</p>
             <p>{error}</p>
           </section>
         )}
+
+        <Row className="items-center">
+          <Button
+            onClick={async () => {
+              setClaiming(true)
+              try {
+                if (user == null) {
+                  await firebaseLogin()
+                  setClaiming(false)
+                  return
+                }
+                if (user?.id == manalink.fromId) {
+                  throw new Error("You can't claim your own manalink.")
+                }
+                await claimManalink({ slug: manalink.slug })
+                user && router.push(`/${user.username}?claimed-mana=yes`)
+              } catch (e) {
+                console.log(e)
+                const message =
+                  e && e instanceof Object ? e.toString() : 'An error occurred.'
+                setError(message)
+              }
+              setClaiming(false)
+            }}
+            disabled={claiming}
+            size="lg"
+          >
+            {user ? `Claim M$${manalink.amount}` : 'Login to claim'}
+          </Button>
+        </Row>
       </div>
     </>
   )