change footer style to be smaller and grey

Author: ChaosExAnima

components/donate/DonateCheckout.tsx

@@ -9,7 +9,6 @@ import ArrowLeftIcon from "../../public/ui/arrow-left.svg?inline"
 
 import { Button } from "../Button"
 import { Input } from "../Input"
-import { DonateFooter } from "./DonateFooter"
 
 interface DonateCheckoutProps {
   backUrl?: string
@@ -174,7 +173,6 @@ export function DonateCheckout({
           )}
         </Button>
       </div>
-      <DonateFooter />
     </form>
   )
 }

components/donate/DonateFooter.tsx

@@ -4,8 +4,8 @@ import LogoPurple from "../../public/logos/logo-purple.svg?inline"
 
 export function DonateFooter() {
   return (
-    <footer className="flex gap-2 items-center mt-3 text-b3">
-      <LogoPurple className="size-8" />
+    <footer className="flex gap-2 items-center mt-3 text-b4 bg-gray-3 px-8 py-2">
+      <LogoPurple className="size-6" />
       <FormattedMessage
         id="donate_widget.footer"
         defaultMessage="Donations go to Mastodon gGmbH"

components/donate/DonateWidget.tsx

@@ -16,7 +16,6 @@ import type {
 } from "../../types/api"
 import { Button } from "../Button"
 import { Input } from "../Input"
-import { DonateFooter } from "./DonateFooter"
 
 export type OnDonateFn = (
   amount: number,
@@ -239,8 +238,6 @@ export function DonateWidget({
           ? intl.formatMessage(messages.loadingCheckout)
           : donation_button_text}
       </Button>
-
-      <DonateFooter />
     </div>
   )
 }

pages/donate/checkout.tsx

@@ -11,6 +11,7 @@ import { sendMessage } from "../../donate/utils"
 import { CURRENCIES, DONATION_FREQUENCIES } from "../../types/api"
 
 import { themeSchema } from "../../donate/utils"
+import { DonateFooter } from "../../components/donate/DonateFooter"
 
 const primaryColor = "#6364ff"
 const hoverColor = "#563acc"
@@ -79,11 +80,19 @@ export default function DonateCheckoutPage({
         },
       }}
     >
-      <DonateCheckout
-        onComplete={handleDonate}
-        className={classNames(theme, "bg-white dark:bg-black p-8")}
-        backUrl={backUrl}
-      />
+      <div
+        className={classNames(
+          theme,
+          "bg-white dark:bg-black min-h-screen flex flex-col"
+        )}
+      >
+        <DonateCheckout
+          onComplete={handleDonate}
+          className="p-8 pb-2 grow"
+          backUrl={backUrl}
+        />
+        <DonateFooter />
+      </div>
     </CheckoutProvider>
   )
 }

pages/donate/index.tsx

@@ -13,6 +13,7 @@ import {
   DONATION_FREQUENCIES,
 } from "../../types/api"
 import { fetchEndpoint } from "../../utils/api"
+import { DonateFooter } from "../../components/donate/DonateFooter"
 
 export default function DonatePage({
   theme,
@@ -45,16 +46,21 @@ export default function DonatePage({
 
   return (
     <div
-      className={classNames(theme, "bg-white dark:bg-black min-h-screen p-8")}
+      className={classNames(
+        theme,
+        "bg-white dark:bg-black min-h-screen flex flex-col"
+      )}
     >
       <DonateWidget
         defaultCurrency={defaultCurrency ?? default_currency}
+        className="p-8 pb-2 grow"
         messages={{ donation_message, donation_button_text }}
         amounts={amounts}
         onDonate={handleDonate}
         defaultAmount={defaultAmount}
         defaultFrequency={defaultFrequency}
       />
+      <DonateFooter />
     </div>
   )
 }