Donation tiers: tweak headers and add prefilled amount to donate url

The ?amount=... param was added to the MeB.org donation page in metabrainz/metabrainz.org#483
metabrainz · Oct 14, 2024 · ec9a1fe · ec9a1fe
1 parent e75dc15
commit ec9a1fe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/frontend/css/donations.less b/frontend/css/donations.less
@@ -70,10 +70,7 @@
   }
   .tier-heading {
     text-align: center;
-    min-height: 150px;
-    margin-bottom: 1em;
-    padding-bottom: 1em;
-    border-bottom: 1px solid @gray;
+    margin-bottom: 1.5em;
   }
   .perk {
     margin-bottom: 0.5em;

diff --git a/frontend/js/src/about/donations/Donate.tsx b/frontend/js/src/about/donations/Donate.tsx
@@ -41,9 +41,12 @@ export default function Donate() {
               <h2>
                 <button
                   type="button"
-                  className="btn btn-primary"
+                  className="btn btn-success btn-lg btn-rounded"
                   onClick={() =>
-                    window.open("https://metabrainz.org/donate", "_blank")
+                    window.open(
+                      "https://metabrainz.org/donate?amount=5",
+                      "_blank"
+                    )
                   }
                 >
                   Donate $5
@@ -78,9 +81,12 @@ export default function Donate() {
               <h2>
                 <button
                   type="button"
-                  className="btn btn-primary"
+                  className="btn btn-success btn-lg btn-rounded"
                   onClick={() =>
-                    window.open("https://metabrainz.org/donate", "_blank")
+                    window.open(
+                      "https://metabrainz.org/donate?amount=20",
+                      "_blank"
+                    )
                   }
                 >
                   Donate $20
@@ -123,9 +129,12 @@ export default function Donate() {
               <h2>
                 <button
                   type="button"
-                  className="btn btn-primary"
+                  className="btn btn-success btn-lg btn-rounded"
                   onClick={() =>
-                    window.open("https://metabrainz.org/donate", "_blank")
+                    window.open(
+                      "https://metabrainz.org/donate?amount=50",
+                      "_blank"
+                    )
                   }
                 >
                   Donate $50