From c9bf429a60f7b5cc5fa065d54b699c9d84536564 Mon Sep 17 00:00:00 2001
From: kytwb <kytwb@pm.me>
Date: Sun, 19 Dec 2021 05:32:04 +0100
Subject: Iterate on About Ferdi screen

---
 .../supportFerdi/SupportFerdiDashboard.tsx         | 155 +++------------------
 1 file changed, 20 insertions(+), 135 deletions(-)

(limited to 'src/components')

diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
index acebc979f..948d0c1d1 100644
--- a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
@@ -1,6 +1,4 @@
 import { defineMessages, useIntl } from 'react-intl';
-import { mdiOpenInNew } from '@mdi/js';
-import { Icon } from '../../ui/icon';
 
 const messages = defineMessages({
   headline: {
@@ -9,60 +7,17 @@ const messages = defineMessages({
   },
   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>',
-  },
-  textListContributors: {
-    id: 'settings.supportFerdi.textListContributors',
-    defaultMessage: 'Full list of contributors',
-  },
-  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',
+    defaultMessage: 'Special thanks goes to these awesome people:',
   },
+  about: {
+    id: 'settings.supportFerdi.about',
+    defaultMessage: 'The development of Ferdi is done by contributors. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.',
+  }
 });
 
 const SupportFerdiDashboard = () => {
   const intl = useIntl();
 
-  const aboutIntro = intl.formatMessage(messages.aboutIntro);
-
   return (
     <div className="settings__main">
       <div className="settings__header">
@@ -73,16 +28,6 @@ const SupportFerdiDashboard = () => {
       <div className="settings__body">
         <div>
           <p className="settings__support-badges">
-            <a
-              href="https://github.com/getferdi/ferdi"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <img
-                alt="GitHub Stars"
-                src="https://img.shields.io/github/stars/getferdi/ferdi?style=social"
-              />
-            </a>
             <a
               href="https://twitter.com/getferdi/"
               target="_blank"
@@ -94,104 +39,44 @@ const SupportFerdiDashboard = () => {
               />
             </a>
             <a
-              href="https://opencollective.com/getferdi#section-contributors"
+              href="https://github.com/getferdi/ferdi"
               target="_blank"
               rel="noreferrer"
             >
               <img
-                alt="Open Collective backers"
-                src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective"
+                alt="GitHub Stars"
+                src="https://img.shields.io/github/stars/getferdi/ferdi?style=social"
               />
             </a>
+            <a target="_blank" href="https://crowdin.com/project/getferdi">
+              <img src="https://badges.crowdin.net/getferdi/localized.svg" alt="Crowdin"/>
+            </a>
             <a
               href="https://opencollective.com/getferdi#section-contributors"
               target="_blank"
               rel="noreferrer"
             >
               <img
-                alt="Open Collective sponsors"
-                src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective"
-              />
-            </a>
-          </p>
-          <span dangerouslySetInnerHTML={{ __html: 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"
+                alt="Open Collective backers"
+                src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective"
               />
             </a>
           </p>
+          <p>{intl.formatMessage(messages.aboutIntro)}</p>
           <p>
-            {intl.formatMessage(messages.textListContributors)}
             <a
               href="https://github.com/getferdi/ferdi#contributors-"
               target="_blank"
-              className="link"
               rel="noreferrer"
             >
-              {' '}
-              {intl.formatMessage(messages.textListContributorsHere)}
-              <Icon icon={mdiOpenInNew} />
-            </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"
-              rel="noreferrer"
-            >
-              {' '}
-              {intl.formatMessage(messages.textSupportWelcomeHere)}
-              <Icon icon={mdiOpenInNew} />
-            </a>
-          </p>
-          <p>
-            {intl.formatMessage(messages.textExpenses)}
-            <a
-              href="https://opencollective.com/getferdi#section-budget"
-              target="_blank"
-              className="link"
-              rel="noreferrer"
-            >
-              {' '}
-              {intl.formatMessage(messages.textOpenCollective)}
-              <Icon icon={mdiOpenInNew} />
-            </a>
-          </p>
-          <p>
-            {intl.formatMessage(messages.textDonation)}
-            <a
-              href="https://opencollective.com/getferdi#section-contribute"
-              target="_blank"
-              className="link"
-              rel="noreferrer"
-            >
-              {' '}
-              {intl.formatMessage(messages.textOpenCollective)}
-              <Icon icon={mdiOpenInNew} />
-            </a>{' '}
-            {intl.formatMessage(messages.textDonationAnd)}
-            <a
-              href="https://github.com/sponsors/getferdi"
-              target="_blank"
-              className="link"
-              rel="noreferrer"
-            >
-              {' '}
-              {intl.formatMessage(messages.textGitHubSponsors)}
-              <Icon icon={mdiOpenInNew} />
+              <img
+                alt="GitHub contributors (non-exhaustive)"
+                width="100%"
+                src="https://opencollective.com/getferdi/contributors.svg?width=600&avatarHeight=42&button=off"
+              />
             </a>
           </p>
+          <p className="settings__message">{intl.formatMessage(messages.about)}</p>
         </div>
       </div>
     </div>
-- 
cgit v1.2.3-70-g09d2