fix: minor fixes and cleanup

src/components/helpers/sharemodal/ShareModal.jsx

@@ -22,9 +22,7 @@ export default function ShareModal({ modalClose, data }) {
     if (!data.data) {
       data.data.name = 'this image';
     }
-  } catch (e) {
-
-  }
+  } catch (e) {}
 
   return (
     <div className="smallModal">

src/components/modals/main/marketplace/Items.jsx

@@ -1,6 +1,11 @@
 import variables from 'modules/variables';
 import React, { useState } from 'react';
-import { MdAutoFixHigh, MdOutlineArrowForward, MdExpandMore, MdOutlineOpenInNew } from 'react-icons/md';
+import {
+  MdAutoFixHigh,
+  MdOutlineArrowForward,
+  MdExpandMore,
+  MdOutlineOpenInNew,
+} from 'react-icons/md';
 
 export default function Items({
   type,
@@ -30,7 +35,13 @@ export default function Items({
         <>
           <div
             className="collection"
-            style={collection.news ? {backgroundColor: collection.background_colour} : {backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${collection.img}')`}}
+            style={
+              collection.news
+                ? { backgroundColor: collection.background_colour }
+                : {
+                    backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${collection.img}')`,
+                  }
+            }
           >
             <div className="content">
               <span className="title">{collection.display_name}</span>

src/components/modals/main/marketplace/sections/Create.jsx

@@ -207,9 +207,8 @@ export default class Create extends PureComponent {
         <div className="smallBanner">
           <div className="content">
             <span className="title" style={{ textTransform: 'capitalize' }}>
-            {getMessage(
-                'modals.main.addons.create.types.' + this.state.addonMetadata.type,
-              ) || 'marketplace'}
+              {getMessage('modals.main.addons.create.types.' + this.state.addonMetadata.type) ||
+                'marketplace'}
             </span>
             <span className="subtitle">
               {getMessage(

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -391,7 +391,6 @@ export default class Marketplace extends PureComponent {
                     <MdOutlineArrowForward />{' '}
                     {this.getMessage('modals.main.marketplace.explore_collection')}
                   </button>
-                  
                 </div>
               ) : null}
             </>

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

@@ -142,7 +142,7 @@ table {
   .messageText {
     display: flex;
     flex-flow: column;
-    flex-grow: 3; 
+    flex-grow: 3;
     textarea {
       @include themed() {
         color: t($color);

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

@@ -51,13 +51,20 @@ export default function ExperimentalSettings() {
           InputLabelProps={{ shrink: true }}
         />
       </SettingsItem>
-      <SettingsItem title={getMessage('modals.main.settings.sections.experimental.developer')} final={true}>
-      <button className="uploadbg" onClick={() => EventBus.dispatch(eventType, eventName)}>
-        Send
-      </button>
-      <button className="reset" style={{ marginLeft: '0px' }} onClick={() => localStorage.clear()}>
-        Clear LocalStorage
-      </button>
+      <SettingsItem
+        title={getMessage('modals.main.settings.sections.experimental.developer')}
+        final={true}
+      >
+        <button className="uploadbg" onClick={() => EventBus.dispatch(eventType, eventName)}>
+          Send
+        </button>
+        <button
+          className="reset"
+          style={{ marginLeft: '0px' }}
+          onClick={() => localStorage.clear()}
+        >
+          Clear LocalStorage
+        </button>
       </SettingsItem>
     </>
   );

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

@@ -3,8 +3,8 @@ import { PureComponent } from 'react';
 import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import { TextareaAutosize } from '@mui/material';
-import SettingsItem from '../SettingsItem';
 
+import SettingsItem from '../SettingsItem';
 import Header from '../Header';
 
 import EventBus from 'modules/helpers/eventbus';

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

@@ -1,105 +0,0 @@
-import variables from 'modules/variables';
-import { PureComponent } from 'react';
-import { MdOutlineDragIndicator } from 'react-icons/md';
-import { sortableContainer, sortableElement } from 'react-sortable-hoc';
-import { toast } from 'react-toastify';
-
-import EventBus from 'modules/helpers/eventbus';
-
-const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
-const widget_name = {
-  greeting: getMessage('modals.main.settings.sections.greeting.title'),
-  time: getMessage('modals.main.settings.sections.time.title'),
-  quicklinks: getMessage('modals.main.settings.sections.quicklinks.title'),
-  quote: getMessage('modals.main.settings.sections.quote.title'),
-  date: getMessage('modals.main.settings.sections.date.title'),
-  message: getMessage('modals.main.settings.sections.message.title'),
-  reminder: 'reminder',
-};
-
-const SortableItem = sortableElement(({ value }) => (
-  <li className="sortableItem">
-    {widget_name[value]}
-    <MdOutlineDragIndicator />
-  </li>
-));
-
-const SortableContainer = sortableContainer(({ children }) => (
-  <ul className="sortablecontainer">{children}</ul>
-));
-
-export default class OrderSettings extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      items: JSON.parse(localStorage.getItem('order')),
-    };
-  }
-
-  arrayMove(array, oldIndex, newIndex) {
-    const result = Array.from(array);
-    const [removed] = result.splice(oldIndex, 1);
-    result.splice(newIndex, 0, removed);
-
-    return result;
-  }
-
-  onSortEnd = ({ oldIndex, newIndex }) => {
-    this.setState({
-      items: this.arrayMove(this.state.items, oldIndex, newIndex),
-    });
-  };
-
-  reset = () => {
-    localStorage.setItem(
-      'order',
-      JSON.stringify(['greeting', 'time', 'quicklinks', 'quote', 'date', 'message', 'reminder']),
-    );
-
-    this.setState({
-      items: JSON.parse(localStorage.getItem('order')),
-    });
-
-    toast(getMessage('toasts.reset'));
-  };
-
-  enabled = (setting) => {
-    switch (setting) {
-      case 'quicklinks':
-        return localStorage.getItem('quicklinksenabled') === 'true';
-      default:
-        return localStorage.getItem(setting) === 'true';
-    }
-  };
-
-  componentDidUpdate() {
-    localStorage.setItem('order', JSON.stringify(this.state.items));
-    variables.stats.postEvent('setting', 'Widget order');
-    EventBus.dispatch('refresh', 'widgets');
-  }
-
-  render() {
-    return (
-      <>
-        <span className="mainTitle">{getMessage('modals.main.settings.sections.order.title')}</span>
-        <span className="link" onClick={this.reset}>
-          {getMessage('modals.main.settings.buttons.reset')}
-        </span>
-        <SortableContainer
-          onSortEnd={this.onSortEnd}
-          lockAxis="y"
-          lockToContainerEdges
-          disableAutoscroll
-        >
-          {this.state.items.map((value, index) => {
-            if (!this.enabled(value)) {
-              return null;
-            }
-
-            return <SortableItem key={`item-${value}`} index={index} value={value} />;
-          })}
-        </SortableContainer>
-      </>
-    );
-  }
-}

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

@@ -25,7 +25,7 @@ const achievementLanguage = {
   tr_TR: translations.tr_TR,
 };
 
-console.log(achievementLanguage.en_GB)
+console.log(achievementLanguage.en_GB);
 
 export default class Stats extends PureComponent {
   constructor() {
@@ -117,12 +117,14 @@ export default class Stats extends PureComponent {
       );
     }
 
-    const achievementElement = (key, name, description) => (
+    const achievementElement = (key, name) => (
       <div className="achievement">
         <FaTrophy />
         <div className="achievementContent">
           <span>{name}</span>
-          <span className="subtitle">{achievementLanguage[localStorage.getItem('language')][key]}</span>
+          <span className="subtitle">
+            {achievementLanguage[localStorage.getItem('language')][key]}
+          </span>
         </div>
       </div>
     );
@@ -152,7 +154,7 @@ export default class Stats extends PureComponent {
             <div className="achievements">
               {this.state.achievements.map((achievement, index) => {
                 if (achievement.achieved) {
-                  return achievementElement(index, achievement.name, achievement.description);
+                  return achievementElement(index, achievement.name);
                 }
               })}
             </div>

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

@@ -5,13 +5,8 @@ import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Radio from '../Radio';
-//import Slider from '../Slider';
-//import Switch from '../Switch';
-
 import SettingsItem from '../SettingsItem';
 
-//import { values } from 'modules/helpers/settings/modals';
-
 export default class TimeSettings extends PureComponent {
   constructor() {
     super();
@@ -22,28 +17,12 @@ export default class TimeSettings extends PureComponent {
     };
   }
 
-  updateHourColour(event) {
-    const hourColour = event.target.value;
-    this.setState({ hourColour });
-    localStorage.setItem('hourColour', hourColour);
+  updateColour(type, event) {
+    const colour = event.target.value;
+    this.setState({ [type]: colour });
+    localStorage.setItem(type, colour);
   }
 
-  updateMinuteColour(event) {
-    const minuteColour = event.target.value;
-    this.setState({ minuteColour });
-    localStorage.setItem('minuteColour', minuteColour);
-  }
-
-  resetHourColour() {
-    localStorage.setItem('hourColour', '#ffffff')
-  }
-
-  resetMinuteColour() {
-    localStorage.setItem('minuteColour', '#ffffff')
-  }
-
-
-
   render() {
     const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
@@ -119,37 +98,45 @@ export default class TimeSettings extends PureComponent {
 
     const verticalClock = (
       <>
-        <SettingsItem title={getMessage('modals.main.settings.sections.time.vertical_clock.change_hour_colour')} subtitle="">
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.time.vertical_clock.change_hour_colour')}
+          subtitle=""
+        >
           <div className="colourInput">
             <input
               type="color"
-              name="minuteColour"
+              name="hourColour"
               className="minuteColour"
-              onChange={(event) => this.updateHourColour(event)}
+              onChange={(event) => this.updateColour('hour', event)}
               value={this.state.hourColour}
             ></input>
             <label htmlFor={'hourColour'} className="customBackgroundHex">
               {this.state.hourColour}
             </label>
           </div>
-          <span className="link" onClick={() => this.resetHourColour()}>
+          <span className="link" onClick={() => localStorage.setItem('hourColour', '#ffffff')}>
             {getMessage('modals.main.settings.buttons.reset')}
           </span>
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.settings.sections.time.vertical_clock.change_minute_colour')}  subtitle="">
+        <SettingsItem
+          title={getMessage(
+            'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
+          )}
+          subtitle=""
+        >
           <div className="colourInput">
             <input
               type="color"
               name="minuteColour"
               className="minuteColour"
-              onChange={(event) => this.updateMinuteColour(event)}
+              onChange={(event) => this.updateColour('minute', event)}
               value={this.state.minuteColour}
             ></input>
             <label htmlFor={'minuteColour'} className="customBackgroundHex">
               {this.state.minuteColour}
             </label>
           </div>
-          <span className="link" onClick={() => this.resetMinuteColour()}>
+          <span className="link" onClick={() => localStorage.setItem('minuteColour', '#ffffff')}>
             {getMessage('modals.main.settings.buttons.reset')}
           </span>
         </SettingsItem>
@@ -194,7 +181,9 @@ export default class TimeSettings extends PureComponent {
             <option value="percentageComplete">
               {getMessage('modals.main.settings.sections.time.percentage_complete')}
             </option>
-            <option value="verticalClock">{getMessage('modals.main.settings.sections.time.vertical_clock.title')}</option>
+            <option value="verticalClock">
+              {getMessage('modals.main.settings.sections.time.vertical_clock.title')}
+            </option>
           </Dropdown>
         </SettingsItem>
         {timeSettings}

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

@@ -19,7 +19,7 @@ import ResetModal from '../../ResetModal';
 import Dropdown from '../../Dropdown';
 import SettingsItem from '../../SettingsItem';
 
-import Data from './Data';
+//import Data from './Data';
 
 import time_zones from 'components/widgets/time/timezones.json';
 
@@ -35,9 +35,9 @@ export default class AdvancedSettings extends PureComponent {
   render() {
     const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
-    if (this.state.showData) {
+    /*if (this.state.showData) {
       return <Data goBack={() => this.setState({ showData: false })} />;
-    }
+    }*/
 
     return (
       <>

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

@@ -173,55 +173,6 @@ export default class CustomSettings extends PureComponent {
     return (
       <>
         {this.props.interval}
-
-        {/*<div className="settingsRow settingsNoBorder" style={{ alignItems: 'flex-start' }}>
-          <div className="content">
-            {/*<div className="images-row">
-              {this.state.customBackground.map((url, index) => (
-                <div key={index}>
-                  <img
-                    alt={'Custom background ' + (index || 0)}
-                    src={`${!this.videoCheck(url) ? this.state.customBackground[index] : ''}`}
-                  />
-                  {this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null}
-                  {this.state.customBackground.length > 0 ? (
-                    <button
-                      className="iconButton"
-                      onClick={() => this.modifyCustomBackground('remove', index)}
-                    >
-                      <MdCancel />
-                    </button>
-                  ) : null}
-                </div>
-              ))}
-                  </div>
-          </div>
-
-          <div className="action">
-            <div className="dropzone" ref={this.customDnd}>
-              <MdAddPhotoAlternate />
-              <span className="title">
-                {this.getMessage('modals.main.settings.sections.background.source.drop_to_upload')}
-              </span>
-              <span className="subtitle">
-                {this.getMessage(
-                  'modals.main.settings.sections.background.source.available_formats',
-                  {
-                    formats: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
-                  },
-                )}
-              </span>
-              <button onClick={() => this.uploadCustomBackground()}>
-                {this.getMessage('modals.main.settings.sections.background.source.select')}
-              </button>
-            </div>
-            <button onClick={() => this.setState({ customURLModal: true })}>
-              {this.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}
-              <MdAddLink />
-            </button>
-          </div>
-        </div>*/}
-
         <div className="dropzone" ref={this.customDnd}>
           <div className="imagesTopBar">
             <div>

src/components/modals/main/settings/sections/overview_skeletons/Clock.jsx

@@ -1,7 +1,3 @@
 export default function ClockSkeleton() {
-  return (
-    <span className="new-clock clock-container clockSkeleton">
-     10:20
-    </span>
-  );
+  return <span className="new-clock clock-container clockSkeleton">10:20</span>;
 }

src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx

@@ -1,7 +1,3 @@
 export default function GreetingSkeleton() {
-  return (
-    <span className="greeting">
-        Good Morning
-    </span>
-  );
+  return <span className="greeting">Good Morning</span>;
 }

src/components/modals/main/settings/sections/overview_skeletons/QuickLinks.jsx

@@ -1,15 +1,22 @@
 import { FaDiscord, FaTwitter } from 'react-icons/fa';
 import { SiKofi, SiPatreon } from 'react-icons/si';
 
-
 export default function QuicklinksSkeleton() {
   return (
     <div className="quickLinksSkeleton">
-      <div className='circles'>
-        <div><FaDiscord/></div>
-        <div><FaTwitter/></div>
-        <div><SiKofi/></div>
-        <div><SiPatreon/></div>
+      <div className="circles">
+        <div>
+          <FaDiscord />
+        </div>
+        <div>
+          <FaTwitter />
+        </div>
+        <div>
+          <SiKofi />
+        </div>
+        <div>
+          <SiPatreon />
+        </div>
       </div>
     </div>
   );

src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx

@@ -4,15 +4,15 @@ export default function QuoteSkeleton() {
   return (
     <div className="quoteSkeleton">
       <span className="subtitle">"Never gonna give you up"</span>
-        <div className="skeletonAuthor">
-          <div>
-            <MdPerson />
-          </div>
-          <div className="text">
-            <span className="title">Rick Astley</span>
-            <span className="subtitle">Music Genius</span>
-          </div>
+      <div className="skeletonAuthor">
+        <div>
+          <MdPerson />
         </div>
+        <div className="text">
+          <span className="title">Rick Astley</span>
+          <span className="subtitle">English singer-songwriter</span>
+        </div>
+      </div>
     </div>
   );
 }

src/components/modals/welcome/WelcomeSections.jsx

@@ -55,7 +55,7 @@ export default class WelcomeSections extends PureComponent {
     loadSettings(true);
   }
 
-  changeStyle(type) { 
+  changeStyle(type) {
     this.setState({
       newStyle: type === 'new' ? 'toggle newStyle active' : 'toggle newStyle',
       legacyStyle: type === 'legacy' ? 'toggle legacyStyle active' : 'toggle legacyStyle',
@@ -170,7 +170,7 @@ export default class WelcomeSections extends PureComponent {
             <span className="title">Join our Discord</span>
             <span className="subtitle">Talk with the Mue community and developers</span>
           </div>
-          <a href="https://discord.gg/zv8C9F8">
+          <a href="https://discord.gg/zv8C9F8" target="_blank" rel="noopener noreferrer">
             <MdOpenInNew /> Join
           </a>
         </div>
@@ -182,7 +182,7 @@ export default class WelcomeSections extends PureComponent {
             <span className="title">Contribute on GitHub</span>
             <span className="subtitle">Report bugs, add features or donate</span>
           </div>
-          <a href="https://github.com/mue/mue">
+          <a href="https://github.com/mue/mue" target="_blank" rel="noopener noreferrer">
             <MdOpenInNew /> Open
           </a>
         </div>
@@ -241,8 +241,11 @@ export default class WelcomeSections extends PureComponent {
 
     const style = (
       <>
-        <span className='mainTitle'>Choose a theme</span>
-        <span className="subtitle">Mue currently offers the choice between the legacy styling and the newly released modern styling.</span>
+        <span className="mainTitle">Choose a theme</span>
+        <span className="subtitle">
+          Mue currently offers the choice between the legacy styling and the newly released modern
+          styling.
+        </span>
         <div className="themesToggleArea">
           <div className="options">
             <div className={this.state.legacyStyle} onClick={() => this.changeStyle('legacy')}>
@@ -256,7 +259,7 @@ export default class WelcomeSections extends PureComponent {
           </div>
         </div>
       </>
-    )
+    );
 
     const settings = (
       <>

src/components/modals/welcome/welcome.scss

@@ -279,4 +279,4 @@ a.privacy {
   @include themed() {
     background-color: t($modal-sidebarActive) !important;
   }
-}
+}

src/components/widgets/message/Message.jsx

@@ -48,7 +48,7 @@ export default class Message extends PureComponent {
             <br />
           </span>
         ))}
-        </h2>
+      </h2>
     );
   }
 }

src/components/widgets/navbar/Notes.jsx

@@ -127,10 +127,12 @@ class Notes extends PureComponent {
                     <MdContentCopy />
                   </button>
                 </Tooltip>
-                <Tooltip                   title={variables.language.getMessage(
+                <Tooltip
+                  title={variables.language.getMessage(
                     variables.languagecode,
                     'widgets.background.download',
-                  )}>
+                  )}
+                >
                   <button onClick={() => this.download()}>
                     <MdDownload />
                   </button>

src/components/widgets/navbar/Todo.jsx

@@ -202,7 +202,7 @@ class Todo extends PureComponent {
                             onChange={(data) => this.updateTodo('set', index, data)}
                             readOnly={this.state.todo[index].done}
                           />
-                            <MdDelete onClick={() => this.updateTodo('remove', index)} />
+                          <MdDelete onClick={() => this.updateTodo('remove', index)} />
                           <MdOutlineDragIndicator />
                         </div>
                       }

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -49,7 +49,7 @@ export default class QuickLinks extends PureComponent {
     // eslint-disable-next-line no-useless-escape
     if (
       url.length <= 0 ||
-      /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/.test(
+      /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_.~#?&=]*)/.test(
         url,
       ) === false
     ) {

src/components/widgets/quote/Quote.jsx

@@ -462,7 +462,11 @@ export default class Quote extends PureComponent {
                     {this.state.authorOccupation !== 'Unknown' ? (
                       <span className="subtitle">{this.state.authorOccupation}</span>
                     ) : null}
-                    <span className="author-license">{this.state.authorimglicense ? this.state.authorimglicense.replace(' undefined. ', ' ') : null}</span>
+                    <span className="author-license">
+                      {this.state.authorimglicense
+                        ? this.state.authorimglicense.replace(' undefined. ', ' ')
+                        : null}
+                    </span>
                   </div>
                 ) : (
                   <div className="author-content whileLoading" ref={this.quoteauthor}>

src/components/widgets/time/Clock.jsx

@@ -190,8 +190,12 @@ export default class Clock extends PureComponent {
         <>
           <span className="new-clock clock-container">
             {' '}
-            <div className="hour" style={{ color: this.state.hourColour }}>{this.state.finalHour}</div>{' '}
-            <div className="minute" style={{ color: this.state.minuteColour }}>{this.state.finalMinute}</div>{' '}
+            <div className="hour" style={{ color: this.state.hourColour }}>
+              {this.state.finalHour}
+            </div>{' '}
+            <div className="minute" style={{ color: this.state.minuteColour }}>
+              {this.state.finalMinute}
+            </div>{' '}
             <div className="seconds">{this.state.finalSeconds}</div>{' '}
           </span>
         </>

src/components/widgets/time/clock.scss

@@ -41,11 +41,10 @@
   padding: 1rem;
 }
 
-
 .new-clock {
   line-height: 100%;
   .seconds {
     font-size: 0.2em;
     line-height: 0%;
   }
-}
+}

src/components/widgets/weather/Weather.jsx

@@ -315,7 +315,7 @@ export default class Weather extends PureComponent {
             </div>
           )}
         </div>
-        {weatherType == 3 ? expandedInfo() : null}
+        {weatherType === 3 ? expandedInfo() : null}
       </div>
     );
   }