style: clock period (#601)

* style: tweaks to studio override

* style: improvements to 12 hour format

apps/client/src/features/viewers/countdown/Countdown.scss

@@ -68,6 +68,7 @@
         font-size: clamp(32px, 3.5vw, 50px);
         color: var(--secondary-color-override, $viewer-secondary-color);
         letter-spacing: 0.05em;
+        line-height: 0.95em;
       }
     }
 
@@ -135,6 +136,7 @@
           font-size: clamp(32px, 3.5vw, 50px);
           color: var(--secondary-color-override, $viewer-secondary-color);
           letter-spacing: 0.05em;
+          line-height: 0.95em;
 
           &--delayed {
             color: $delay-color;

apps/client/src/features/viewers/countdown/Countdown.tsx

@@ -11,6 +11,7 @@ import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import { formatTime } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
+import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 
 import { fetchTimerData, TimerMessage } from './countdown.helpers';
 import CountdownSelect from './CountdownSelect';
@@ -118,26 +119,27 @@ export default function Countdown(props: CountdownProps) {
         <div className='countdown-container' data-testid='countdown-event'>
           <div className='clock-container'>
             <div className='label'>{getLocalizedString('common.time_now')}</div>
-            <div className='time'>{clock}</div>
+            <SuperscriptTime time={clock} className='time' />
           </div>
 
           {runningMessage !== TimerMessage.unhandled && (
             <div className='status'>{getLocalizedString(`countdown.${runningMessage}`)}</div>
           )}
 
-          <span className={`timer ${standby ? 'timer--paused' : ''} ${isRunningFinished ? 'timer--finished' : ''}`}>
-            {formattedTimer}
-          </span>
+          <SuperscriptTime
+            time={formattedTimer}
+            className={`timer ${standby ? 'timer--paused' : ''} ${isRunningFinished ? 'timer--finished' : ''}`}
+          />
           <div className='title'>{follow?.title || 'Untitled Event'}</div>
 
           <div className='timer-group'>
             <div className='aux-timers'>
               <div className='aux-timers__label'>{getLocalizedString('common.start_time')}</div>
-              <span className={`aux-timers__value ${delayedTimerStyles}`}>{startTime}</span>
+              <SuperscriptTime time={startTime} className={`aux-timers__value ${delayedTimerStyles}`} />
             </div>
             <div className='aux-timers'>
               <div className='aux-timers__label'>{getLocalizedString('common.end_time')}</div>
-              <span className={`aux-timers__value ${delayedTimerStyles}`}>{endTime}</span>
+              <SuperscriptTime time={endTime} className={`aux-timers__value ${delayedTimerStyles}`} />
             </div>
           </div>
         </div>

apps/client/src/features/viewers/countdown/CountdownSelect.tsx

@@ -9,6 +9,10 @@ import { sanitiseTitle } from './countdown.helpers';
 
 import './Countdown.scss';
 
+const formatOptions = {
+  format: 'hh:mm a',
+};
+
 interface CountdownSelectProps {
   events: OntimeRundownEntry[];
 }
@@ -31,8 +35,8 @@ export default function CountdownSelect(props: CountdownSelectProps) {
           filteredEvents.map((event: OntimeEvent, counter: number) => {
             const index = counter + 1;
             const title = sanitiseTitle(event.title);
-            const start = formatTime(event.timeStart, { format: 'hh:mm' });
-            const end = formatTime(event.timeEnd, { format: 'hh:mm' });
+            const start = formatTime(event.timeStart, formatOptions);
+            const end = formatTime(event.timeEnd, formatOptions);
 
             return (
               <li key={event.id}>