Merge #722

2 files changed, 132 insertions, 34 deletions

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 6b03f05be..0220731b9 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -40,7 +40,7 @@ const messages = defineMessages({
   },
   supportFerdi: {
     id: 'settings.navigation.supportFerdi',
-    defaultMessage: '!!!Support Ferdi',
+    defaultMessage: '!!!About Ferdi',
   },
   logout: {
     id: 'settings.navigation.logout',
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
index 57920a4a2..f6fc7c171 100644
--- a/src/components/settings/supportFerdi/SupportFerdiDashboard.js
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
@@ -1,29 +1,70 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl';
+import { remote } from 'electron';
+import InfoBar from '../../ui/InfoBar';
 
-import Button from '../../ui/Button';
+const { BrowserWindow } = remote;
 
 const messages = defineMessages({
   headline: {
     id: 'settings.supportFerdi.headline',
-    defaultMessage: '!!!Support Ferdi',
+    defaultMessage: '!!!About Ferdi',
   },
   title: {
     id: 'settings.supportFerdi.title',
-    defaultMessage: '!!!Do you like Ferdi? Spread the love!',
+    defaultMessage: '!!!Do you like Ferdi?',
   },
-  github: {
-    id: 'settings.supportFerdi.github',
-    defaultMessage: '!!!Star on GitHub',
+  aboutIntro: {
+    id: 'settings.supportFerdi.aboutIntro',
+    defaultMessage: '!!!<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>',
   },
-  share: {
-    id: 'settings.supportFerdi.share',
-    defaultMessage: '!!!Tell your Friends',
+  textListContributors: {
+    id: 'settings.supportFerdi.textListContributors',
+    defaultMessage: '!!!Full list of contributor',
   },
-  openCollective: {
-    id: 'settings.supportFerdi.openCollective',
-    defaultMessage: '!!!Support our Open Collective',
+  textListContributorsHere: {
+    id: 'settings.supportFerdi.textListContributorsHere',
+    defaultMessage: '!!!here',
+  },
+  textVolunteers: {
+    id: 'settings.supportFerdi.textVolunteers',
+    defaultMessage: '!!!The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.',
+  },
+  textSupportWelcome: {
+    id: 'settings.supportFerdi.textSupportWelcome',
+    defaultMessage: '!!!Support is always welcome. You can find a list of the help we need',
+  },
+  textSupportWelcomeHere: {
+    id: 'settings.supportFerdi.textSupportWelcomeHere',
+    defaultMessage: '!!!here',
+  },
+  textExpenses: {
+    id: 'settings.supportFerdi.textExpenses',
+    defaultMessage: '!!!While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our',
+  },
+  textOpenCollective: {
+    id: 'settings.supportFerdi.textOpenCollective',
+    defaultMessage: '!!!Open Collective',
+  },
+  textDonation: {
+    id: 'settings.supportFerdi.textDonation',
+    defaultMessage: '!!!If you feel like supporting Ferdi development with a donation, you can do so on both,',
+  },
+  textDonationAnd: {
+    id: 'settings.supportFerdi.textDonationAnd',
+    defaultMessage: '!!!and',
+  },
+  textGitHubSponsors: {
+    id: 'settings.supportFerdi.textGitHubSponsors',
+    defaultMessage: '!!!GitHub Sponsors',
+  },
+  openSurvey: {
+    id: 'settings.supportFerdi.openSurvey',
+    defaultMessage: '!!!Open Survey',
+  },
+  bannerText: {
+    id: 'settings.supportFerdi.bannerText',
+    defaultMessage: '!!!Do you want to help us improve Ferdi?',
   },
 });
 
@@ -32,12 +73,16 @@ class SupportFerdiDashboard extends Component {
     intl: intlShape,
   };
 
-  static propTypes = {
-    openLink: PropTypes.func.isRequired,
-  };
+  openSurveyWindow() {
+    let win = new BrowserWindow({ width: 670, height: 400 });
+    win.on('closed', () => {
+      win = null;
+    });
+
+    win.loadURL('https://rp28.typeform.com/to/E3phJT');
+  }
 
   render() {
-    const { openLink } = this.props;
     const { intl } = this.context;
 
     return (
@@ -49,22 +94,75 @@ class SupportFerdiDashboard extends Component {
         </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>
+            <p className="settings__support-badges">
+              <a href="https://github.com/getferdi/ferdi" target="_blank"><img alt="GitHub Stars" src="https://img.shields.io/github/stars/getferdi/ferdi?style=social" /></a>
+              <a href="https://twitter.com/getferdi/" target="_blank"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social" /></a>
+              <a href="https://opencollective.com/getferdi#section-contributors" target="_blank"><img alt="Open Collective backers" src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective" /></a>
+              <a href="https://opencollective.com/getferdi#section-contributors" target="_blank"><img alt="Open Collective sponsors" src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective" /></a>
+            </p>
+            <FormattedHTMLMessage {...messages.aboutIntro} />
+            <br />
+            <br />
+            <p>
+              <a href="#contributors-via-opencollective">
+                <img alt="GitHub contributors (non-exhaustive)" width="100%" src="https://opencollective.com/getferdi/contributors.svg?width=642&button=false" />
+              </a>
+            </p>
+            <p>
+              {intl.formatMessage(messages.textListContributors)}
+              <a href="https://github.com/getferdi/ferdi#contributors-" target="_blank" className="link">
+                {' '}
+                {intl.formatMessage(messages.textListContributorsHere)}
+                <i className="mdi mdi-open-in-new" />
+              </a>
+              <br />
+              <br />
+            </p>
+            <p>
+              {intl.formatMessage(messages.textVolunteers)}
+            </p>
+            <p>
+              {intl.formatMessage(messages.textSupportWelcome)}
+              <a href="https://help.getferdi.com/general/support" target="_blank" className="link">
+                {' '}
+                {intl.formatMessage(messages.textSupportWelcomeHere)}
+                <i className="mdi mdi-open-in-new" />
+              </a>
+            </p>
+            <p>
+              {intl.formatMessage(messages.textExpenses)}
+              <a href="https://opencollective.com/getferdi#section-budget" target="_blank" className="link">
+                {' '}
+                {intl.formatMessage(messages.textOpenCollective)}
+                <i className="mdi mdi-open-in-new" />
+              </a>
+            </p>
+            <p>
+              {intl.formatMessage(messages.textDonation)}
+              <a href="https://opencollective.com/getferdi#section-contribute" target="_blank" className="link">
+                {' '}
+                {intl.formatMessage(messages.textOpenCollective)}
+                <i className="mdi mdi-open-in-new" />
+              </a>
+              {' '}
+              {intl.formatMessage(messages.textDonationAnd)}
+              <a href="https://github.com/sponsors/getferdi" target="_blank" className="link">
+                {' '}
+                {intl.formatMessage(messages.textGitHubSponsors)}
+                <i className="mdi mdi-open-in-new" />
+              </a>
+            </p>
+          </div>
         </div>
+        <InfoBar
+          sticky
+          type="primary"
+          ctaLabel={intl.formatMessage(messages.openSurvey)}
+          onClick={this.openSurveyWindow}
+        >
+          {intl.formatMessage(messages.bannerText)}
+        </InfoBar>
       </div>
     );
   }