Add crowdfunding page in Preference

browser/main/modals/PreferencesModal/Crowdfunding.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './Crowdfunding.styl'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+
+const electron = require('electron')
+const { shell, remote } = electron
+
+class Crowdfunding extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      config: this.props.config
+    }
+  }
+
+  handleLinkClick (e) {
+    shell.openExternal(e.currentTarget.href)
+    e.preventDefault()
+  }
+
+  render () {
+    return (
+      <div styleName='root'>
+        <div styleName='header'>Crowdfunding</div>
+        <p>Dear all,</p>
+        <br />
+        <p>Thanks for your using!</p>
+        <p>Boostnote is used in about 200 countries and regions, it is a awesome developer community.</p>
+        <br />
+        <p>To continue supporting this growth, and to satisfy community expectations,</p>
+        <p>we would like to invest more time in this project.</p>
+        <br />
+        <p>If you like this project and see its potential, you can help!</p>
+        <br />
+        <p>Thanks,</p>
+        <p>Boostnote maintainers.</p>
+        <br />
+        <button styleName="cf-link">
+          <a href='https://salt.bountysource.com/teams/boostnote'
+                onClick={(e) => this.handleLinkClick(e)}
+          >Support via Bountysource</a>
+        </button>
+      </div>
+    )
+  }
+}
+
+Crowdfunding.propTypes = {
+}
+
+export default CSSModules(Crowdfunding, styles)

browser/main/modals/PreferencesModal/Crowdfunding.styl

@@ -0,0 +1,30 @@
+@import('./Tab')
+
+.root
+  padding 15px
+  white-space pre
+  line-height 1.4
+  color alpha($ui-text-color, 90%)
+  width 100%
+  font-size 14px
+p
+  font-size 16px
+
+.cf-link
+  width 250px
+  height 35px
+  border-radius 2px
+  border none
+  background-color alpha(#1EC38B, 90%)
+  &:hover
+    background-color #1EC38B
+    transition 0.2s
+  a
+    text-decoration none
+    color white
+    font-weight 600
+    font-size 16px
+
+body[data-theme="dark"]
+  p
+    color $ui-dark-text-color

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -94,7 +94,7 @@ class HotkeyTab extends React.Component {
             </div>
           </div>
           <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Finder(popup)</div>
+            <div styleName='group-section-label'>Toggle Finder (Quick search)</div>
             <div styleName='group-section-control'>
               <input styleName='group-section-control-input'
                 onChange={(e) => this.handleHotkeyChange(e)}

browser/main/modals/PreferencesModal/InfoTab.js

@@ -76,7 +76,7 @@ class InfoTab extends React.Component {
           <li>
             <a href='https://salt.bountysource.com/teams/boostnote'
               onClick={(e) => this.handleLinkClick(e)}
-            >Donate via Bountysource</a> : Thank you for your support 🎉
+            >Crowdfunding</a> : Thank you for your support 🎉
           </li>
           <li>
             <a href='https://github.com/BoostIO/Boostnote/issues'

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -25,7 +25,7 @@ top-bar--height = 50px
   absolute top left right
   top top-bar--height
   left 0
-  width 140px
+  width 170px
   margin-left 10px
   margin-top 20px
   background-color $ui-backgroundColor
@@ -33,7 +33,7 @@ top-bar--height = 50px
 .nav-button
   font-size 14px
   text-align left
-  width 120px
+  width 150px
   margin 5px 0
   padding 7px 0
   padding-left 10px
@@ -56,7 +56,7 @@ top-bar--height = 50px
 .content
   absolute left right bottom
   top top-bar--height
-  left 140px
+  left 170px
   margin-top 10px
   overflow-y auto
 

browser/main/modals/PreferencesModal/index.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import HotkeyTab from './HotkeyTab'
 import UiTab from './UiTab'
 import InfoTab from './InfoTab'
+import Crowdfunding from './Crowdfunding'
 import StoragesTab from './StoragesTab'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
@@ -64,6 +65,13 @@ class Preferences extends React.Component {
             config={config}
           />
         )
+      case 'CROWDFUNDING':
+        return (
+          <Crowdfunding
+            dispatch={dispatch}
+            config={config}
+          />
+        )
       case 'STORAGES':
       default:
         return (
@@ -94,7 +102,8 @@ class Preferences extends React.Component {
       {target: 'STORAGES', label: 'Storages'},
       {target: 'HOTKEY', label: 'Hotkey'},
       {target: 'UI', label: 'UI'},
-      {target: 'INFO', label: 'Info'}
+      {target: 'INFO', label: 'Info'},
+      {target: 'CROWDFUNDING', label: 'Crowdfunding'}
     ]
 
     let navButtons = tabs.map((tab) => {