feat: analog time settings

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

@@ -19,6 +19,11 @@ export default class TimeSettings extends React.PureComponent {
     });
   }
 
+  componentDidMount() {
+    document.getElementById('dateformat').value = localStorage.getItem('dateFormat');
+    document.getElementById('timeType').value = localStorage.getItem('timeType');
+  }
+
   render() {
     let digitalSettings = (
       <React.Fragment>
@@ -28,10 +33,23 @@ export default class TimeSettings extends React.PureComponent {
         <Checkbox name='ampm' text={this.props.language.ampm} />
         <Checkbox name='zero' text={this.props.language.zero} />
       </React.Fragment>
-    )
+    );
 
-    if (this.state.timeType !== 'digital') {
-      digitalSettings = null;
+    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' />
+      </React.Fragment>
+    );
+
+    switch (this.state.timeType) {
+      case 'digital': break;
+      case 'analogue': digitalSettings = analogSettings; break;
+      default: digitalSettings = null; break;
     }
 
     return (

src/components/widgets/time/Clock.jsx

@@ -97,8 +97,22 @@ export default class Clock extends React.PureComponent {
   render() {
     let clockHTML = <h1 className='clock'>{this.state.time}<span className='ampm'>{this.state.ampm}</span></h1>;
 
+    const checkValue = (setting) => {
+      return (localStorage.getItem(setting) === 'true');
+    }
+
     if (localStorage.getItem('timeType') === 'analogue') {
-      clockHTML = <Analog className='analogclock' value={this.state.time} renderHourMarks={false} renderMinuteMarks={false} />;
+      clockHTML = (
+        <Analog 
+          className='analogclock' 
+          value={this.state.time} 
+          renderHourMarks={checkValue('hourMarks')} 
+          renderMinuteMarks={checkValue('minuteMarks')} 
+          renderSecondHand={checkValue('secondHand')} 
+          renderMinuteHand={checkValue('minuteHand')} 
+          renderHourHand={checkValue('hourHand')} 
+        />
+      );
     }
 
     return clockHTML;

src/components/widgets/time/clock.scss

@@ -18,7 +18,7 @@
   border: 1px solid map-get($theme-colours, 'main') !important;
 }
 
-.react-clock__hand__body {
+.react-clock__hand__body, .react-clock__mark__body {
   background: map-get($theme-colours, 'main') !important;
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }