add donate

src/content/components/player-badge.js

@@ -1,6 +1,6 @@
 /** @jsx h */
 import { h } from 'dom-chef'
-import vipLevels from '../../shared/vip-levels'
+import vipLevels, { badgeAnimation } from '../../shared/vip-levels'
 
 export default ({ level = 0, role, bgColor, textColor, onClick }) => {
   let description
@@ -19,7 +19,9 @@ export default ({ level = 0, role, bgColor, textColor, onClick }) => {
       break
     }
     default: {
-      description = `Has supported FACEIT Enhancer`
+      description = `Has donated to FACEIT Enhancer${
+        level > 0 ? ` ${level}0\u20AC ` : ' '
+      }to support the development`
     }
   }
 
@@ -37,11 +39,13 @@ export default ({ level = 0, role, bgColor, textColor, onClick }) => {
         textAlign: 'center',
         whiteSpace: 'nowrap',
         verticalAlign: 'baseline',
-        borderRadius: '.25em'
+        borderRadius: '.25em',
+        ...(vipLevels[level].style || {})
       }}
       title={description}
       onClick={onClick}
     >
+      <style>{badgeAnimation}</style>
       FACEIT Enhancer{' '}
       {role || `VIP ${level > 0 ? new Array(level).fill('★').join('') : ''}`}
     </span>

src/popup/app.js

@@ -12,6 +12,7 @@ import VetoPreferences, { VETO_PREFERENCES } from './sections/veto-preferences'
 import Notifications, { NOTIFICATIONS } from './sections/notifications'
 import Help, { HELP } from './sections/help'
 import About, { ABOUT } from './sections/about'
