Replace "invite friends" screen with "support Ferdi" screen

2 files changed, 78 insertions, 5 deletions

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 201819526..2711bc107 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -35,9 +35,9 @@ const messages = defineMessages({
     id: 'settings.navigation.settings',
     defaultMessage: '!!!Settings',
   },
-  inviteFriends: {
-    id: 'settings.navigation.inviteFriends',
-    defaultMessage: '!!!Invite Friends',
+  supportFerdi: {
+    id: 'settings.navigation.supportFerdi',
+    defaultMessage: '!!!Support Ferdi',
   },
   logout: {
     id: 'settings.navigation.logout',
@@ -129,11 +129,11 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {intl.formatMessage(messages.settings)}
         </Link>
         <Link
-          to="/settings/invite"
+          to="/settings/support"
           className="settings-navigation__link"
           activeClassName="is-active"
         >
-          {intl.formatMessage(messages.inviteFriends)}
+          {intl.formatMessage(messages.supportFerdi)}
         </Link>
         <span className="settings-navigation__expander" />
         <Link
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
new file mode 100644
index 000000000..57920a4a2
--- /dev/null
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.supportFerdi.headline',
+    defaultMessage: '!!!Support Ferdi',
+  },
+  title: {
+    id: 'settings.supportFerdi.title',
+    defaultMessage: '!!!Do you like Ferdi? Spread the love!',
+  },
+  github: {
+    id: 'settings.supportFerdi.github',
+    defaultMessage: '!!!Star on GitHub',
+  },
+  share: {
+    id: 'settings.supportFerdi.share',
+    defaultMessage: '!!!Tell your Friends',
+  },
+  openCollective: {
+    id: 'settings.supportFerdi.openCollective',
+    defaultMessage: '!!!Support our Open Collective',
+  },
+});
+
+class SupportFerdiDashboard extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    openLink: PropTypes.func.isRequired,
+  };
+
+  render() {
+    const { openLink } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          <h1>{intl.formatMessage(messages.title)}</h1>
+          <Button
+            label={intl.formatMessage(messages.github)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://github.com/getferdi/ferdi')}
+          />
+          <Button
+            label={intl.formatMessage(messages.share)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://twitter.com/intent/tweet?text=Ferdi%3A%20A%20messaging%20browser%20that%20allows%20you%20to%20combine%20your%20favourite%20messaging%20services%20into%20one%20application.%0A%0ACheck%20out%20Ferdi%20at%20https%3A//getferdi.com')}
+          />
+          <Button
+            label={intl.formatMessage(messages.openCollective)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://opencollective.com/getferdi')}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SupportFerdiDashboard;