Merge feedback and support dialogs

2 files changed, 21 insertions, 8 deletions

diff --git a/src/app/groups/layout.tsx b/src/app/groups/layout.tsx
index dadd3a1..75128c8 100644
--- a/src/app/groups/layout.tsx
+++ b/src/app/groups/layout.tsx
@@ -1,4 +1,8 @@
-import { FeedbackButton } from '@/components/feedback-button/feedback-button'
+import {
+  FeedbackButton,
+  FeedbackModal,
+} from '@/components/feedback-button/feedback-button'
+import { env } from '@/lib/env'
 import { PropsWithChildren } from 'react'
 
 export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
@@ -7,7 +11,9 @@ export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
       <main className="flex-1 max-w-screen-md w-full mx-auto px-4 py-6 flex flex-col gap-6">
         {children}
       </main>
-      <FeedbackButton />
+      <FeedbackModal donationUrl={env.STRIPE_DONATION_LINK}>
+        <FeedbackButton />
+      </FeedbackModal>
     </>
   )
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 56fed4f..bff432c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,11 @@
-import { DonationButton } from '@/components/donation-button'
+import { FeedbackModal } from '@/components/feedback-button/feedback-button'
 import { ProgressBar } from '@/components/progress-bar'
 import { ThemeProvider } from '@/components/theme-provider'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { Button } from '@/components/ui/button'
 import { Toaster } from '@/components/ui/toaster'
 import { env } from '@/lib/env'
+import { HeartFilledIcon } from '@radix-ui/react-icons'
 import type { Metadata, Viewport } from 'next'
 import PlausibleProvider from 'next-plausible'
 import Image from 'next/image'
@@ -141,13 +142,19 @@ export default function RootLayout({
                     contributors
                   </a>
                 </span>
+                <span>
+                  <FeedbackModal
+                    donationUrl={env.STRIPE_DONATION_LINK}
+                    defaultTab="support"
+                  >
+                    <Button variant="link" className="text-pink-600 -mx-4">
+                      <HeartFilledIcon className="w-4 h-4 mr-2" />
+                      Support us
+                    </Button>
+                  </FeedbackModal>
+                </span>
               </div>
             </div>
-            {env.STRIPE_DONATION_LINK && (
-              <div>
-                <DonationButton donationUrl={env.STRIPE_DONATION_LINK} />
-              </div>
-            )}
           </footer>
           <Toaster />
         </ThemeProvider>