Add temporary floating donate button

owid · Nov 27, 2024 · 817f2ce · 817f2ce
1 parent 192797c
commit 817f2ce
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/site/SiteTools.tsx b/site/SiteTools.tsx
@@ -1,13 +1,15 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import cx from "classnames"
 import { FeedbackPrompt } from "./Feedback.js"
 import { ScrollDirection, useScrollDirection } from "./hooks.js"
 import { NewsletterSubscriptionContext } from "./newsletter.js"
 import {
-    NewsletterSubscription,
+    // NewsletterSubscription,
     NewsletterSubscriptionForm,
 } from "./NewsletterSubscription.js"
-// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import { faHeart } from "@fortawesome/free-solid-svg-icons"
 // import { faHandshake } from "@fortawesome/free-solid-svg-icons"
 
 const SITE_TOOLS_CLASS = "site-tools"
@@ -17,13 +19,21 @@ const SiteTools = () => {
 
     return (
         <div
-            className={`hide-wrapper${
-                (scrollDirection === ScrollDirection.Down && " hide") || ""
-            }`}
+            className={cx("hide-wrapper", {
+                hide: scrollDirection === ScrollDirection.Down,
+            })}
         >
-            <NewsletterSubscription
+            <a
+                className="prompt prompt-donate"
+                data-track-note="page_open_donate"
+                href="/donate"
+            >
+                <FontAwesomeIcon icon={faHeart} />
+                Donate
+            </a>
+            {/* <NewsletterSubscription
                 context={NewsletterSubscriptionContext.Floating}
-            />
+            /> */}
             <FeedbackPrompt />
             {/* <a className="prompt" data-track-note="page_open_jobs" href="/jobs">
                 <FontAwesomeIcon icon={faHandshake} /> Jobs

diff --git a/site/css/site-tools.scss b/site/css/site-tools.scss
@@ -43,5 +43,13 @@
         a.prompt {
             @include popover-box-button;
         }
+
+        a.prompt-donate {
+            background-color: $vermillion;
+
+            &:hover {
+                background-color: $accent-vermillion;
+            }
+        }
     }
 }