feat: about, remove redundancy

- Remove redundant background option
- about tab UI improvements
- improve widget order UI.. to be completed later

src/components/modals/main/settings/sections/About.jsx

@@ -2,7 +2,8 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { MdEmail } from 'react-icons/md';
 import { FaDiscord, FaTwitter, FaPatreon, FaGithub } from 'react-icons/fa';
-import { SiKofi } from 'react-icons/si';
+import { SiGithubsponsors, SiLiberapay, SiKofi, SiPatreon } from 'react-icons/si';
+import { BiDonateHeart } from 'react-icons/bi';
 
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
@@ -133,7 +134,7 @@ export default class About extends PureComponent {
         <span className="mainTitle">
           {this.getMessage('modals.main.settings.sections.about.title')}
         </span>
-        <SettingsItem>
+        <div className='settingsRow' style={{ justifyContent: 'center' }}>
           <div style={{ display: 'flex', flexFlow: 'column', gap: '5px' }}>
             <img draggable="false" className="aboutLogo" src={this.state.image} alt="Logo" />
             <span className="title">
@@ -171,7 +172,7 @@ export default class About extends PureComponent {
               </a>
             </span>
           </div>
-        </SettingsItem>
+        </div>
 
         <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
           <span className="title">
@@ -214,7 +215,46 @@ export default class About extends PureComponent {
           </span>
           <p>As Mue is entirely free, we rely on donations to cover pay the server bills and fund development</p>
           <div className="aboutContact">
-            <a class='button' href={variables.constants.DONATE_LINK}>Donate</a>
+            <a class='donateButton' href={variables.constants.DONATE_LINK}>
+              <BiDonateHeart />
+              Donate
+              </a>
+              <Tooltip title={'Github Sponsors'}>
+              <a
+                href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <SiGithubsponsors />
+              </a>
+            </Tooltip>
+            <Tooltip title={'Liberapay'}>
+              <a
+                href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <SiLiberapay />
+              </a>
+            </Tooltip>
+            <Tooltip title={'Ko-Fi'}>
+              <a
+                href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <SiKofi />
+              </a>
+            </Tooltip>
+            <Tooltip title={'Patreon'}>
+              <a
+                href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <SiPatreon />
+              </a>
+            </Tooltip>
           </div>
         </div>
 

src/components/modals/main/settings/sections/Order.jsx

@@ -19,8 +19,8 @@ const widget_name = {
 
 const SortableItem = sortableElement(({ value }) => (
   <li className="sortableItem">
-    <MdOutlineDragIndicator style={{ verticalAlign: 'middle' }} />
     {widget_name[value]}
+    <MdOutlineDragIndicator />
   </li>
 ));
 

src/components/modals/main/settings/sections/background/Background.jsx

@@ -277,31 +277,6 @@ export default class BackgroundSettings extends PureComponent {
             disabled={this.state.backgroundAPI !== "unsplash"}
           />
         </SettingsItem>
-        <SettingsItem
-          title={getMessage(
-            "modals.main.settings.sections.background.buttons.title"
-          )}
-          subtitle="cheese"
-        >
-          <Checkbox
-            name="favouriteEnabled"
-            text={getMessage(
-              "modals.main.settings.sections.background.buttons.favourite"
-            )}
-            category="navbar"
-          />
-          {this.state.backgroundType === "api" &&
-          APISettings &&
-          this.state.backgroundAPI === "mue" ? (
-            <Checkbox
-              name="downloadbtn"
-              text={getMessage(
-                "modals.main.settings.sections.background.buttons.download"
-              )}
-              element=".other"
-            />
-          ) : null}
-        </SettingsItem>
         <SettingsItem
           title={getMessage(
             "modals.main.settings.sections.background.source.title"