feat: about, remove redundancy

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

src/components/modals/main/scss/index.scss

@@ -181,4 +181,14 @@ h5 {
   display: flex;
   justify-content: space-between;
   padding: 15px 0 15px 0;
+  .link {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+    align-items: center;
+    &:hover {
+      opacity: .8;
+      cursor: pointer;
+    }
+  }
 }

src/components/modals/main/scss/modules/_tab-content.scss

@@ -93,3 +93,13 @@ table {
     }
   }
 }
+
+.donateButton {
+  @include modal-button(standard);
+  flex-flow: row !important;
+  text-decoration: none;
+  height: auto !important;
+  svg {
+    font-size: 1.5rem !important;
+  }
+}

src/components/modals/main/scss/settings/modules/tabs/_order.scss

@@ -2,18 +2,24 @@
 
 .sortableItem {
   @include themed() {
-    background: t($modal-sidebar) !important;
-    padding: 10px 80px 10px 10px;
-    border-radius: 15px;
+    padding: 15px;
     margin-bottom: 10px;
     font-size: 1.325rem;
     color: t($color) !important;
     cursor: move;
-    width: 150px;
+    width: 200px;
     z-index: 999 !important;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    background: t($modal-sidebar);
+    border: 3px solid t($modal-sidebarActive);
+    border-radius: t($borderRadius);
 
     svg {
       font-size: 1.3rem;
+      color: t($subColor);
     }
 
     &:hover {
@@ -22,8 +28,9 @@
   }
 
   ul {
-    padding-left: 0;
-    margin: 0;
+    -webkit-padding-start: 0;
+    padding: 0;
+    list-style-type: none;
 
     > label {
       vertical-align: middle;
@@ -31,6 +38,12 @@
   }
 }
 
+.sortablecontainer {
+  -webkit-padding-start: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
 .images-row {
   @include themed() {
     display: flex;

src/components/modals/main/settings/Slider.jsx

@@ -2,6 +2,7 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 import { Slider } from '@mui/material';
+import { MdRefresh } from 'react-icons/md';
 
 import EventBus from 'modules/helpers/eventbus';
 
@@ -63,6 +64,7 @@ export default class SliderComponent extends PureComponent {
         <span className={'sliderTitle'}>
           {this.props.title}
           <span className="link" onClick={this.resetItem}>
+            <MdRefresh />
             {variables.language.getMessage(
               variables.languagecode,
               'modals.main.settings.buttons.reset',

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"

src/components/widgets/background/PhotoInformation.jsx

@@ -312,17 +312,6 @@ export default function PhotoInformation({ info, url, api }) {
                   <Photographer />
                   <span>{photographer}</span>
                 </div>
-                {downloadEnabled ? (
-                  <>
-                    <Download />
-                    <span className="download" onClick={() => downloadImage(info)}>
-                      {variables.language.getMessage(
-                        variables.languagecode,
-                        'widgets.background.download',
-                      )}
-                    </span>
-                  </>
-                ) : null}
               </div>
             </>
           ) : null}