Merge #722

8 files changed, 458 insertions, 83 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>
     );
   }
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 801f68cc0..c0ce026a6 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2262,7 +2262,7 @@
         }
       },
       {
-        "defaultMessage": "!!!Support Ferdi",
+        "defaultMessage": "!!!About Ferdi",
         "end": {
           "column": 3,
           "line": 44
@@ -3480,68 +3480,198 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Support Ferdi",
+        "defaultMessage": "!!!About Ferdi",
         "end": {
           "column": 3,
-          "line": 11
+          "line": 12
         },
         "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
         "id": "settings.supportFerdi.headline",
         "start": {
           "column": 12,
-          "line": 8
+          "line": 9
         }
       },
       {
-        "defaultMessage": "!!!Do you like Ferdi? Spread the love!",
+        "defaultMessage": "!!!Do you like Ferdi?",
         "end": {
           "column": 3,
-          "line": 15
+          "line": 16
         },
         "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
         "id": "settings.supportFerdi.title",
         "start": {
           "column": 9,
-          "line": 12
+          "line": 13
         }
       },
       {
-        "defaultMessage": "!!!Star on GitHub",
+        "defaultMessage": "!!!<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 20
         },
         "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
-        "id": "settings.supportFerdi.github",
+        "id": "settings.supportFerdi.aboutIntro",
         "start": {
-          "column": 10,
-          "line": 16
+          "column": 14,
+          "line": 17
         }
       },
       {
-        "defaultMessage": "!!!Tell your Friends",
+        "defaultMessage": "!!!Full list of contributor",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 24
         },
         "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
