💄 donate page

bnd2/react/src/pages/donate.js

 import React from 'react'
 import PropTypes from 'prop-types'
+import Button from '@material-ui/core/Button'
 
 export default class Donate extends React.Component {
 
-  openGithub () {
-    window.shell.openExternal(
-      'https://github.com/b3log/baidu-netdisk-downloaderx')
+  openGithub (path) {
+    window.shell.openExternal(path)
   }
 
   render () {
@@ -13,10 +13,53 @@ export default class Donate extends React.Component {
     return (
       <div className={classes.donate}>
         <br/><br/>
-        如果你觉得 <span className={classes.link}
-                    onClick={this.openGithub}>BND2</span> 还不错，欢迎成为我们的赞助者 <br/>
-        <img alt="微信捐赠" className={classes.donateImg} src="wechat-donate.jpg"/>
-        <img alt="支付宝捐赠" className={classes.donateImg} src="alipay-donate.jpg"/>
+        <h2>💜 欢迎成为我们的赞助者</h2>
+        <br/><br/><br/>
+        <span className={classes.link}
+              onClick={this.openGithub.bind(this,
+                'https://b3log.org/')}>B3log 开源组织</span>
+        旗下包含&nbsp;
+        <span className={classes.link}
+              onClick={this.openGithub.bind(this,
+                'https://github.com/b3log/baidu-netdisk-downloaderx')}>BND</span>、
+        <span className={classes.link}
+              onClick={this.openGithub.bind(this,
+                'https://sym.b3log.org/')}>Symphony</span>、
+        <span className={classes.link}
+              onClick={this.openGithub.bind(this,
+                'https://solo.b3log.org/')}>Solo</span>、
+        <span className={classes.link}
+              onClick={this.openGithub.bind(this,
+                'https://github.com/b3log/pipe')}>Pipe</span>、
+        <span className={classes.link}
+              onClick={this.openGithub.bind(this,
+                'https://github.com/b3log/wide')}>Wide</span>、
+        <span className={classes.link}
+              onClick={this.openGithub.bind(this,
+                'https://github.com/b3log/latke')}>Latke</span>、
+        <span className={classes.link}
+              onClick={this.openGithub.bind(this,
+                'https://github.com/b3log/vditor')}>Vditor</span>、
+        <span className={classes.link}
+              onClick={this.openGithub.bind(this,
+                'https://github.com/b3log/gulu')}>Gulu</span>&nbsp;
+        等一系列开源项目。随着项目规模的增长，我们需要有相应的资金支持才能持续项目的维护和开发。
+        <br/><br/><br/><br/>
+        <Button className={classes.ftOriginal}
+                color='primary'
+                onClick={this.openGithub.bind(this,
+                  'https://hacpai.com/sponsor')}
+                variant="contained">
+          <svg viewBox="0 0 32 32" width="100%" height="100%"
+               className={classes.svg}>
+            <path
+              d="M32 21.906v-15.753c0-3.396-2.757-6.152-6.155-6.152h-19.692c-3.396 0-6.152 2.756-6.152 6.152v19.694c0 3.396 2.754 6.152 6.152 6.152h19.694c3.027 0 5.545-2.189 6.058-5.066-1.632-0.707-8.703-3.76-12.388-5.519-2.804 3.397-5.74 5.434-10.166 5.434s-7.38-2.726-7.025-6.062c0.234-2.19 1.736-5.771 8.26-5.157 3.438 0.323 5.012 0.965 7.815 1.89 0.726-1.329 1.329-2.794 1.785-4.35h-12.433v-1.233h6.151v-2.212h-7.503v-1.357h7.504v-3.195c0 0 0.068-0.499 0.62-0.499h3.077v3.692h7.999v1.357h-7.999v2.212h6.526c-0.6 2.442-1.51 4.686-2.651 6.645 1.895 0.686 10.523 3.324 10.523 3.324v0 0 0zM8.859 24.736c-4.677 0-5.417-2.953-5.168-4.187 0.246-1.227 1.6-2.831 4.201-2.831 2.987 0 5.664 0.767 8.876 2.328-2.256 2.94-5.029 4.69-7.908 4.69v0 0z"></path>
+          </svg>
+          &nbsp;
+          使用支付宝进行赞助
+        </Button>
+        {/*<img alt="微信捐赠" className={classes.donateImg} src="wechat-donate.jpg"/>*/}
+        {/*<img alt="支付宝捐赠" className={classes.donateImg} src="alipay-donate.jpg"/>*/}
       </div>
     )
   }

bnd2/react/src/styles/donate.js

@@ -3,10 +3,19 @@ import DEFAULT_FONT from './font'
 export default {
   donate: {
     fontFamily: DEFAULT_FONT,
-    textAlign: 'center'
+    width: '460px',
+    margin: '0 auto',
+  },
+  svg: {
+    fill: 'currentColor',
+    display: 'inline-block',
+    strokeWidth: '0',
+    stroke: 'currentColor',
+    width: '14px',
+    height: '14px',
   },
   donateImg: {
     width: '300px',
-    margin: '14px'
-  }
+    margin: '14px',
+  },
 }
\ No newline at end of file