Add a donations section to System for each arr

(cherry picked from commit 1b34244143)

frontend/src/System/Status/Donations/Donations.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import FieldSet from 'Components/FieldSet';
+import Link from 'Components/Link/Link';
+import styles from '../styles.css';
+
+class Donations extends Component {
+
+  //
+  // Render
+
+  render() {
+    return (
+      <FieldSet legend="Donations">
+        <div className={styles.logoContainer} title="Radarr">
+          <Link to="https://opencollective.com/radarr">
+            <img
+              className={styles.logo}
+              src={`${window.Readarr.urlBase}/Content/Images/Icons/logo-radarr.png`}
+            />
+          </Link>
+        </div>
+        <div className={styles.logoContainer} title="Lidarr">
+          <Link to="https://opencollective.com/lidarr">
+            <img
+              className={styles.logo}
+              src={`${window.Readarr.urlBase}/Content/Images/Icons/logo-lidarr.png`}
+            />
+          </Link>
+        </div>
+        <div className={styles.logoContainer} title="Readarr">
+          <Link to="https://opencollective.com/readarr">
+            <img
+              className={styles.logo}
+              src={`${window.Readarr.urlBase}/Content/Images/Icons/logo-readarr.png`}
+            />
+          </Link>
+        </div>
+        <div className={styles.logoContainer} title="Sonarr">
+          <Link to="https://opencollective.com/sonarr">
+            <img
+              className={styles.logo}
+              src={`${window.Readarr.urlBase}/Content/Images/Icons/logo-sonarr.png`}
+            />
+          </Link>
+        </div>
+      </FieldSet>
+    );
+  }
+}
+
+Donations.propTypes = {
+
+};
+
+export default Donations;

frontend/src/System/Status/MoreInfo/MoreInfo.js

@@ -35,16 +35,6 @@ class MoreInfo extends Component {
             <Link to="https://readarr.com/discord">Readarr on Discord</Link>
           </DescriptionListItemDescription>
 
-          <DescriptionListItemTitle>Donations</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://opencollective.com/readarr">Donate to Readarr</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>Sonarr Donations</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://sonarr.tv/donate">Donate to Sonarr</Link>
-          </DescriptionListItemDescription>
-
           <DescriptionListItemTitle>Source</DescriptionListItemTitle>
           <DescriptionListItemDescription>
             <Link to="https://github.com/readarr/Readarr/">github.com/Readarr/Readarr</Link>

frontend/src/System/Status/Status.js

@@ -4,6 +4,7 @@ import PageContentBody from 'Components/Page/PageContentBody';
 import translate from 'Utilities/String/translate';
 import AboutConnector from './About/AboutConnector';
 import DiskSpaceConnector from './DiskSpace/DiskSpaceConnector';
+import Donations from './Donations/Donations';
 import HealthConnector from './Health/HealthConnector';
 import MoreInfo from './MoreInfo/MoreInfo';
 
@@ -20,6 +21,7 @@ class Status extends Component {
           <DiskSpaceConnector />
           <AboutConnector />
           <MoreInfo />
+          <Donations />
         </PageContentBody>
       </PageContent>
     );

frontend/src/System/Status/styles.css

@@ -0,0 +1,17 @@
+.logo {
+  margin: auto;
+  padding: 9px;
+}
+
+.logoContainer {
+  display: inline-block;
+  margin: 1em;
+  width: 50px;
+  height: 50px;
+  outline: none;
+  border: solid 1px #e6e6e6;
+  border-radius: 0.5em;
+  background: #f8f8ff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+}