Merge pull request #3006 from metabrainz/donations

Donations part 1

frontend/css/donations.less

@@ -0,0 +1,79 @@
+#donations-page {
+  background: @homepage-background;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: -20px;
+  padding: 3em 2em;
+  position: relative;
+  .donations-page-header {
+    text-align: center;
+    margin-bottom: 2em;
+    color: @white;
+    font-size: 24px;
+  }
+  .donations-page-footer {
+    z-index: 1;
+    position: relative;
+    font-size: 1.5rem;
+  }
+  .grey-wedge {
+    height: 530px;
+    bottom: 0;
+    clip-path: polygon(100% 100%, 100% 18%, 0px 0%, 0% 100%);
+    background: #e9e9e9;
+    position: absolute;
+    left: 0;
+    width: 100%;
+  }
+  .blob {
+    position: absolute;
+    top: 25%;
+    opacity: 70%;
+  }
+}
+
+#donations-tiers {
+  position: relative;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 3em;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5em;
+  align-items: stretch;
+  ul {
+    margin-left: 1.5em;
+  }
+  .tier {
+    padding: 1em;
+    flex: 1;
+    flex-basis: 250px;
+    scale: 1;
+    height: auto;
+    &:hover {
+      scale: 1.1;
+    }
+    background: fadeout(white, 30%);
+    transition: scale 0.2s ease-in-out;
+    // blurred glass effect
+    // background: rgba(255, 255, 255, 0.2);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    &:first-child {
+      flex-basis: 100%;
+      height: auto;
+    }
+  }
+  .tier-heading {
+    text-align: center;
+    margin-bottom: 1.5em;
+  }
+  .perk {
+    margin-bottom: 0.5em;
+  }
+}

frontend/css/donors-page.less

@@ -0,0 +1,136 @@
+.donor-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid #e2e8f0;
+  padding: 1rem;
+  margin: 1.5rem 0;
+  @media (min-width: 640px) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .donor-info {
+    display: flex;
+    margin-bottom: 1rem;
+    flex-direction: column;
+
+    @media (min-width: 640px) {
+      margin-bottom: 0;
+    }
+
+    .donation-user {
+      font-weight: 600;
+      font-size: 1.75rem;
+      margin-bottom: 0.5rem;
+      .donor-name {
+        font-weight: 300 !important;
+        &:hover,
+        &:visited {
+          color: #353070 !important;
+        }
+      }
+    }
+
+    .donation-date {
+      display: flex;
+      color: #6b7280;
+      gap: 10px;
+      align-items: baseline;
+    }
+  }
+
+  .donor-stats {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    .donation-amount {
+      font-weight: 600;
+      font-size: 1.75rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .recent-listens {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+
+      .listen-item {
+        display: flex;
+        align-items: center;
+        color: #6b7280;
+        background-color: #edf2f7;
+        padding: 0.25rem 0.75rem;
+        border-radius: 9999px;
+        gap: 0.5rem;
+        font-weight: 300;
+
+        &:hover,
+        &:visited {
+          color: #6b7280 !important;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    background-color: @table-bg-hover;
+  }
+}
+
+#donors {
+  margin-top: 15px;
+  .donations-page-header {
+    .donation-header-text {
+      position: relative;
+      color: @white;
+      font-size: 16px;
+    }
+    a {
+      color: @black;
+      font-weight: bold;
+      margin-left: 2em;
+      &.btn {
+        border-radius: @border-radius-base;
+      }
+    }
+    opacity: 0.85;
+    border-radius: @border-radius-large;
+    background: @homepage-background;
+    padding: 3em 2em;
+    position: relative;
+    text-align: center;
+    margin-bottom: 2em;
+    overflow: hidden;
+    canvas {
+      position: absolute;
+      opacity: 0.5;
+    }
+  }
+}
+
+.recent-donor-card {
+  gap: 1rem;
+  > div {
+    width: 150px;
+  }
+  .user-link {
+    word-wrap: break-word;
+  }
+  .donor-pinned-recording {
+    display: flex;
+    align-items: center;
+    background: #edf2f7;
+    gap: 0.5rem;
+    margin-left: auto;
+    border-radius: 10px;
+    .text {
+      color: #6b7280;
+      text-wrap: wrap;
+    }
+    svg {
+      color: #353070;
+    }
+  }
+}

frontend/css/homepage.less

@@ -1,5 +1,10 @@
 @dark-grey: #46433a;
 @even-darker-grey: #353070;
+@homepage-background: linear-gradient(
+  288deg,
+  @dark-grey 16.96%,
+  @even-darker-grey 98.91%
+);
 #homepage-container {
   overflow-y: auto;
   height: 100vh; // absolute fallback
@@ -16,11 +21,7 @@
   }
 
   .homepage-upper {
-    background: linear-gradient(
-      288deg,
-      @dark-grey 16.96%,
-      @even-darker-grey 98.91%
-    );
+    background: @homepage-background;
     height: 100%;
     position: relative;
     padding-left: 50px;
@@ -118,11 +119,7 @@
   }
 
   .homepage-lower {
-    background: linear-gradient(
-      288deg,
-      @dark-grey 16.96%,
-      @even-darker-grey 98.91%
-    );
+    background: @homepage-background;
     height: 100%;
     position: relative;
     padding-left: 50px;

frontend/css/main.less

@@ -38,6 +38,8 @@
 @import "release-card.less";
 @import "search.less";
 @import "accordion.less";
+@import "donors-page.less";
+@import "donations.less";
 @import "scroll-container.less";
 
 @icon-font-path: "/static/fonts/";

frontend/js/src/about/About.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 
 export default function About() {
   return (
@@ -87,8 +88,7 @@ export default function About() {
       <p>
         Listenbrainz is a free open source project that is not run for profit.
         If you would like to help the project out financially, consider{" "}
-        <a href="https://metabrainz.org/donate">donating</a> to the MetaBrainz
-        Foundation.
+        <Link to="/donate/">donating</Link> to the MetaBrainz Foundation.
       </p>
       <h3>Developers</h3>
       <p>