move some components around and add a footer

Author: ChaosExAnima

components/DonateCheckout.tsx renamed to components/donate/DonateCheckout.tsx

@@ -4,11 +4,12 @@ import Link from "next/link"
 import { ChangeEvent, FormEvent, useCallback, useState } from "react"
 import { FormattedMessage } from "react-intl"
 
-import LoadingIcon from "../public/icons/loading.svg?inline"
-import ArrowLeftIcon from "../public/ui/arrow-left.svg?inline"
+import LoadingIcon from "../../public/icons/loading.svg?inline"
+import ArrowLeftIcon from "../../public/ui/arrow-left.svg?inline"
 
-import { Button } from "./Button"
-import { Input } from "./Input"
+import { Button } from "../Button"
+import { Input } from "../Input"
+import { DonateFooter } from "./DonateFooter"
 
 interface DonateCheckoutProps {
   backUrl?: string
@@ -173,6 +174,7 @@ export function DonateCheckout({
           )}
         </Button>
       </div>
+      <DonateFooter />
     </form>
   )
 }

components/donate/DonateFooter.tsx

@@ -0,0 +1,15 @@
+import { FormattedMessage } from "react-intl"
+
+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" />
+      <FormattedMessage
+        id="donate_widget.footer"
+        defaultMessage="Donations go to Mastodon gGmbH"
+      />
+    </footer>
+  )
+}

components/DonateWidget.tsx renamed to components/donate/DonateWidget.tsx

@@ -8,15 +8,15 @@ import {
 } from "react-intl"
 import { Select } from "@headlessui/react"
 
-import CheckIcon from "../public/icons/check.svg?inline"
-import { Button } from "./Button"
-
+import CheckIcon from "../../public/icons/check.svg?inline"
 import type {
   Currency,
   CampaignResponse,
   DonationFrequency,
-} from "../types/api"
-import { Input } from "./Input"
+} from "../../types/api"
+import { Button } from "../Button"
+import { Input } from "../Input"
+import { DonateFooter } from "./DonateFooter"
 
 export type OnDonateFn = (
   amount: number,
@@ -239,6 +239,8 @@ export function DonateWidget({
           ? intl.formatMessage(messages.loadingCheckout)
           : donation_button_text}
       </Button>
+
+      <DonateFooter />
     </div>
   )
 }

donate/DonatePopup.tsx

@@ -77,7 +77,7 @@ export function DonatePopup({
         <DialogBackdrop className="fixed inset-0 bg-black/30" />
         <div
           className={classNames(
-            "fixed inset-0 flex w-screen items-end sm:items-center justify-center z-10",
+            "fixed inset-0 flex w-screen items-end sm:items-center justify-center z-20",
             "transition-transform"
           )}
         >
@@ -92,14 +92,14 @@ export function DonatePopup({
               className={classNames(
                 "w-full transition-transform",
                 currentStep === "loading" && "hidden",
-                currentStep === "choose" && "h-[28rem]",
+                currentStep === "choose" && "h-[30rem]",
                 currentStep === "checkout" && "h-[40rem]",
-                currentStep === "complete" && "h-[28rem]"
+                currentStep === "complete" && "h-[30rem]"
               )}
               ref={iframeRef}
             ></iframe>
             {currentStep === "loading" && (
-              <p className="flex gap-2 items-center justify-center text-gray-2 p-4 h-[28rem]">
+              <p className="flex gap-2 items-center justify-center text-gray-2 p-4 h-[30rem]">
                 <LoadingIcon className="motion-safe:animate-spin size-5" />
                 <FormattedMessage
                   id="donate_widget.loading"

pages/donate/checkout.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useMemo } from "react"
 import { z } from "zod"
 
-import { DonateCheckout } from "../../components/DonateCheckout"
+import { DonateCheckout } from "../../components/donate/DonateCheckout"
 import { sendMessage } from "../../donate/utils"
 import { CURRENCIES, DONATION_FREQUENCIES } from "../../types/api"
 

pages/donate/index.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation"
 import { useCallback, useEffect } from "react"
 import { z } from "zod"
 
-import { OnDonateFn, DonateWidget } from "../../components/DonateWidget"
+import { OnDonateFn, DonateWidget } from "../../components/donate/DonateWidget"
 import { sendMessage, themeSchema } from "../../donate/utils"
 import {
   CampaignResponse,