fix: minor fixes and cleanup

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>
   );
 }