Added donate on open-collective

PixiEditor · Nov 26, 2024 · 3ff6f98 · 3ff6f98
1 parent 2f5e51a
commit 3ff6f98
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 10 deletions.
diff --git a/website/src/css/donation.css b/website/src/css/donation.css
@@ -82,6 +82,43 @@ h1 {
   margin: 20px 0;
 }
 
+.donate-btn-split {
+  display: flex; 
+  margin-top: 35px;
+  gap: 10px; 
+}
+
+.donate-btn-split a {
+  text-decoration: none; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  height: 50px; 
+  border-radius: 5px; 
+  font-size: 16px; 
+  transition: all 0.3s ease; 
+}
+
+.donate-btn-split-general {
+  flex: 1;
+  background-color: #ff315a; 
+  border: none; 
+}
+
+.donate-btn-split-option {
+  color: white;
+  border: 2px solid #ff315a; 
+  padding: 0 15px;
+  min-width: fit-content; 
+}
+
+.donate-btn-split-option:hover {
+  background-color: #ff315a; 
+  color: white; 
+  border: 2px solid #ff315a; 
+}
+
+
 @media only screen and (max-width: 1024px) {
 .one-time-donate-container {
   flex-direction: column;

diff --git a/website/src/pages/donate.tsx b/website/src/pages/donate.tsx
@@ -10,7 +10,7 @@ const DonateWidget = (props) => {
     setPickedOption(option);
   };
 
-/*<TogglePicker
+  /*<TogglePicker
 label1="Monthly"
 label2="One-time"
 onOptionSelected={optionSelected}
@@ -44,24 +44,36 @@ dangerouslySetInnerHTML={{
 </div>
   
   )}*/
-
 
   return (
     <div className="donate-buttons">
-     <div className="one-time-donate-container">
-    <div>
-      <iframe src="https://store.steampowered.com/widget/2435860/" width="646" height="190"></iframe>
-    </div>
-</div>
+      <div className="one-time-donate-container">
+        <div>
+          <iframe
+            src="https://store.steampowered.com/widget/2435860/"
+            width="646"
+            height="190"
+          ></iframe>
+           <div className="donate-btn-split" style={{ marginTop: 35 }}>
+                <a className="btn-text big donate-btn-split-general" href="https://opencollective.com/pixieditor" target="_blank">
+                  Donate on OpenCollective
+                </a>
+                <a className="donate-btn-split-option" href="https://opencollective.com/pixieditor/contribute/silver-tier-81980/checkout?interval=month&amount=5&contributeAs=me" target="_blank">5$</a>
+                <a className="donate-btn-split-option" href="https://opencollective.com/pixieditor/contribute/gold-tier-81981/checkout?interval=month&amount=10&contributeAs=me" target="_blank">10$</a>
+                <a className="donate-btn-split-option" href="https://opencollective.com/pixieditor/contribute/diamond-tier-81982/checkout?interval=month&amount=25&contributeAs=me" target="_blank">25$</a>
+            </div>
+        </div>
+      </div>
     </div>
   );
 };
 
 class Donate extends React.Component {
-
   componentDidMount(): void {
-
-    if (document.getElementById("stripe-js") || document.getElementById("stripe-js-2")) {
+    if (
+      document.getElementById("stripe-js") ||
+      document.getElementById("stripe-js-2")
+    ) {
       return;
     }