feat: vertical clock

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

@@ -17,9 +17,16 @@ export default class TimeSettings extends PureComponent {
     super();
     this.state = {
       timeType: localStorage.getItem('timeType') || 'digital',
+      colour: localStorage.getItem('minuteColour') || '#ffa500',
     };
   }
 
+  updateColour(event) {
+    const colour = event.target.value;
+    this.setState({ colour });
+    localStorage.setItem('minuteColour', colour);
+  }
+
   render() {
     const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
@@ -93,10 +100,35 @@ export default class TimeSettings extends PureComponent {
       </SettingsItem>
     );
 
+    const modernClock = (
+      <>
+      <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}
+      </>
+    );
+
     if (this.state.timeType === 'digital') {
       timeSettings = digitalSettings;
     } else if (this.state.timeType === 'analogue') {
       timeSettings = analogSettings;
+    } else if (this.state.timeType === 'modernClock') {
+      timeSettings = modernClock;
     }
 
     return (
@@ -128,9 +160,7 @@ export default class TimeSettings extends PureComponent {
             <option value="percentageComplete">
               {getMessage('modals.main.settings.sections.time.percentage_complete')}
             </option>
-            <option value="modernClock">
-              Modern Clock
-            </option>
+            <option value="modernClock">Modern Clock</option>
           </Dropdown>
         </SettingsItem>
         {timeSettings}

src/components/widgets/time/Clock.jsx

@@ -21,6 +21,7 @@ export default class Clock extends PureComponent {
       finalSeconds: '',
       ampm: '',
       nowGlobal: new Date(),
+      minuteColour: localStorage.getItem('minuteColour'),
     };
   }
 
@@ -193,14 +194,10 @@ export default class Clock extends PureComponent {
     if (localStorage.getItem('timeType') === 'modernClock') {
       clockHTML = (
         <>
-          <span className="clock clock-container">
-            {this.state.time}
-            <span className="ampm">{this.state.ampm}</span>
-          </span>
-          <span className="new-clock clock">
+          <span className="new-clock clock-container">
             {' '}
             <div className="hour">{this.state.finalHour}</div>{' '}
-            <div className="minute">{this.state.finalMinute}</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

@@ -81,3 +81,7 @@
     @include basicIconButton(5px, 11px, ui);
   }
 }
+
+.new-clock {
+  line-height: 100%;
+}