Add Patron badge to header

Author: Ives van Hoorne

src/app/containers/Navigation/index.js

@@ -4,17 +4,17 @@ import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import SearchIcon from 'react-icons/lib/md/search';
-
 import SignInButton from 'app/containers/SignInButton';
 
 import Logo from 'app/components/Logo';
 import Row from 'app/components/flex/Row';
 import Tooltip from 'app/components/Tooltip';
 import HeaderSearchBar from 'app/components/HeaderSearchBar';
 
-import { jwtSelector } from 'app/store/user/selectors';
-import { newSandboxUrl, searchUrl } from 'app/utils/url-generator';
+import { jwtSelector, isPatronSelector } from 'app/store/user/selectors';
+import { newSandboxUrl, patronUrl } from 'app/utils/url-generator';
+// $FlowIssue
+import PatronBadge from '-!svg-react-loader!app/utils/badges/svg/patron-4.svg'; // eslint-disable-line import/no-webpack-loader-syntax
 
 import UserMenu from '../UserMenu';
 
@@ -71,16 +71,18 @@ const PlusIcon = styled(Link)`
 type Props = {
   title: string,
   hasLogin: boolean,
+  isPatron: boolean,
 };
 
 const mapStateToProps = state => ({
   hasLogin: !!jwtSelector(state),
+  isPatron: isPatronSelector(state),
 });
 class Navigation extends React.PureComponent {
   props: Props;
 
   render() {
-    const { title, hasLogin } = this.props;
+    const { title, hasLogin, isPatron } = this.props;
 
     return (
       <Row justifyContent="space-between">
@@ -98,6 +100,14 @@ class Navigation extends React.PureComponent {
             <Action>
               <HeaderSearchBar />
             </Action>
+            {!isPatron &&
+              <Action>
+                <Tooltip position="bottom" title="Become a Patron">
+                  <Link to={patronUrl()}>
+                    <PatronBadge width={40} height={40} />
+                  </Link>
+                </Tooltip>
+              </Action>}
             <Action>
               <Tooltip title="New Sandbox">
                 <PlusIcon to={newSandboxUrl()}>+</PlusIcon>

src/app/containers/UserMenu/UserMenu.js

@@ -72,7 +72,7 @@ export default ({ username, openPreferences, signOut }: Props) =>
       <Item>
         <Icon>
           <PatronBadge style={{ width: 24, margin: '-6px -5px' }} size={24} />
-        </Icon>Become a Patron
+        </Icon>Patron Page
       </Item>
     </Link>
     <Item onClick={signOut}>

src/app/pages/Sandbox/Editor/Content/Header/Action.js

@@ -91,6 +91,8 @@ type Props = {
   moreInfo: ?boolean,
   unresponsive: boolean,
   a: ?boolean,
+  iconProps: Object,
+  iconContainerProps: Object,
 };
 
 export default ({
@@ -104,16 +106,20 @@ export default ({
   moreInfo,
   unresponsive,
   a,
+  iconProps = {},
+  iconContainerProps = {},
+  ...props
 }: Props) => {
   if (!href && (placeholder || tooltip)) {
     return (
       <ActionTooltip
         disabledAction={!onClick}
         title={placeholder || tooltip}
         hideOnClick={false}
+        {...props}
       >
-        <IconContainer onClick={onClick}>
-          <Icon />
+        <IconContainer onClick={onClick} {...iconContainerProps}>
+          <Icon {...iconProps} />
           {title !== undefined &&
             <Title unresponsive={unresponsive}>
               {title}
@@ -125,9 +131,9 @@ export default ({
   }
   if (onClick) {
     return (
-      <Action disabledAction={!onClick} highlight={highlight}>
-        <IconContainer onClick={onClick}>
-          <Icon />
+      <Action disabledAction={!onClick} highlight={highlight} {...props}>
+        <IconContainer onClick={onClick} {...iconContainerProps}>
+          <Icon {...iconProps} />
           {title !== undefined &&
             <Title unresponsive={unresponsive}>
               {title}
@@ -142,8 +148,8 @@ export default ({
     return (
       <ActionA href={href} target="_blank" rel="noopener noreferrer">
         <Tooltip title={placeholder || tooltip}>
-          <IconContainer>
-            <Icon />
+          <IconContainer {...iconContainerProps}>
+            <Icon {...iconProps} />
             {title !== undefined &&
               <Title unresponsive={unresponsive}>
                 {title}
@@ -157,10 +163,10 @@ export default ({
 
   if (href && (placeholder || tooltip)) {
     return (
-      <ActionLink to={href}>
+      <ActionLink to={href} {...props}>
         <Tooltip title={placeholder || tooltip}>
           <IconContainer>
-            <Icon />
+            <Icon {...iconProps} />
             {title !== undefined &&
               <Title unresponsive={unresponsive}>
                 {title}
@@ -173,9 +179,9 @@ export default ({
   }
 
   return (
-    <ActionLink to={href}>
-      <IconContainer>
-        <Icon />
+    <ActionLink to={href} {...props}>
+      <IconContainer {...iconContainerProps}>
+        <Icon {...iconProps} />
         {title !== undefined &&
           <Title unresponsive={unresponsive}>
             {title}

src/app/pages/Sandbox/Editor/Content/Header/index.js

@@ -22,9 +22,12 @@ import {
   searchUrl,
   newSandboxUrl,
   importFromGitHubUrl,
+  patronUrl,
 } from 'app/utils/url-generator';
 import ModeIcons from 'app/components/sandbox/ModeIcons';
 
+// $FlowIssue
+import PatronBadge from '-!svg-react-loader!app/utils/badges/svg/patron-2.svg'; // eslint-disable-line import/no-webpack-loader-syntax
 import Margin from 'app/components/spacing/Margin';
 import HeaderSearchBar from 'app/components/HeaderSearchBar';
 import UserMenu from 'app/containers/UserMenu';
@@ -201,7 +204,7 @@ export default class Header extends React.PureComponent {
         </Left>
 
         <Right>
-          <Media query="(max-width: 1450px)">
+          <Media query="(max-width: 1560px)">
             {matches =>
               matches
                 ? <Action
@@ -214,6 +217,18 @@ export default class Header extends React.PureComponent {
                   </div>}
           </Media>
 
+          {!user ||
+            (!user.subscription &&
+              <Action
+                href={patronUrl()}
+                tooltip="Become a Patron"
+                Icon={PatronBadge}
+                iconProps={{
+                  width: 16,
+                  height: 32,
+                  transform: 'scale(1.5, 1.5)',
+                }}
+              />)}
           <Action
             href="https://twitter.com/CompuIves"
             a
@@ -229,7 +244,6 @@ export default class Header extends React.PureComponent {
             tooltip="Import from GitHub"
             Icon={GithubIcon}
           />
-
           <Action
             href={newSandboxUrl()}
             tooltip="New Sandbox"