Improve styles of add funds page

web/components/add-funds-button.tsx

@@ -23,8 +23,8 @@ export function AddFundsButton() {
       <input type="checkbox" id="add-funds" className="modal-toggle" />
 
       <div className="modal">
-        <div className="modal-box">
-          <div className="text-lg mb-6">Get Mantic Dollars</div>
+        <div className="modal-box bg-green-50">
+          <div className="text-xl mb-6">Get Mantic Dollars</div>
 
           <div className="text-gray-500 mb-6">
             Use Mantic Dollars to trade in your favorite markets. <br /> (Not
@@ -39,7 +39,9 @@ export function AddFundsButton() {
 
           <div className="mt-6">
             <div className="text-gray-500 text-sm mb-1">Price USD</div>
-            <div>${Math.round(amountSelected / 100)}.00</div>
+            <div className="text-xl">
+              ${Math.round(amountSelected / 100)}.00
+            </div>
           </div>
 
           <div className="modal-action">
@@ -51,7 +53,10 @@ export function AddFundsButton() {
               action={checkoutURL(user?.id || '', amountSelected)}
               method="POST"
             >
-              <button type="submit" className="btn btn-primary">
+              <button
+                type="submit"
+                className="btn btn-primary px-10 font-medium bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
+              >
                 Checkout
               </button>
             </form>

web/pages/add-funds.tsx

@@ -1,10 +1,13 @@
 import { useState } from 'react'
 import { Header } from '../components/header'
+import { Col } from '../components/layout/col'
 import { SEO } from '../components/SEO'
 import { Title } from '../components/title'
 import { FundsSelector } from '../components/yes-no-selector'
 import { useUser } from '../hooks/use-user'
 import { checkoutURL } from '../lib/service/stripe'
+import Image from 'next/image'
+import { Spacer } from '../components/layout/spacer'
 
 export default function AddFundsPage() {
   const user = useUser()
@@ -14,38 +17,56 @@ export default function AddFundsPage() {
   >(500)
 
   return (
-    <div className="max-w-4xl px-4 pb-8 mx-auto">
-      <SEO title="Add funds" description="Add funds" url="/add-funds" />
-      <Header />
+    <div className="w-full h-full min-h-screen bg-green-50">
+      <div className="max-w-4xl px-4 pb-8 mx-auto">
+        <SEO title="Add funds" description="Add funds" url="/add-funds" />
+        <Header />
 
-      <Title text="Get Mantic Dollars" />
+        <Col className="items-center">
+          <Col>
+            <Title text="Get Mantic Dollars" />
 
-      <div className="text-gray-500 mb-6">
-        Use Mantic Dollars to trade in your favorite markets. <br /> (Not
-        redeemable for cash.)
+            <div className="text-gray-500 mb-6">
+              Use Mantic Dollars to trade in your favorite markets. <br /> (Not
+              redeemable for cash.)
+            </div>
+
+            <div className="text-gray-500 text-sm mb-2">Amount</div>
+            <FundsSelector
+              className="max-w-md"
+              selected={amountSelected}
+              onSelect={setAmountSelected}
+            />
+
+            <div className="mt-6">
+              <div className="text-gray-500 text-sm mb-1">Price USD</div>
+              <div className="text-xl">
+                ${Math.round(amountSelected / 100)}.00
+              </div>
+            </div>
+
+            <form
+              action={checkoutURL(user?.id || '', amountSelected)}
+              method="POST"
+              className="mt-12"
+            >
+              <button
+                type="submit"
+                className="btn btn-primary px-16 font-medium bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
+              >
+                Checkout
+              </button>
+            </form>
+          </Col>
+          <Spacer h={4} />
+          <Image
+            className="block mt-6"
+            src="/praying-mantis-light.svg"
+            width={200}
+            height={200}
+          />
+        </Col>
       </div>
-
-      <div className="text-gray-500 text-sm mb-2">Amount</div>
-      <FundsSelector
-        className="max-w-md"
-        selected={amountSelected}
-        onSelect={setAmountSelected}
-      />
-
-      <div className="mt-6">
-        <div className="text-gray-500 text-sm mb-1">Price USD</div>
-        <div>${Math.round(amountSelected / 100)}.00</div>
-      </div>
-
-      <form
-        action={checkoutURL(user?.id || '', amountSelected)}
-        method="POST"
-        className="mt-6"
-      >
-        <button type="submit" className="btn btn-primary">
-          Checkout
-        </button>
-      </form>
     </div>
   )
 }