From 26064e6326ade9d7d2f5f4d5a449f1fad7a6b202 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sat, 22 May 2021 15:22:44 -0700
Subject: [PATCH] update font select

---
 components/FontSelect.js   | 18 ++++++++++++++----
 components/ReferralLink.js | 25 +++++++++++++++++++++++++
 components/Themes/index.js |  7 +++++++
 3 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 components/ReferralLink.js

diff --git a/components/FontSelect.js b/components/FontSelect.js
index b54804ad7..aadf28008 100644
--- a/components/FontSelect.js
+++ b/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) {
diff --git a/components/ReferralLink.js b/components/ReferralLink.js
new file mode 100644
index 000000000..063a39ba9
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/Themes/index.js b/components/Themes/index.js
index 8aa5072a2..0eb163458 100644
--- a/components/Themes/index.js
+++ b/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"