diff --git a/ghost/portal/src/components/TriggerButton.js b/ghost/portal/src/components/TriggerButton.js
index 35541057c1..afb56fa810 100644
--- a/ghost/portal/src/components/TriggerButton.js
+++ b/ghost/portal/src/components/TriggerButton.js
@@ -3,13 +3,27 @@ import Frame from './Frame';
import MemberGravatar from './common/MemberGravatar';
import AppContext from '../AppContext';
import {ReactComponent as UserIcon} from '../images/icons/user.svg';
+import {ReactComponent as ButtonIcon1} from '../images/icons/button-icon-1.svg';
+import {ReactComponent as ButtonIcon2} from '../images/icons/button-icon-2.svg';
+import {ReactComponent as ButtonIcon3} from '../images/icons/button-icon-3.svg';
+import {ReactComponent as ButtonIcon4} from '../images/icons/button-icon-4.svg';
+import {ReactComponent as ButtonIcon5} from '../images/icons/button-icon-5.svg';
import getContrastColor from '../utils/contrast-color';
const React = require('react');
+const ICON_MAPPING = {
+ 'icon-1': ButtonIcon1,
+ 'icon-2': ButtonIcon2,
+ 'icon-3': ButtonIcon3,
+ 'icon-4': ButtonIcon4,
+ 'icon-5': ButtonIcon5
+};
+
const Styles = ({brandColor, hasText}) => {
const frame = {
...(!hasText ? {width: '60px'} : {})
};
+ const invertColor = getContrastColor(brandColor);
return {
frame: {
zIndex: '2147483000',
@@ -58,7 +72,7 @@ const Styles = ({brandColor, hasText}) => {
userIcon: {
width: '20px',
height: '20px',
- color: '#fff'
+ color: invertColor
},
closeIcon: {
width: '20px',
@@ -127,7 +141,12 @@ class TriggerButtonContent extends React.Component {
);
}
- if (buttonIcon) {
+ if (Object.keys(ICON_MAPPING).includes(buttonIcon)) {
+ const ButtonIcon = ICON_MAPPING[buttonIcon];
+ return (
+
+ );
+ } else if (buttonIcon) {
return (
);
@@ -170,7 +189,7 @@ class TriggerButtonContent extends React.Component {
if (hasText) {
return (
this.onToggle(e)}>
-
+
{this.renderTriggerIcon()}
{this.renderText()}
diff --git a/ghost/portal/src/images/icons/button-icon-1.svg b/ghost/portal/src/images/icons/button-icon-1.svg
new file mode 100644
index 0000000000..1444a4ae45
--- /dev/null
+++ b/ghost/portal/src/images/icons/button-icon-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ghost/portal/src/images/icons/button-icon-2.svg b/ghost/portal/src/images/icons/button-icon-2.svg
new file mode 100644
index 0000000000..daf543d9ae
--- /dev/null
+++ b/ghost/portal/src/images/icons/button-icon-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ghost/portal/src/images/icons/button-icon-3.svg b/ghost/portal/src/images/icons/button-icon-3.svg
new file mode 100644
index 0000000000..fd5188c324
--- /dev/null
+++ b/ghost/portal/src/images/icons/button-icon-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ghost/portal/src/images/icons/button-icon-4.svg b/ghost/portal/src/images/icons/button-icon-4.svg
new file mode 100644
index 0000000000..1cec15ff59
--- /dev/null
+++ b/ghost/portal/src/images/icons/button-icon-4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ghost/portal/src/images/icons/button-icon-5.svg b/ghost/portal/src/images/icons/button-icon-5.svg
new file mode 100644
index 0000000000..74c45f1b59
--- /dev/null
+++ b/ghost/portal/src/images/icons/button-icon-5.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js
index 93a09cd906..106cbd4cea 100644
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@@ -15,7 +15,7 @@ export const site = {
portal_button: true,
portal_name: true,
portal_plans: ['free', 'monthly', 'yearly'],
- portal_button_icon: 'https://raw.githubusercontent.com/TryGhost/members.js/master/src/images/icons/user.svg',
+ portal_button_icon: 'icon-1',
portal_button_signup_text: 'Subscribe Now for free access to everything',
portal_button_style: 'icon-and-text'
};