fix: various fixes and improvements

Co-authored-by: David Ralph <me@davidcralph.co.uk>

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

@@ -6,6 +6,7 @@ import { TextField } from '@mui/material';
 
 import EventBus from 'modules/helpers/eventbus';
 import { values } from 'modules/helpers/settings/modals';
+import SettingsItem from '../SettingsItem';
 
 export default function ExperimentalSettings() {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -14,46 +15,50 @@ export default function ExperimentalSettings() {
 
   return (
     <>
-      <h2>{getMessage('modals.main.settings.sections.experimental.title')}</h2>
-      <p>{getMessage('modals.main.settings.sections.experimental.warning')}</p>
-      <h3>{getMessage('modals.main.settings.sections.experimental.developer')}</h3>
-      <Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
-      <Slider
-        title="Debug timeout"
-        name="debugtimeout"
-        min="0"
-        max="5000"
-        default="0"
-        step="100"
-        marks={values('experimental')}
-        element=".other"
-      />
-      <p>Send Event</p>
-      <TextField
-        label={'Type'}
-        value={eventType}
-        onChange={(e) => setEventType(e.target.value)}
-        spellCheck={false}
-        varient="outlined"
-        InputLabelProps={{ shrink: true }}
-      />
-      <TextField
-        label={'Name'}
-        value={eventName}
-        onChange={(e) => setEventName(e.target.value)}
-        spellCheck={false}
-        varient="outlined"
-        InputLabelProps={{ shrink: true }}
-      />
-      <br />
+      <span className="mainTitle">
+        {getMessage('modals.main.settings.sections.experimental.title')}
+      </span>
+      <span className="subtitle">
+        {getMessage('modals.main.settings.sections.experimental.warning')}
+      </span>
+      <SettingsItem title={getMessage('modals.main.settings.sections.experimental.developer')}>
+        <Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
+        <Slider
+          title="Debug timeout"
+          name="debugtimeout"
+          min="0"
+          max="5000"
+          default="0"
+          step="100"
+          marks={values('experimental')}
+          element=".other"
+        />
+        <p>Send Event</p>
+        <TextField
+          label={'Type'}
+          value={eventType}
+          onChange={(e) => setEventType(e.target.value)}
+          spellCheck={false}
+          varient="outlined"
+          InputLabelProps={{ shrink: true }}
+        />
+        <TextField
+          label={'Name'}
+          value={eventName}
+          onChange={(e) => setEventName(e.target.value)}
+          spellCheck={false}
+          varient="outlined"
+          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>
-      <br />
-      <br />
       <button className="reset" style={{ marginLeft: '0px' }} onClick={() => localStorage.clear()}>
         Clear LocalStorage
       </button>
+      </SettingsItem>
     </>
   );
 }

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

@@ -9,6 +9,23 @@ import { FaTrophy } from 'react-icons/fa';
 
 import EventBus from 'modules/helpers/eventbus';
 import achievementsData from 'modules/helpers/settings/achievements.json';
+import translations from 'modules/helpers/settings/achievement_translations/index';
+
+const achievementLanguage = {
+  de_DE: translations.de_DE,
+  en_GB: translations.en_GB,
+  en_US: translations.en_US,
+  es: translations.es,
+  fr: translations.fr,
+  nl: translations.nl,
+  no: translations.no,
+  ru: translations.ru,
+  zh_CN: translations.zh_CN,
+  id_ID: translations.id_ID,
+  tr_TR: translations.tr_TR,
+};
+
+console.log(achievementLanguage.en_GB)
 
 export default class Stats extends PureComponent {
   constructor() {
@@ -19,7 +36,7 @@ export default class Stats extends PureComponent {
     };
   }
 
-  getAchivements() {
+  getAchievements() {
     const achievements = this.state.achievements;
     achievements.forEach((achievement) => {
       switch (achievement.condition.type) {
@@ -68,7 +85,8 @@ export default class Stats extends PureComponent {
       }
     });
 
-    this.getAchivements();
+    this.getAchievements();
+    this.forceUpdate();
   }
 
   componentWillUnmount() {
@@ -99,12 +117,12 @@ export default class Stats extends PureComponent {
       );
     }
 
-    const achievementElement = (name, description) => (
+    const achievementElement = (key, name, description) => (
       <div className="achievement">
         <FaTrophy />
         <div className="achievementContent">
           <span>{name}</span>
-          <span className="subtitle">{description}</span>
+          <span className="subtitle">{achievementLanguage[localStorage.getItem('language')][key]}</span>
         </div>
       </div>
     );
@@ -132,9 +150,9 @@ export default class Stats extends PureComponent {
               {this.getUnlockedCount()}/{this.state.achievements.length} Unlocked
             </span>
             <div className="achievements">
-              {this.state.achievements.map((achievement) => {
+              {this.state.achievements.map((achievement, index) => {
                 if (achievement.achieved) {
-                  return achievementElement(achievement.name, achievement.description);
+                  return achievementElement(index, achievement.name, achievement.description);
                 }
               })}
             </div>

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

@@ -17,16 +17,33 @@ export default class TimeSettings extends PureComponent {
     super();
     this.state = {
       timeType: localStorage.getItem('timeType') || 'digital',
-      colour: localStorage.getItem('minuteColour') || '#ffa500',
+      hourColour: localStorage.getItem('hourColour') || '#fff',
+      minuteColour: localStorage.getItem('minuteColour') || '#fff',
     };
   }
 
-  updateColour(event) {
-    const colour = event.target.value;
-    this.setState({ colour });
-    localStorage.setItem('minuteColour', colour);
+  updateHourColour(event) {
+    const hourColour = event.target.value;
+    this.setState({ hourColour });
+    localStorage.setItem('hourColour', hourColour);
   }
 
+  updateMinuteColour(event) {
+    const minuteColour = event.target.value;
+    this.setState({ minuteColour });
+    localStorage.setItem('minuteColour', minuteColour);
+  }
+
+  resetHourColour() {
+    localStorage.setItem('hourColour', '#fff')
+  }
+
+  resetMinuteColour() {
+    localStorage.setItem('minuteColour', '#fff')
+  }
+
+
+
   render() {
     const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
@@ -102,24 +119,41 @@ export default class TimeSettings extends PureComponent {
 
     const verticalClock = (
       <>
-      <SettingsItem
-        title="Change minute text colour"
-        subtitle=""
-      >
-        <div className="colorPicker">
-          <input
-            type="color"
-            name="colour"
-            className="colour"
-            onChange={(event) => this.updateColour(event)}
-            value={this.state.colour}
-          ></input>
-          <label htmlFor={'colour'} className="customBackgroundHex">
-            {this.state.colour}
-          </label>
-        </div>
-      </SettingsItem>
-      {digitalSettings}
+        <SettingsItem title="Change minute text hour colour" subtitle="">
+          <div className="colourInput">
+            <input
+              type="color"
+              name="minuteColour"
+              className="minuteColour"
+              onChange={(event) => this.updateHourColour(event)}
+              value={this.state.hourColour}
+            ></input>
+            <label htmlFor={'hourColour'} className="customBackgroundHex">
+              {this.state.hourColour}
+            </label>
+          </div>
+          <span className="link" onClick={() => this.resetHourColour()}>
+            {getMessage('modals.main.settings.buttons.reset')}
+          </span>
+        </SettingsItem>
+        <SettingsItem title="Change minute text minute colour" subtitle="">
+          <div className="colourInput">
+            <input
+              type="color"
+              name="minuteColour"
+              className="minuteColour"
+              onChange={(event) => this.updateMinuteColour(event)}
+              value={this.state.minuteColour}
+            ></input>
+            <label htmlFor={'minuteColour'} className="customBackgroundHex">
+              {this.state.minuteColour}
+            </label>
+          </div>
+          <span className="link" onClick={() => this.resetMinuteColour()}>
+            {getMessage('modals.main.settings.buttons.reset')}
+          </span>
+        </SettingsItem>
+        {digitalSettings}
       </>
     );
 

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

@@ -3,14 +3,14 @@ import { MdPerson } from 'react-icons/md';
 export default function QuoteSkeleton() {
   return (
     <div className="quoteSkeleton">
-      <span className="subtitle">"Cheese good"</span>
+      <span className="subtitle">"Never gonna give you up"</span>
         <div className="skeletonAuthor">
           <div>
             <MdPerson />
           </div>
           <div className="text">
-            <span className="title">James May</span>
-            <span className="subtitle">Cheese Man</span>
+            <span className="title">Rick Astley</span>
+            <span className="subtitle">Music Genius</span>
           </div>
         </div>
     </div>