Add Patreon link

src/_locales/en/messages.json

@@ -9,6 +9,9 @@
   "donateWithPaypalLabel": {
     "message": "Donate with PayPal"
   },
+  "donateLabel": {
+    "message": "Donate"
+  },
   "enableOnThisPage": {
     "message": "Enable translation on this page"
   },
@@ -277,6 +280,9 @@
   "informationLabel": {
     "message": "Information"
   },
+  "backersLabel": {
+    "message": "Backers"
+  },
   "licenseLabel": {
     "message": "License"
   },

src/common/personalUrls.js

@@ -4,5 +4,6 @@ const browserName = browserInfo().name;
 const suffix = browserName === "Chrome" ? "fc" : "";
 export const email = `sienori.firefox+st${suffix}@gmail.com`;
 export const paypalLink = `https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&no_shipping=1&business=sienori.firefox@gmail.com&item_name=Simple Translate for ${browserName} - Donation`;
+export const patreonLink = "https://www.patreon.com/sienori";
 export const chromeExtensionUrl = `https://chrome.google.com/webstore/detail/ibplnjkanclpjokhdolnendpplpjiace`;
 export const firefoxAddonUrl = `https://addons.mozilla.org/firefox/addon/simple-translate/`;

src/options/components/InformationPage.js

@@ -3,7 +3,13 @@ import browser from "webextension-polyfill";
 import browserInfo from "browser-info";
 import queryString from "query-string";
 import OptionsContainer from "./OptionContainer";
-import { paypalLink, email, chromeExtensionUrl, firefoxAddonUrl } from "src/common/personalUrls";
+import {
+  paypalLink,
+  patreonLink,
+  email,
+  chromeExtensionUrl,
+  firefoxAddonUrl
+} from "src/common/personalUrls";
 import manifest from "src/manifest-chrome.json";
 
 export default props => {
@@ -24,6 +30,13 @@ export default props => {
             <a href="https://github.com/sienori/simple-translate/releases" target="_blank">
               Version {extensionVersion}
             </a>
+            <span>　</span>
+            <a
+              href="https://github.com/sienori/simple-translate/blob/master/BACKERS.md"
+              target="_blank"
+            >
+              {browser.i18n.getMessage("backersLabel")}
+            </a>
           </p>
         }
       />
@@ -36,13 +49,29 @@ export default props => {
       />
       <hr />
       <OptionsContainer title={"donationLabel"} captions={["donationCaptionLabel"]} type={"none"} />
+      <OptionsContainer
+        title={""}
+        captions={[]}
+        type={"none"}
+        extraCaption={
+          <a href={patreonLink} target="_blank">
+            <img
+              src="https://c5.patreon.com/external/logo/become_a_patron_button.png"
+              alt="Donate"
+            />
+          </a>
+        }
+      />
       <OptionsContainer
         title={""}
         captions={[]}
         type={"none"}
         extraCaption={
           <a href={paypalLink} target="_blank">
-            <img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" alt="Donate" />
+            <img
+              src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/checkout-logo-medium.png"
+              alt="Donate"
+            />
           </a>
         }
       />

src/popup/components/Header.js

@@ -1,15 +1,15 @@
 import React from "react";
 import browser from "webextension-polyfill";
 import openUrl from "src/common/openUrl";
-import { paypalLink } from "src/common/personalUrls";
+import { patreonLink } from "src/common/personalUrls";
 import HeartIcon from "../icons/heart.svg";
 import SettingsIcon from "../icons/settings.svg";
 import Toggle from "react-toggle";
 import "react-toggle/style.css";
 import "../styles/header.scss";
 
-const openPayPal = () => {
+const openPatreon = () => {
-  openUrl(paypalLink);
+  openUrl(patreonLink);
 };
 const openSettings = () => {
   const url = "../options/index.html#settings";
@@ -36,8 +36,8 @@ export default props => (
       </div>
       <button
         className="heartButton"
-        onClick={openPayPal}
+        onClick={openPatreon}
-        title={browser.i18n.getMessage("donateWithPaypalLabel")}
+        title={browser.i18n.getMessage("donateLabel")}
       >
         <HeartIcon />
       </button>