+import Donate, { DONATE } from './sections/donate'
 
 export default class App extends React.Component {
   state = {
@@ -114,6 +115,7 @@ export default class App extends React.Component {
             [VETO_PREFERENCES]: VetoPreferences,
             [NOTIFICATIONS]: Notifications,
             [HELP]: Help,
+            [DONATE]: Donate,
             [ABOUT]: About
           }}
           itemProps={{

src/popup/sections/about.js

@@ -26,8 +26,11 @@ export default () => (
     />
     <ListSubheader divider>Community & Social</ListSubheader>
     <ListItemLink primary="Reddit" secondary="r/FACEITEnhancer" subreddit />
+    <ListItemLink
+      primary="Steam Group"
+      steamCommunity="groups/FACEITEnhancer"
+    />
     <ListItemLink primary="Twitter" href="https://twitter.com/timche_" />
-    <ListItemLink primary="Steam" steamCommunity="groups/FACEITEnhancer" />
     <ListSubheader divider>Team</ListSubheader>
     <ListItemLink primary="azn" secondary="Creator" faceit="azn" />
     <ListItemLink

src/popup/sections/donate.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import ListItem from '@material-ui/core/ListItem'
+import Typography from '@material-ui/core/Typography'
+import ListSubheader from '../components/list-subheader'
+import ListItemLink from '../components/list-item-link'
+import ListItemText from '../components/list-item-text'
+import vipLevels, { badgeAnimation } from '../../shared/vip-levels'
+
+export const DONATE = 'Donate'
+
+const VIPBadge = ({ level, bgColor, textColor, style }) => (
+  <span
+    style={{
+      padding: '2px 4px',
+      fontSize: 10,
+      fontWeight: 'bold',
+      borderRadius: 2,
+      background: bgColor,
+      color: textColor,
+      ...(style || {})
+    }}
+  >
+    <style>{badgeAnimation}</style>
+    FACEIT Enhancer VIP{' '}
+    {level > 0 ? new Array(level).fill(String.fromCharCode(9733)).join('') : ''}
+  </span>
+)
+
+export default () => (
+  <React.Fragment>
+    <ListSubheader>Donate</ListSubheader>
+    <ListItemText primary="FACEIT Enhancer is a free software and will always be. We develop it in our spare time, so donations are appreciated, but will never be asked for." />
+    <ListItemText
+      secondary={
+        'Optional: To appreciate your support, a donation of 3\u00A3 or more can get you an "FACEIT Enhancer VIP" badge displayed in the match room and on your profile.'
+      }
+    />
+    <ListItemText secondary="There are different badges based on the donation amount:" />
+    {Object.keys(vipLevels)
+      .map(Number)
+      .map(vipLevel => (
+        <ListItem style={{ display: 'block' }} key={vipLevel}>
+          <Typography
+            color="textSecondary"
+            variant="caption"
+            style={{ marginBottom: 2 }}
+          >
+            {vipLevel === 0
+              ? 'Basic: 3\u00A3 or more'
+              : `Level ${vipLevel}: ${vipLevel}0\u00A3 or more`}
+          </Typography>
+          <VIPBadge level={vipLevel} {...vipLevels[vipLevel]} />
+        </ListItem>
+      ))}
+    <ListItemText secondary="Please include a link to your FACEIT profile in your donation if you want a badge." />
+    <ListItemLink primary="PayPal.me" href="https://www.paypal.me/timcheung" />
+    <ListItemLink
+      primary="BuyMeACoffee.com"
+      href="https://www.buymeacoffee.com/timche"
+    />
+    <ListItemText secondary="Thanks for your support." />
+    <ListItemText secondary="Disclaimer: Donations are non-refundable. Badges are not guaranteed to exist forever." />
+  </React.Fragment>
+)

src/popup/sections/help.js

@@ -21,7 +21,10 @@ export default () => (
       )}
     />
     <ListSubheader divider>Questions?</ListSubheader>
-    <ListItemLink primary="Ask on Reddit" subreddit="submit?selftext=true" />
-    <ListItemLink primary="Tweet Us" href="https://twitter.com/timche_" />
+    <ListItemLink
+      primary="Ask the Community"
+      subreddit="submit?selftext=true"
+    />
+    <ListItemLink primary="Twitter" href="https://twitter.com/timche_" />
   </React.Fragment>
 )

src/shared/vip-levels.js

@@ -1,26 +1,51 @@
+export const badgeAnimation = `
+  @keyframes faceitEnhancerBadge {
+    0% {
+      background-position: 0% 50%;
+    }
+
+    50% {
+      background-position: 100% 50%;
+    }
+
+    100% {
+      background-position: 0% 50%;
+    }
+  };
+`
+
 export default {
   0: {
-    bgColor: '#607d8b',
+    bgColor: '#878787',
     textColor: '#fff'
   },
   1: {
-    bgColor: '#ffeb3b',
-    textColor: '#000'
+    bgColor:
+      'linear-gradient(90deg, rgba(16,77,108,1) 0%, rgba(0,156,193,1) 100%)',
+    textColor: '#fff'
   },
   2: {
-    bgColor: '#ffc107',
-    textColor: '#000'
+    bgColor:
+      'linear-gradient(90deg, rgba(16,108,53,1) 0%, rgba(0,193,58,1) 100%)',
+    textColor: '#fff'
   },
   3: {
-    bgColor: '#ff9800',
+    bgColor:
+      'linear-gradient(90deg, rgba(134,114,22,1) 0%, rgba(230,193,0,1) 100%)',
     textColor: '#fff'
   },
   4: {
-    bgColor: '#ff5722',
+    bgColor:
+      'linear-gradient(90deg, rgba(108,25,16,1) 0%, rgba(193,25,0,1) 100%)',
     textColor: '#fff'
   },
   5: {
-    bgColor: '#f44336',
-    textColor: '#fff'
+    bgColor:
+      'linear-gradient(-45deg, #ffffa9 0%, #ffd078 16.6%, #ff9c5e 33.2%, #fb635f 49.8%, #e21c72 66.4%, #b0008c 83%, #5300a6 100%)',
+    textColor: '#fff',
+    style: {
+      backgroundSize: '125% 125%',
+      animation: 'faceitEnhancerBadge 6s ease-in-out infinite'
+    }
   }
 }