update font select

components/FontSelect.js

@@ -1,14 +1,24 @@
 import React from 'react'
 import ListSetting from './ListSetting'
+import ReferralLink from './ReferralLink'
 import { FONTS } from '../lib/constants'
 import { fileToDataURL as blobToUrl } from '../lib/util'
 
 const EXTENSIONS = ['.otf', '.ttf', '.woff']
 
-const Font = ({ id, name }) => (
-  <span style={id === 'upload' ? { textAlign: 'center', width: '100%' } : { fontFamily: id }}>
-    {name}
-  </span>
+const Font = ({ id, name, link }) => (
+  <React.Fragment>
+    <span style={id === 'upload' ? { textAlign: 'center', width: '100%' } : { fontFamily: id }}>
+      {name}
+    </span>
+    {link && (
+      <ReferralLink href={link}>
+        <span style={id === 'upload' ? { textAlign: 'center', width: '100%' } : { fontFamily: id }}>
+          Purchase
+        </span>
+      </ReferralLink>
+    )}
+  </React.Fragment>
 )
 
 function FontSelect(props) {

components/ReferralLink.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { COLORS } from '../lib/constants'
+
+export default function ReferralLink(props) {
+  return (
+    <a {...props} target="_blank" rel="noopener noreferrer">
+      {props.children}
+      <style jsx>
+        {`
+          /* Prod Only */
+          a {
+            display: block;
+            color: ${COLORS.BLACK};
+            background: ${COLORS.PRIMARY};
+            border-radius: 2px;
+            padding: 2px 3px;
+            font-weight: bold;
+            font-size: 10px;
+          }
+        `}
+      </style>
+    </a>
+  )
+}

components/Themes/index.js

@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic'
 import GlobalHighlights from './GlobalHighlights'
 import Dropdown from '../Dropdown'
 import { managePopout } from '../Popout'
+import ReferralLink from '../ReferralLink'
 import ThemeIcon from '../svg/Theme'
 import RemoveIcon from '../svg/Remove'
 import { COLORS } from '../../lib/constants'
@@ -15,6 +16,12 @@ const ThemeCreate = dynamic(() => import('./ThemeCreate'), {
 const ThemeItem = ({ children, item, isSelected, remove }) => (
   <div className="theme-item">
     {children}
+    {/* TODO only show if isSelected */}
+    {item.referral && (
+      <div style={{ margin: `0 ${isSelected ? 8 : 0}px 0 8px` }}>
+        <ReferralLink href={item.referral}>Purchase</ReferralLink>
+      </div>
+    )}
     {item.custom && !isSelected && (
       <div
         role="button"