From 351647dd23394ce7f212d6cf0b51b9994f98411a Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Wed, 6 Jan 2021 16:32:27 +1100
Subject: [PATCH] Added patreon button to home page
---
src/icons/SocialPatreonIcon.js | 19 +++++++++++++++++++
src/routes/Home.js | 19 +++++++++++++++++--
2 files changed, 36 insertions(+), 2 deletions(-)
create mode 100644 src/icons/SocialPatreonIcon.js
diff --git a/src/icons/SocialPatreonIcon.js b/src/icons/SocialPatreonIcon.js
new file mode 100644
index 0000000..dd2cc09
--- /dev/null
+++ b/src/icons/SocialPatreonIcon.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+function SocialRedditIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="18"
+ height="15"
+ viewBox="0 0 24 24"
+ fill="currentcolor"
+ style={{ margin: "0 4px" }}
+ >
+ <path d="M10.4711281,0 C7.07263915,0 4.30769231,2.7646696 4.30769231,6.1630697 C4.30769231,9.55120557 7.07263915,12.3076923 10.4711281,12.3076923 C13.8591141,12.3076923 16.6153846,9.55120557 16.6153846,6.1630697 C16.6153846,2.7646696 13.8591141,0 10.4711281,0"></path>
+ <polygon points="0.615384615 16 3.07692308 16 3.07692308 0 0.615384615 0"></polygon>
+ </svg>
+ );
+}
+
+export default SocialRedditIcon;
diff --git a/src/routes/Home.js b/src/routes/Home.js
index 072c04d..6a2589b 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -16,6 +16,7 @@ import RedditIcon from "../icons/SocialRedditIcon";
import TwitterIcon from "../icons/SocialTwitterIcon";
import YouTubeIcon from "../icons/SocialYouTubeIcon";
import DonateIcon from "../icons/DonateIcon";
+import PatreonIcon from "../icons/SocialPatreonIcon";
import owlington from "../images/Owlington.png";
@@ -77,10 +78,25 @@ function Home() {
<Text variant="caption" as="p" sx={{ textAlign: "center" }}>
Beta v{process.env.REACT_APP_VERSION}
</Text>
+ <Button
+ as="a"
+ href="https://patreon.com/owlbearrodeo"
+ mt={4}
+ mx={2}
+ mb={2}
+ sx={{
+ display: "flex",
+ alignItems: "flex-end",
+ justifyContent: "center",
+ }}
+ >
+ Patreon <PatreonIcon />
+ </Button>
<Button
as="a"
href="/donate"
- my={4}
+ mt={2}
+ mb={4}
mx={2}
onClick={(e) => {
e.preventDefault();
@@ -94,7 +110,6 @@ function Home() {
>
Donate <DonateIcon />
</Button>
-
<Flex mb={4} mt={0} sx={{ justifyContent: "center" }}>
<Link href="https://www.reddit.com/r/OwlbearRodeo/">
<IconButton title="Reddit" aria-label="Reddit">