Added patreon button

src/icons/SocialPatreonIcon.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+function SocialPatreonIcon() {
+  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 SocialPatreonIcon;

src/routes/Home.js

@@ -13,6 +13,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";
 
@@ -59,10 +60,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();