fix: offline mode fixes, about tab fix, update modal text

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

@@ -18,11 +18,11 @@ export default class About extends PureComponent {
       contributors: [],
       sponsors: [],
       other_contributors: [],
-      photographers: this.getMessage('modals.main.loading'),
+      photographers: [],
       update: this.getMessage('modals.main.settings.sections.about.version.checking_update'),
       loading: this.getMessage('modals.main.loading'),
       image:
-        localStorage.getItem('theme') === 'dark'
+        document.body.classList.contains('dark')
           ? 'public/icons/mue_dark.png'
           : 'public/icons/mue_light.png',
     };
@@ -178,7 +178,7 @@ export default class About extends PureComponent {
           </span>
           <div className="aboutContact">
             <a
-              class="donateButton"
+              className="donateButton"
               href="https://muetab.com/contact"
               target="_blank"
               rel="noopener noreferrer"
@@ -225,11 +225,11 @@ export default class About extends PureComponent {
             development
           </p>
           <div className="aboutContact">
-            <a class="donateButton" href={variables.constants.DONATE_LINK}>
+            <a className="donateButton" href={variables.constants.DONATE_LINK}>
               <BiDonateHeart />
               Donate
             </a>
-            <Tooltip title={'Github Sponsors'}>
+            <Tooltip title={'GitHub Sponsors'}>
               <a
                 href={'https://github.com/sponsors/' + variables.constants.SPONSORS_USERNAME}
                 target="_blank"
@@ -355,6 +355,7 @@ export default class About extends PureComponent {
           <span className="title">
             {this.getMessage('modals.main.settings.sections.about.photographers')}
           </span>
+          <p>{this.state.loading}</p>
           <span className="subtitle">{this.state.photographers}</span>
         </div>
       </>

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

@@ -70,7 +70,7 @@ export default class AdvancedSettings extends PureComponent {
         ) : null}
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.timezone.title')}
-          subtitle="Choose a timezone from a list of hundreds instead of the automatic default."
+          subtitle="Choose a timezone from a list instead of the automatic default from your computer."
         >
           <Dropdown name="timezone" category="timezone" manual={true}>
             <MenuItem value="auto">

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

@@ -22,7 +22,7 @@ export default function AppearanceSettings() {
           <span className="title">
             {getMessage('modals.main.settings.sections.appearance.theme.title')}
           </span>
-          <span className="subtitle">subtitle</span>
+          <span className="subtitle">Change the theme of the Mue widgets and modals</span>
         </div>
         <div className="action">
           <Radio
@@ -50,7 +50,7 @@ export default function AppearanceSettings() {
           <span className="title">
             {getMessage('modals.main.settings.sections.appearance.font.title')}
           </span>
-          <span className="subtitle">subtitle</span>
+          <span className="subtitle">Change the font used in Mue</span>
         </div>
         <div className="action">
           <Checkbox

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

@@ -17,8 +17,6 @@ export default class DateSettings extends PureComponent {
   render() {
     const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
-    let dateSettings;
-
     const longSettings = (
       <>
         <Dropdown label="Long Format" name="longFormat" category="date">
@@ -72,12 +70,6 @@ export default class DateSettings extends PureComponent {
       </>
     );
 
-    if (this.state.dateType === 'long') {
-      dateSettings = longSettings;
-    } else {
-      dateSettings = shortSettings;
-    }
-
     return (
       <>
         <Header
@@ -113,7 +105,7 @@ export default class DateSettings extends PureComponent {
             text={getMessage('modals.main.settings.sections.time.digital.zero')}
             category="date"
           />
-          {dateSettings}
+          {(this.state.dateType === 'long') ? longSettings : shortSettings}
         </SettingsItem>
       </>
     );

src/components/widgets/background/Background.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-expressions */
 // todo: rewrite this mess
 import variables from 'modules/variables';
 import { PureComponent } from 'react';

src/components/widgets/background/PhotoInformation.jsx

@@ -269,19 +269,16 @@ export default function PhotoInformation({ info, url, api }) {
           {showExtraInfo || other ? (
             <>
               <div className="concept-buttons">
-                <Tooltip title="Share" key="other">
+                <Tooltip title="Share" key="share">
                   <Share onClick={() => copyImage(info)} />
                 </Tooltip>
-                <Tooltip title="Favourite" key="other">
+                <Tooltip title="Favourite" key="favourite">
                   <Favourite />
                 </Tooltip>
-                <Tooltip title="Download" key="other">
+                <Tooltip title="Download" key="download">
                   <Download onClick={() => downloadImage(info)} />
                 </Tooltip>
               </div>
-              <span className="subtitle" style={{ marginBottom: '20px' }}>
-                Description
-              </span>
               <div className="extra-content">
                 <span className="subtitle">
                   {variables.language.getMessage(
@@ -311,10 +308,10 @@ export default function PhotoInformation({ info, url, api }) {
                     {width}x{height}
                   </span>
                 </div>
-                <div className="concept-row">
+                {api ? <div className="concept-row">
                   <Source />
                   <span id="infoSource">{api.charAt(0).toUpperCase() + api.slice(1)}</span>
-                </div>
+                </div> : null}
               </div>
             </>
           ) : null}

src/components/widgets/quote/Quote.jsx

@@ -90,6 +90,7 @@ export default class Quote extends PureComponent {
       quote: '"' + quote.quote + '"',
       author: quote.author,
       authorlink: this.getAuthorLink(quote.author),
+      authorimg: ''
     });
   }
 

src/index.jsx

@@ -27,7 +27,7 @@ import * as id_ID from './translations/id_ID.json';
 
 const languagecode = localStorage.getItem('language') || 'en_GB';
 
-// we set things to window. so we avoid passing the translation strings as props to each component
+// we set things to variables. so we avoid passing the translation strings etc as props to each component
 variables.languagecode = languagecode.replace('-', '_');
 
 if (languagecode === 'en') {