Add donate button

sho-87 · Apr 5, 2020 · c31c8cc · c31c8cc
1 parent ef62ac0
commit c31c8cc
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dataVersion": 1,
   "description": "Rise of Kingdoms talent builder",
   "homepage": "https://roktalents.com",
+  "donate": "https://www.buymeacoffee.com/simonho",
   "keywords": [
     "games",
     "Rise of Kingdoms"

diff --git a/src/Modals.js b/src/Modals.js
@@ -30,7 +30,14 @@ import {
   WeiboIcon,
 } from 'react-share';
 
-import { title, author, contributors, bugs, version } from '../package.json';
+import {
+  title,
+  donate,
+  author,
+  contributors,
+  bugs,
+  version,
+} from '../package.json';
 import { getURL } from './utils';
 import './styles/Modals.css';
 
@@ -266,12 +273,8 @@ export class AboutModal extends Component {
                 </a>
               </div>
               <div>
-                <span className="about-label">Support development:</span>{' '}
-                <a
-                  href="https://www.buymeacoffee.com/simonho"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
+                <span className="about-label">Donate:</span>{' '}
+                <a href={donate} target="_blank" rel="noopener noreferrer">
                   <img
                     id="coffee"
                     src="https://cdn.buymeacoffee.com/buttons/default-orange.png"

diff --git a/src/NavBar.js b/src/NavBar.js
@@ -1,16 +1,18 @@
 import React, { Component } from 'react';
 import ReactGA from 'react-ga';
 import MediaQuery from 'react-responsive';
+import Button from 'react-bootstrap/Button';
 import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
 import NavBarButtons from './NavBarButtons';
 import NavBarSettings from './NavBarSettings';
 import NavBarCommander from './NavBarCommander';
+import { GeneralTooltip } from './Tooltips';
 import { AboutModal, ResetModal, ShareModal } from './Modals';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { faInfoCircle, faHeart } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { title } from '../package.json';
+import { title, donate } from '../package.json';
 import './styles/NavBar.css';
 
 /**
@@ -20,6 +22,18 @@ import './styles/NavBar.css';
  * @extends {Component}
  */
 class NavBar extends Component {
+  /**
+   * Handle donate button click
+   *
+   * @memberof NavBar
+   */
+  showDonate = () => {
+    ReactGA.event({
+      category: 'App',
+      action: 'Donate',
+    });
+  };
+
   /**
    * Control visibility of the "About" modal
    *
@@ -29,7 +43,7 @@ class NavBar extends Component {
     this.aboutModalRef.toggle();
     ReactGA.event({
       category: 'App',
-      action: 'View about modal'
+      action: 'View about modal',
     });
   };
 
@@ -51,47 +65,69 @@ class NavBar extends Component {
     this.shareModalRef.toggle();
     ReactGA.event({
       category: 'Share',
-      action: 'View share modal'
+      action: 'View share modal',
     });
   };
 
   render() {
     return (
       <>
         <AboutModal
-          ref={component => (this.aboutModalRef = component)}
+          ref={(component) => (this.aboutModalRef = component)}
           toggleTour={this.props.toggleTour}
           toggleAnnounce={this.props.toggleAnnounce}
         />
         <ResetModal
-          ref={component => (this.resetModalRef = component)}
+          ref={(component) => (this.resetModalRef = component)}
           resetTalents={this.props.resetTalents}
         />
-        <ShareModal ref={component => (this.shareModalRef = component)} />
+        <ShareModal ref={(component) => (this.shareModalRef = component)} />
 
         <Navbar
           variant="light"
           className={this.props.isSpeedMode ? 'nav-speed' : 'navbar'}
         >
-          <Navbar.Brand href="/">
-            <img
-              id="nav-app-icon"
-              src={`${process.env.PUBLIC_URL}/icon.svg`}
-              alt="RoK Talents Logo"
-            ></img>
-          </Navbar.Brand>
+          <MediaQuery minWidth={350}>
+            <Navbar.Brand href="/">
+              <img
+                id="nav-app-icon"
+                src={`${process.env.PUBLIC_URL}/icon.svg`}
+                alt="RoK Talents Logo"
+              ></img>
+            </Navbar.Brand>
+          </MediaQuery>
 
-          <MediaQuery minDeviceWidth={450}>
+          <MediaQuery minWidth={470}>
             <Navbar.Brand href="/">{title}</Navbar.Brand>
           </MediaQuery>
 
-          <Navbar.Brand
-            id="nav-icon"
-            className="mr-auto"
-            style={{ cursor: 'pointer' }}
-            onClick={() => this.showAbout(true)}
-          >
-            <FontAwesomeIcon icon={faInfoCircle} />
+          <Navbar.Brand id="nav-icon" className="mr-auto">
+            <Button
+              id="button-info"
+              data-testid="button-info"
+              variant="outline-dark"
+              size="sm"
+              onClick={() => this.showAbout(true)}
+            >
+              <FontAwesomeIcon icon={faInfoCircle} />
+            </Button>
+
+            <a href={donate} target="_blank" rel="noopener noreferrer">
+              <GeneralTooltip
+                tooltip={`Support ${title} with a small donation`}
+              >
+                <Button
+                  id="button-donate"
+                  data-testid="button-donate"
+                  variant="outline-danger"
+                  size="sm"
+                  onClick={() => this.showDonate()}
+                >
+                  <FontAwesomeIcon icon={faHeart} />
+                  <span className="nav-button-text">Donate</span>
+                </Button>
+              </GeneralTooltip>
+            </a>
           </Navbar.Brand>
 
           <Nav className="ml-auto">

diff --git a/src/NavBarButtons.js b/src/NavBarButtons.js
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import ReactGA from 'react-ga';
+import Button from 'react-bootstrap/Button';
 import Spinner from 'react-bootstrap/Spinner';
 import domtoimage from 'dom-to-image';
 import {
   faTrashAlt,
   faCamera,
-  faShareAlt
+  faShareAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createSummaryString } from './utils';
@@ -16,7 +17,7 @@ import './styles/NavBarButtons.css';
  * Nav bar component containing main buttons
  *
  */
-const NavBarButtons = props => {
+const NavBarButtons = (props) => {
   const [isDownloading, setIsDownloading] = useState(false);
 
   /**
@@ -29,7 +30,7 @@ const NavBarButtons = props => {
     ReactGA.event({
       category: 'App',
       action: 'Screenshot',
-      label: props.commander
+      label: props.commander,
     });
 
     setIsDownloading(true);
@@ -48,10 +49,10 @@ const NavBarButtons = props => {
           transform: 'scale(' + dpr + ')',
           transformOrigin: 'top left',
           width: node.offsetWidth + 'px',
-          height: node.offsetHeight + 'px'
-        }
+          height: node.offsetHeight + 'px',
+        },
       })
-      .then(dataUrl => {
+      .then((dataUrl) => {
         const link = document.createElement('a');
         link.href = dataUrl;
         link.download = `${createSummaryString(
@@ -70,24 +71,24 @@ const NavBarButtons = props => {
 
   return (
     <form className="form-inline">
-      <button
+      <Button
         id="button-reset"
         data-testid="button-reset"
-        type="button"
-        className="btn btn-sm btn-danger"
+        variant="danger"
+        size="sm"
         disabled={props.commander | props.calcPointsSpent() ? false : true}
         onClick={() => props.showReset()}
       >
         <FontAwesomeIcon icon={faTrashAlt} />
         <span className="nav-button-text">Reset</span>
-      </button>
+      </Button>
 
-      <button
+      <Button
         id="button-screenshot"
         data-testid="button-screenshot"
-        type="button"
+        variant="primary"
+        size="sm"
         disabled={props.commander | props.calcPointsSpent() ? false : true}
-        className="btn btn-sm btn-primary"
         onClick={() => {
           const elementID = props.isScreenshotStats
             ? 'main-container'
@@ -101,19 +102,19 @@ const NavBarButtons = props => {
           <FontAwesomeIcon icon={faCamera} />
         )}
         <span className="nav-button-text">Screenshot</span>
-      </button>
+      </Button>
 
-      <button
+      <Button
         id="button-share"
         data-testid="button-share"
-        type="button"
+        variant="success"
+        size="sm"
         disabled={props.commander | props.calcPointsSpent() ? false : true}
-        className="btn btn-sm btn-success"
         onClick={() => props.showShare()}
       >
         <FontAwesomeIcon icon={faShareAlt} />
         <span className="nav-button-text">Share</span>
-      </button>
+      </Button>
     </form>
   );
 };

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -7,6 +7,7 @@
   --bg-color: rgb(14, 50, 71);
   --bg-color-dark: rgb(0, 40, 66);
   --bg-color-light: rgb(16, 75, 109);
+  --bg-color-speed: rgb(225, 237, 243);
   --color-highlight: rgb(236, 95, 0);
   --red: rgba(190, 50, 25, 1);
   --yellow: rgba(183, 156, 4, 1);

diff --git a/src/styles/NavBar.css b/src/styles/NavBar.css
@@ -8,7 +8,7 @@
 }
 
 .nav-speed {
-  background-color: rgb(255, 235, 204);
+  background-color: var(--bg-color-speed);
 }
 
 #nav-app-icon {

diff --git a/src/styles/fonts.css b/src/styles/fonts.css
@@ -33,7 +33,7 @@ h3 {
   font-weight: bold;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 820px) {
   .nav-button-text {
     display: none;
   }