-        "id": "settings.supportFerdi.share",
+        "id": "settings.supportFerdi.textListContributors",
         "start": {
-          "column": 9,
-          "line": 20
+          "column": 24,
+          "line": 21
         }
       },
       {
-        "defaultMessage": "!!!Support our Open Collective",
+        "defaultMessage": "!!!here",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 28
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.textListContributorsHere",
+        "start": {
+          "column": 28,
+          "line": 25
+        }
+      },
+      {
+        "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.",
+        "end": {
+          "column": 3,
+          "line": 32
         },
         "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
-        "id": "settings.supportFerdi.openCollective",
+        "id": "settings.supportFerdi.textVolunteers",
         "start": {
           "column": 18,
-          "line": 24
+          "line": 29
+        }
+      },
+      {
+        "defaultMessage": "!!!Support is always welcome. You can find a list of the help we need",
+        "end": {
+          "column": 3,
+          "line": 36
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.textSupportWelcome",
+        "start": {
+          "column": 22,
+          "line": 33
+        }
+      },
+      {
+        "defaultMessage": "!!!here",
+        "end": {
+          "column": 3,
+          "line": 40
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.textSupportWelcomeHere",
+        "start": {
+          "column": 26,
+          "line": 37
+        }
+      },
+      {
+        "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",
+        "end": {
+          "column": 3,
+          "line": 44
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.textExpenses",
+        "start": {
+          "column": 16,
+          "line": 41
+        }
+      },
+      {
+        "defaultMessage": "!!!Open Collective",
+        "end": {
+          "column": 3,
+          "line": 48
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.textOpenCollective",
+        "start": {
+          "column": 22,
+          "line": 45
+        }
+      },
+      {
+        "defaultMessage": "!!!If you feel like supporting Ferdi development with a donation, you can do so on both,",
+        "end": {
+          "column": 3,
+          "line": 52
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.textDonation",
+        "start": {
+          "column": 16,
+          "line": 49
+        }
+      },
+      {
+        "defaultMessage": "!!!and",
+        "end": {
+          "column": 3,
+          "line": 56
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.textDonationAnd",
+        "start": {
+          "column": 19,
+          "line": 53
+        }
+      },
+      {
+        "defaultMessage": "!!!GitHub Sponsors",
+        "end": {
+          "column": 3,
+          "line": 60
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.textGitHubSponsors",
+        "start": {
+          "column": 22,
+          "line": 57
+        }
+      },
+      {
+        "defaultMessage": "!!!Open Survey",
+        "end": {
+          "column": 3,
+          "line": 64
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.openSurvey",
+        "start": {
+          "column": 14,
+          "line": 61
+        }
+      },
+      {
+        "defaultMessage": "!!!Do you want to help us improve Ferdi?",
+        "end": {
+          "column": 3,
+          "line": 68
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.bannerText",
+        "start": {
+          "column": 14,
+          "line": 65
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 553c30489..ee6fc2b29 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -352,7 +352,7 @@
   "settings.navigation.availableServices": "Available services",
   "settings.navigation.logout": "Logout",
   "settings.navigation.settings": "Settings",
-  "settings.navigation.supportFerdi": "Support Ferdi",
+  "settings.navigation.supportFerdi": "About Ferdi",
   "settings.navigation.team": "Manage Team",
   "settings.navigation.yourServices": "Your services",
   "settings.navigation.yourWorkspaces": "Your workspaces",
@@ -429,11 +429,21 @@
   "settings.services.tooltip.isMuted": "All sounds are muted",
   "settings.services.tooltip.notificationsDisabled": "Notifications are disabled",
   "settings.services.updatedInfo": "Your changes have been saved",
-  "settings.supportFerdi.github": "Star on GitHub",
-  "settings.supportFerdi.headline": "Support Ferdi",
-  "settings.supportFerdi.openCollective": "Support our Open Collective",
-  "settings.supportFerdi.share": "Tell your Friends",
-  "settings.supportFerdi.title": "Do you like Ferdi? Spread the love!",
+  "settings.supportFerdi.aboutIntro": "<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>",
+  "settings.supportFerdi.bannerText": "Do you want to help us improve Ferdi?",
+  "settings.supportFerdi.headline": "About Ferdi",
+  "settings.supportFerdi.openSurvey": "Open survey",
+  "settings.supportFerdi.textDonation": "If you feel like supporting Ferdi development with a donation, you can do so on both,",
+  "settings.supportFerdi.textDonationAnd": "and",
+  "settings.supportFerdi.textExpenses": "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",
+  "settings.supportFerdi.textGitHubSponsors": "GitHub Sponsors",
+  "settings.supportFerdi.textListContributors": "Full list of contributors",
+  "settings.supportFerdi.textListContributorsHere": "here",
+  "settings.supportFerdi.textOpenCollective": "Open Collective",
+  "settings.supportFerdi.textSupportWelcome": "Support is always welcome. You can find a list of the help we need",
+  "settings.supportFerdi.textSupportWelcomeHere": "here",
+  "settings.supportFerdi.textVolunteers": "The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.",
+  "settings.supportFerdi.title": "Do you like Ferdi?",
   "settings.team.contentHeadline": "Franz Team Management",
   "settings.team.copy": "Franz's Team Management allows you to manage Franz Subscriptions for multiple users. Please keep in mind that having a Franz Premium subscription will give you no advantages in using Ferdi: The only reason you still have access to Team Management is so you can manage your legacy Franz Teams and so that you don't loose any functionality in managing your account.",
   "settings.team.headline": "Team",
diff --git a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
index 154cdbe84..d7906fa7d 100644
--- a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
+++ b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
@@ -79,7 +79,7 @@
   },
   {
     "id": "settings.navigation.supportFerdi",
-    "defaultMessage": "!!!Support Ferdi",
+    "defaultMessage": "!!!About Ferdi",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
       "line": 41,
diff --git a/src/i18n/messages/src/components/settings/supportFerdi/SupportFerdiDashboard.json b/src/i18n/messages/src/components/settings/supportFerdi/SupportFerdiDashboard.json
index bf8df6468..d8ec01f17 100644
--- a/src/i18n/messages/src/components/settings/supportFerdi/SupportFerdiDashboard.json
+++ b/src/i18n/messages/src/components/settings/supportFerdi/SupportFerdiDashboard.json
@@ -1,66 +1,196 @@
 [
   {
     "id": "settings.supportFerdi.headline",
-    "defaultMessage": "!!!Support Ferdi",
+    "defaultMessage": "!!!About Ferdi",
     "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
     "start": {
-      "line": 8,
+      "line": 9,
       "column": 12
     },
     "end": {
-      "line": 11,
+      "line": 12,
       "column": 3
     }
   },
   {
     "id": "settings.supportFerdi.title",
-    "defaultMessage": "!!!Do you like Ferdi? Spread the love!",
+    "defaultMessage": "!!!Do you like Ferdi?",
     "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
     "start": {
-      "line": 12,
+      "line": 13,
       "column": 9
     },
     "end": {
-      "line": 15,
+      "line": 16,
       "column": 3
     }
   },
   {
-    "id": "settings.supportFerdi.github",
-    "defaultMessage": "!!!Star on GitHub",
+    "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>",
     "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
     "start": {
-      "line": 16,
-      "column": 10
+      "line": 17,
+      "column": 14
     },
     "end": {
-      "line": 19,
+      "line": 20,
       "column": 3
     }
   },
   {
-    "id": "settings.supportFerdi.share",
-    "defaultMessage": "!!!Tell your Friends",
+    "id": "settings.supportFerdi.textListContributors",
+    "defaultMessage": "!!!Full list of contributor",
     "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
     "start": {
-      "line": 20,
-      "column": 9
+      "line": 21,
+      "column": 24
     },
     "end": {
-      "line": 23,
+      "line": 24,
       "column": 3
     }
   },
   {
-    "id": "settings.supportFerdi.openCollective",
-    "defaultMessage": "!!!Support our Open Collective",
+    "id": "settings.supportFerdi.textListContributorsHere",
+    "defaultMessage": "!!!here",
     "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
     "start": {
-      "line": 24,
+      "line": 25,
+      "column": 28
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "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.",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 29,
       "column": 18
     },
     "end": {
-      "line": 27,
+      "line": 32,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.textSupportWelcome",
+    "defaultMessage": "!!!Support is always welcome. You can find a list of the help we need",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 33,
+      "column": 22
+    },
+    "end": {
+      "line": 36,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.textSupportWelcomeHere",
+    "defaultMessage": "!!!here",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 37,
+      "column": 26
+    },
+    "end": {
+      "line": 40,
+      "column": 3
+    }
+  },
+  {
+    "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",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 41,
+      "column": 16
+    },
+    "end": {
+      "line": 44,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.textOpenCollective",
+    "defaultMessage": "!!!Open Collective",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 45,
+      "column": 22
+    },
+    "end": {
+      "line": 48,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.textDonation",
+    "defaultMessage": "!!!If you feel like supporting Ferdi development with a donation, you can do so on both,",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 49,
+      "column": 16
+    },
+    "end": {
+      "line": 52,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.textDonationAnd",
+    "defaultMessage": "!!!and",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 53,
+      "column": 19
+    },
+    "end": {
+      "line": 56,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.textGitHubSponsors",
+    "defaultMessage": "!!!GitHub Sponsors",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 57,
+      "column": 22
+    },
+    "end": {
+      "line": 60,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.openSurvey",
+    "defaultMessage": "!!!Open Survey",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 61,
+      "column": 14
+    },
+    "end": {
+      "line": 64,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.bannerText",
+    "defaultMessage": "!!!Do you want to help us improve Ferdi?",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 65,
+      "column": 14
+    },
+    "end": {
+      "line": 68,
       "column": 3
     }
   }
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index b908305de..147083a5f 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -505,3 +505,7 @@
     width: 7px;
   }
 }
+
+.settings__support-badges {
+  a { margin-right: 10px }
+}
diff --git a/src/styles/type.scss b/src/styles/type.scss
index 5b1160d0b..7531b2044 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -57,7 +57,10 @@ a, button {
     }
   }
 
-  &.link { color: $theme-brand-primary; }
+  &.link {
+    color: $theme-brand-primary;
+    cursor: pointer;
+  }
 }
 
 .error-message, .error-message:last-of-type {