adds donation banner

app/javascript/mastodon/components/dismissable_banner.tsx

@@ -3,6 +3,8 @@ import { useCallback, useState, useEffect } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
+import classNames from 'classnames';
+
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { changeSetting } from 'mastodon/actions/settings';
 import { bannerSettings } from 'mastodon/settings';
@@ -16,6 +18,7 @@ const messages = defineMessages({
 
 interface Props {
   id: string;
+  className?: string;
 }
 
 export function useDismissableBannerState({ id }: Props) {
@@ -53,6 +56,7 @@ export function useDismissableBannerState({ id }: Props) {
 export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
   id,
   children,
+  className,
 }) => {
   const intl = useIntl();
   const { wasDismissed, dismiss } = useDismissableBannerState({
@@ -64,7 +68,7 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
   }
 
   return (
-    <div className='dismissable-banner'>
+    <div className={classNames('dismissable-banner', className)}>
       <div className='dismissable-banner__action'>
         <IconButton
           icon='times'

app/javascript/mastodon/features/donate/banner.tsx

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import type { FC } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import donateBannerImage from '@/images/donation_banner.png';
+import { showDonateModal } from '@/mastodon/actions/donate';
+import { Button } from '@/mastodon/components/button';
+import { DismissableBanner } from '@/mastodon/components/dismissable_banner';
+import {
+  useAppDispatch,
+  useAppSelector,
+} from '@/mastodon/store/typed_functions';
+
+import './styles.scss';
+
+export const DonateBanner: FC = () => {
+  const donationData = useAppSelector((state) => state.donate.apiResponse);
+  const dispatch = useAppDispatch();
+
+  const handleClick = useCallback(() => {
+    dispatch(showDonateModal());
+  }, [dispatch]);
+
+  if (!donationData) {
+    return null;
+  }
+  return (
+    <DismissableBanner
+      id={`donate-${donationData.id}`}
+      className='donate_banner'
+    >
+      <FormattedMessage
+        id='donate.banner.title'
+        defaultMessage='Support Mastodon'
+        tagName='h2'
+      />
+      <p>{donationData.banner_message}</p>
+      <Button text={donationData.banner_button_text} onClick={handleClick} />
+      <img src={donateBannerImage} alt='' role='presentation' />
+    </DismissableBanner>
+  );
+};

app/javascript/mastodon/features/donate/donate_modal.tsx

@@ -14,7 +14,7 @@ import { DonateCheckoutHint } from './checkout';
 import { DonateForm } from './form';
 import { DonateSuccess } from './success';
 
-import './donate_modal.scss';
+import './styles.scss';
 
 interface DonateModalProps {
   onClose: () => void;

app/javascript/mastodon/features/donate/styles.scss

@@ -158,3 +158,63 @@
     }
   }
 }
+
+.donate_banner {
+  background-color: #1b001f;
+  font-size: 15px;
+  line-height: 1.6;
+  border: none;
+
+  h2 {
+    font-weight: 600;
+  }
+
+  p {
+    color: rgb(255, 255, 255, 80%);
+  }
+
+  > button {
+    margin-top: 1rem;
+  }
+
+  img {
+    position: absolute;
+    top: -1rem;
+    width: 400px;
+    right: -200px;
+
+    @media screen and (width <= 600px) {
+      right: -250px;
+    }
+  }
+
+  @media screen and (width <= 350px) {
+    padding-right: 50px;
+
+    img {
+      right: -350px;
+    }
+  }
+
+  .dismissable-banner__action {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    z-index: 10;
+    padding: 0;
+    float: none;
+
+    > button {
+      background-color: #fff;
+      border-radius: 50%;
+      padding: 0.3rem;
+      color: hsla(247deg, 12%, 31%, 100%);
+      transition: background-color 0.2s;
+
+      &:hover,
+      &:focus {
+        background-color: #ddd;
+      }
+    }
+  }
+}

app/javascript/mastodon/features/home_timeline/index.jsx

@@ -27,6 +27,7 @@ import StatusListContainer from '../ui/containers/status_list_container';
 
 import { ColumnSettings } from './components/column_settings';
 import { CriticalUpdateBanner } from './components/critical_update_banner';
+import { DonateBanner } from '../donate/banner';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
@@ -127,7 +128,9 @@ class HomeTimeline extends PureComponent {
     const { intl, hasUnread, columnId, multiColumn, hasAnnouncements, unreadAnnouncements, showAnnouncements, matchesBreakpoint } = this.props;
     const pinned = !!columnId;
     const { signedIn } = this.props.identity;
-    const banners = [];
+    const banners = [
+      <DonateBanner key="donate-banner" />
+    ];
 
     let announcementsButton;