temp: debug statements for testing

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

src/features/time/Clock.jsx

@@ -58,12 +58,12 @@ export default class Clock extends PureComponent {
 
           if (localStorage.getItem('seconds') === 'true') {
             sec = `:${('00' + now.getSeconds()).slice(-2)}`;
-            this.setState({ finalSeconds: `:${('00' + now.getSeconds()).slice(-2)}` });
+            this.setState({ finalSeconds: `${('00' + now.getSeconds()).slice(-2)}` });
           }
 
           if (localStorage.getItem('timeformat') === 'twentyfourhour') {
             if (zero === 'false') {
-              time = `${now.getHours()}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+              time = `${now.getHours()}:${('00' + now.getMinutes()).slice(-2)}:${sec}`;
               this.setState({
                 finalHour: `${now.getHours()}`,
                 finalMinute: `${('00' + now.getMinutes()).slice(-2)}`,

src/features/time/clock.scss

@@ -56,7 +56,8 @@
   font-size: 4em;
 
   .seconds {
-    font-size: 0.2em;
+    font-size: 7rem;
+    margin: 50px;
     line-height: 0;
   }
 }

src/features/time/components/AnalogClock.jsx

@@ -1,10 +1,12 @@
 import { Suspense, lazy } from 'react';
+
 const Analog = lazy(() => import('react-clock'));
 
 function AnalogClock({ time }) {
   const enabled = (setting) => {
     return localStorage.getItem(setting) === 'true';
   };
+
   return (
     <Suspense fallback={<></>}>
       <div className={`clockBackground ${enabled('roundClock') ? 'round' : ''}`}>

src/features/time/components/VerticalClock.jsx

@@ -1,6 +1,7 @@
 function VerticalClock({ finalHour, finalMinute, finalSeconds }) {
   const hourColour = localStorage.getItem('hourColour') || '#fff';
-  const minuteColour = localStorage.getItem('minuteColour') || '#ƒff';
+  const minuteColour = localStorage.getItem('minuteColour') || '#fff';
+  const secondColour = localStorage.getItem('secondColour') || '#fff';
 
   return (
     <span className="vertical-clock clock-container">
@@ -10,7 +11,9 @@ function VerticalClock({ finalHour, finalMinute, finalSeconds }) {
       <div className="minute" style={{ color: minuteColour }}>
         {finalMinute}
       </div>
-      <div className="seconds">{finalSeconds}</div>
+      <div className="seconds" style={{ color: secondColour }}>
+        {finalSeconds}
+      </div>
     </span>
   );
 }

src/features/time/options/TimeOptions.jsx

@@ -12,6 +12,9 @@ const TimeOptions = () => {
   const [minuteColour, setMinuteColour] = useState(
     localStorage.getItem('minuteColour') || '#ffffff',
   );
+  const [secondColour, setSecondColour] = useState(
+    localStorage.getItem('secondColour') || '#ffffff',
+  );
   const TIME_SECTION = 'modals.main.settings.sections.time';
 
   const updateColour = (type, event) => {
@@ -20,6 +23,8 @@ const TimeOptions = () => {
       setHourColour(colour);
     } else if (type === 'minuteColour') {
       setMinuteColour(colour);
+    } else if (type === 'secondColour') {
+      setSecondColour(colour);
     }
     localStorage.setItem(type, colour);
   };
@@ -183,6 +188,32 @@ const TimeOptions = () => {
           </span>
         </Action>
       </Row>
+      <Row>
+        <Content
+          title={variables.getMessage(
+            'modals.main.settings.sections.time.vertical_clock.change_second_colour',
+          )}
+        />
+        <Action>
+          <div className="colourInput">
+            <input
+              type="color"
+              name="secondColour"
+              className="secondColour"
+              onChange={(event) => updateColour('secondColour', event)}
+              value={secondColour}
+            ></input>
+            <label htmlFor={'secondColour'} className="customBackgroundHex">
+              {secondColour}
+            </label>
+          </div>
+          <span className="link" onClick={() => localStorage.setItem('secondColour', '#ffffff')}>
+            <MdRefresh />
+            {variables.getMessage('modals.main.settings.buttons.reset')}
+          </span>
+        </Action>
+      </Row>
+      
       {digitalSettings}
     </>
   );