fix: error boundary bugs and some translation issues with modal

src/components/ErrorBoundary.jsx

@@ -10,16 +10,18 @@ export default class ErrorBoundary extends React.PureComponent {
 
   static getDerivedStateFromError(error) {
     console.log(error);
-    return { error: true };
+    return { 
+      error: true 
+    };
   }
 
   render() {
     if (this.state.error) {
       return (
-        <div style={{'text-align': 'center'}}>
+        <div style={{'textAlign': 'center'}}>
           <h1>Error</h1>
           <p>Failed to load this component of Mue.</p>
-          <button class='refresh' onClick={() => window.location.reload()}>Refresh</button>
+          <button className='refresh' onClick={() => window.location.reload()}>Refresh</button>
         </div>
       )
     }

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

@@ -19,10 +19,10 @@ export default class About extends React.PureComponent {
     const contributors = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
     const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
 
-    let updateMsg = 'No update available';
+    let updateMsg = this.props.language.version.no_update;
     let version = versionData[0].tag_name;
     if (version !== '5.0' && version !== '4.1') {
-      updateMsg = 'Update available: ' + version;
+      updateMsg = `${this.props.language.version.update_available}: ${version}`;
     }
 
     // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK
@@ -39,14 +39,14 @@ export default class About extends React.PureComponent {
   render() {
     return (
       <div>
-        <h2>About</h2>
+        <h2>{this.props.language.title}</h2>
         <img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
-        <p>Copyright 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
-        <p>Version {Constants.VERSION} ({this.state.update})</p>
-        <h3>Resources Used</h3>
-        <p>Pexels (Background Images)</p>
-        <p>Google (Pin Icon)</p>
-        <h3>Contributors</h3>
+        <p>{this.props.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
+        <p>{this.props.language.version.title} {Constants.VERSION} ({this.state.update})</p>
+        <h3>{this.props.language.resources_used.title}</h3>
+        <p>Pexels ({this.props.language.resources_used.bg_images})</p>
+        <p>Google ({this.props.language.resources_used.pin_icon})</p>
+        <h3>{this.props.language.contributors}</h3>
         {this.state.contributors.map((item) =>
           <Tooltip title={item.login} placement='top' key={item.login}>
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
@@ -58,7 +58,7 @@ export default class About extends React.PureComponent {
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
           </Tooltip>
         )}
-        <h3>Supporters</h3>
+        <h3>{this.props.language.supporters}</h3>
         <p>to be implemented</p>
       </div>
     );

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

@@ -27,22 +27,22 @@ export default class TimeSettings extends React.PureComponent {
   render() {
     let digitalSettings = (
       <React.Fragment>
-        <h3>Digital</h3>
-        <Checkbox name='seconds' text={this.props.language.seconds} />
-        <Checkbox name='24hour' text={this.props.language.twentyfourhour} />
-        <Checkbox name='ampm' text={this.props.language.ampm} />
-        <Checkbox name='zero' text={this.props.language.zero} />
+        <h3>{this.props.language.digital.title}</h3>
+        <Checkbox name='seconds' text={this.props.language.digital.seconds} />
+        <Checkbox name='24hour' text={this.props.language.digital.twentyfourhour} />
+        <Checkbox name='ampm' text={this.props.language.digital.ampm} />
+        <Checkbox name='zero' text={this.props.language.digital.zero} />
       </React.Fragment>
     );
 
     let analogSettings = (
       <React.Fragment>
-        <h3>Analog</h3>
-        <Checkbox name='secondHand' text='Seconds Hand' />
-        <Checkbox name='minuteHand' text='Minutes Hand' />
-        <Checkbox name='hourHand' text='Hours Hand' />
-        <Checkbox name='hourMarks' text='Hour Marks' />
-        <Checkbox name='minuteMarks' text='Minute Marks' />
+        <h3>{this.props.language.analogue.title}</h3>
+        <Checkbox name='secondHand' text={this.props.language.analogue.second_hand} />
+        <Checkbox name='minuteHand' text={this.props.language.analogue.minute_hand} />
+        <Checkbox name='hourHand' text={this.props.language.analogue.hour_hand} />
+        <Checkbox name='hourMarks' text={this.props.language.analogue.hour_marks} />
+        <Checkbox name='minuteMarks' text={this.props.language.analogue.minute_marks} />
       </React.Fragment>
     );
 
@@ -57,9 +57,9 @@ export default class TimeSettings extends React.PureComponent {
         <h2>{this.props.language.title}</h2>
         <Checkbox name='time' text='Enabled' />
         <Dropdown label='Type' name='timeType' id='timeType' onChange={() => this.changeType()}>
-          <option className='choices' value='digital'>Digital</option>
-          <option className='choices' value='analogue'>Analog</option>
-          <option className='choices' value='percentageComplete'>Percentage of Day</option>
+          <option className='choices' value='digital'>{this.props.language.digital.title}</option>
+          <option className='choices' value='analogue'>{this.props.language.analogue.title}</option>
+          <option className='choices' value='percentageComplete'>{this.props.language.percentage_complete}</option>
         </Dropdown>
         {digitalSettings}
         <h3>{this.props.language.date.title}</h3>

src/components/modals/tabs/Settings.jsx

@@ -47,7 +47,7 @@ export default function Settings (props) {
           <About/>
         </div>
         <div label={props.language.sections.about.title}>
-          <About/>
+          <About language={props.language.sections.about}/>
         </div>
       </SettingsTabs>
     </React.Fragment>

src/scss/modules/modals/_main.scss

@@ -323,4 +323,4 @@ li {
   height: auto;
   border-radius: 50%;
   padding-right: 5px;
-}
+}

src/translations/en-GB.json

@@ -37,12 +37,22 @@
         "sections": {
           "time": {
             "title": "Time",
-            "seconds": "Seconds",
-            "twentyfourhour": "24 Hour",
-            "ampm": "AM/PM (12 hour)",
-            "zero": "Zero-padded",
-            "analog": "Analog",
-            "percentageComplete": "Percentage of the Day Complete",
+            "digital": {
+              "title": "Digital",
+              "seconds": "Seconds",
+              "twentyfourhour": "24 Hour",
+              "ampm": "AM/PM (12 hour)",
+              "zero": "Zero-padded"
+            },
+            "analogue": {
+              "title": "Analogue",
+              "second_hand": "Seconds Hand",
+              "minute_hand": "Minutes Hand",
+              "hour_hand": "Hours Hand",
+              "hour_marks": "Hour Marks",
+              "minute_marks": "Minute Marks"
+            },
+            "percentage_complete": "Percentage of the Day Complete",
             "date": {
               "title": "Date",
               "short_date": "Short Date",
@@ -94,21 +104,19 @@
           "changelog": "Change Log",
           "about": {
             "title": "About",
-            "about": {
-              "copyright": "Copyright",
-              "version": {
-                "title": "Version",
-                "update_available": "Update available",
-                "no_update": "No update available"
-              },
-              "resources_used": {
-                "title": "Resources Used",
-                "bg_images": "Background Images",
-                "pin_icon": "Pin Icon"
-              },
-              "contributors": "Contributors",
-              "supporters": "Supporters"
-            }
+            "copyright": "Copyright",
+            "version": {
+              "title": "Version",
+              "update_available": "Update available",
+              "no_update": "No update available"
+            },
+            "resources_used": {
+              "title": "Resources Used",
+              "bg_images": "Background Images",
+              "pin_icon": "Pin Icon"
+            },
+            "contributors": "Contributors",
+            "supporters": "Supporters"
           }
         },
         "buttons": {

src/translations/en-US.json

@@ -10,6 +10,11 @@
             "custom_colour": "Custom Background Color",
             "add_colour": "Add color",
             "favourite": "Favorite"
+          },
+          "time": {
+            "analogue": {
+              "title": "Analog"
+            }
           }
         }
       }