style: alpha4 style tweaks (#299)

apps/client/src/common/components/input/text-input/TextInput.tsx

@@ -6,7 +6,7 @@ import { Size } from '../../../models/Util.type';
 
 import useReactiveTextInput from './useReactiveTextInput';
 
-interface TextInputProps {
+interface BaseProps {
   isTextArea?: boolean;
   isFullHeight?: boolean;
   size?: Size;
@@ -15,13 +15,18 @@ interface TextInputProps {
   submitHandler: (field: EventEditorSubmitActions, newValue: string) => void;
 }
 
+interface TextAreaProps {
+  isTextArea: true;
+  resize?: 'horizontal' | 'vertical' | 'none';
+}
+
+type TextInputProps = BaseProps & TextAreaProps;
+
 export default function TextInput(props: TextInputProps) {
-  const { isTextArea, isFullHeight, size = 'sm', field, initialText = '', submitHandler } = props;
+  const { isTextArea, isFullHeight, size = 'sm', field, initialText = '', submitHandler, resize = 'none' } = props;
   const inputRef = useRef(null);
 
-  const submitCallback = useCallback((newValue: string) =>
+  const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
-      submitHandler(field, newValue)
-    ,[field, submitHandler]);
 
   const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
   const textAreaProps = useReactiveTextInput(initialText, submitCallback);
@@ -30,18 +35,13 @@ export default function TextInput(props: TextInputProps) {
     <Textarea
       ref={inputRef}
       size={size}
+      resize='none'
       variant='ontime-filled'
       {...textAreaProps}
       style={{ height: isFullHeight ? '100%' : undefined }}
       data-testid='input-textarea'
     />
   ) : (
-    <Input
+    <Input ref={inputRef} size={size} variant='ontime-filled' {...textInputProps} data-testid='input-textfield' />
-      ref={inputRef}
-      size={size}
-      variant='ontime-filled'
-      {...textInputProps}
-      data-testid='input-textfield'
-    />
   );
 }

apps/client/src/features/control/playback/PlaybackControl.module.scss

@@ -38,12 +38,13 @@
 .indRoll,
 .indDelay,
 .indNegative {
-  background-color: $gray-1300;
+  background-color: $gray-1350;
 }
 
 .indRoll,
 .indRollActive,
-.indDelay {
+.indDelay,
+.indDelayActive {
   margin: 0 auto;
   border-radius: 6px;
   width: 12px;

apps/client/src/features/control/playback/PlaybackTimer.tsx

@@ -3,6 +3,7 @@ import { Playback } from 'ontime-types';
 
 import TimerDisplay from '../../../common/components/timer-display/TimerDisplay';
 import { setPlayback, useTimer } from '../../../common/hooks/useSocket';
+import { millisToMinutes } from '../../../common/utils/dateConfig';
 import { stringFromMillis } from '../../../common/utils/time';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
@@ -26,15 +27,21 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
   const isWaiting = timerData.secondaryTimer !== null && timerData.secondaryTimer > 0 && timerData.current === null;
   const disableButtons = selectedId === null || isRolling;
   const isOvertime = timerData.current !== null && timerData.current < 0;
+  const hasAddedTime = Boolean(timerData.addedTime);
+
+  const rollLabel = isRolling ? 'Roll mode active' : '';
+  const addedTimeLabel = hasAddedTime ? `Added ${millisToMinutes(timerData.addedTime)} minutes` : '';
 
   return (
     <div className={style.timeContainer}>
       <div className={style.indicators}>
-        <Tooltip label='Roll mode active'>
+        <Tooltip label={rollLabel}>
           <div className={isRolling ? style.indRollActive : style.indRoll} />
         </Tooltip>
         <div className={isOvertime ? style.indNegativeActive : style.indNegative} />
-        <div className={style.indDelay} />
+        <Tooltip label={addedTimeLabel}>
+          <div className={hasAddedTime ? style.indDelayActive : style.indDelay} />
+        </Tooltip>
       </div>
       <div className={style.timer}>
         <TimerDisplay time={isWaiting ? timerData.secondaryTimer : timerData.current} small />

apps/client/src/features/editors/Editor.module.scss

@@ -11,6 +11,11 @@ $playback-width: 450px;
   right: $distance;
   cursor: pointer;
   color: $ui-white;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+  &:hover {
+    color: $ontime-color;
+  }
 }
 
 .corner {

apps/client/src/features/event-editor/EventEditor.module.scss

@@ -21,6 +21,10 @@
 
 .eventInfo {
   grid-area: eventInfo;
+  .eventId {
+    margin-left: $element-inner-spacing;
+    user-select: text;
+  }
 }
 
 .eventActions {

apps/client/src/features/event-editor/EventEditor.tsx

@@ -119,7 +119,10 @@ export default function EventEditor() {
 
   return (
     <div className={style.eventEditor}>
-      <div className={style.eventInfo}>{`Event ID ${event.id}`}</div>
+      <div className={style.eventInfo}>
+        Event ID
+        <span className={style.eventId}>{event.id}</span>
+      </div>
       <div className={style.eventActions}>
         <CopyTag label='OSC trigger'>{`/ontime/gotoid/${event.id}`}</CopyTag>
       </div>

apps/client/src/features/info/Info.module.scss

@@ -38,6 +38,7 @@
 
   .interface {
     @include action-link;
+    font-size: $inner-section-text-size;
     white-space: nowrap;
   }
 

apps/client/src/features/info/InfoNif.tsx

@@ -18,19 +18,11 @@ export default function InfoNif() {
 
   return (
     <div className={style.container}>
-      <CollapseBar
+      <CollapseBar title='Network Info' isCollapsed={collapsed} onClick={() => setCollapsed((prev) => !prev)} />
-        title='Network Info'
-        isCollapsed={collapsed}
-        onClick={() => setCollapsed((prev) => !prev)}
-      />
       {!collapsed && (
         <div className={style.interfaceList}>
           {data?.networkInterfaces.map((nif) => (
-            <span
+            <span key={nif.address} onClick={() => handleClick(nif.address)} className={style.interface}>
-              key={nif.address}
-              onClick={() => handleClick(nif.address)}
-              className={style.interface}
-            >
               {`${nif.name} - ${nif.address}`}
               <IoArrowUp className={style.linkIcon} />
             </span>

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -163,6 +163,6 @@
   }
 
   .statusIcon.active {
-    color: $active-indicator;
+    color: $ui-white;
   }
 }

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -152,9 +152,7 @@ export default function Backstage(props) {
       </div>
 
       <div className='info'>
-        <div className='qr'>
+        {general.backstageUrl && <QRCode value={general.backstageUrl} size={qrSize} level='L' className='qr' />}
-          {general.backstageUrl && <QRCode value={general.backstageUrl} size={qrSize} level='L' />}
-        </div>
         {general.backstageInfo && <div className='info__message'>{general.backstageInfo}</div>}
       </div>
     </div>

apps/client/src/features/viewers/public/Public.scss

@@ -99,6 +99,7 @@
     grid-area: info;
     display: flex;
     gap: max(1vw, 16px);
+    min-height: max(calc(100vh / 15), 128px);
 
     &__message {
       font-size: clamp(16px, 1.5vw, 24px);

apps/client/src/features/viewers/public/Public.tsx

@@ -116,7 +116,7 @@ export default function Public(props) {
       </div>
 
       <div className='info'>
-        <div className='qr'>{general.publicUrl && <QRCode value={general.publicUrl} size={qrSize} level='L' />}</div>
+        {general.publicUrl && <QRCode value={general.publicUrl} size={qrSize} level='L' className='qr' />}
         {general.publicInfo && <div className='info__message'>{general.publicInfo}</div>}
       </div>
     </div>

apps/client/src/features/viewers/timer/Timer.scss

@@ -75,7 +75,7 @@
 
     .end-message {
       text-align: center;
-      font-size: 12vw;
+      font-size: 11.5vw;
       line-height: 0.9em;
       font-weight: 600;
       color: $timer-finished-color;

apps/client/src/features/viewers/timer/Timer.tsx

@@ -65,14 +65,10 @@ export default function Timer(props) {
   const showProgress = time.playback !== 'stop';
   const baseClasses = `stage-timer ${isMirrored ? 'mirror' : ''}`;
 
- return (
+  return (
-    <div
+    <div className={time.finished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
-      className={time.finished ? `${baseClasses} stage-timer--finished` : baseClasses}
-      data-testid='timer-view'
-    >
       <NavigationMenu />
-      <div
+      <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
-        className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
         <div className='message'>{pres.text}</div>
       </div>
 
@@ -84,31 +80,22 @@ export default function Timer(props) {
       <div className='timer-container'>
         {time.finished ? (
           <div className='end-message'>
-            {!general.endMessage ? (
+            {!general.endMessage ? <TimerDisplay time={time.current} hideZeroHours /> : general.endMessage}
-              <TimerDisplay time={time.current} hideZeroHours />
-            ) : (
-              general.endMessage
-            )}
           </div>
         ) : (
-          <TimerDisplay
+          <TimerDisplay time={normalisedTime} hideZeroHours className={isPlaying ? 'timer' : 'timer--paused'} />
-            time={normalisedTime}
-            hideZeroHours
-            className={isPlaying ? 'timer' : 'timer--paused'} />
         )}
       </div>
 
       <ProgressBar
-        className={
+        className={isPlaying ? 'progress-container' : 'progress-container progress-container--paused'}
-          isPlaying ? 'progress-container' : 'progress-container progress-container--paused'
-        }
         now={time.current}
         complete={time.duration}
         hidden={!showProgress}
       />
 
       <AnimatePresence>
-        {title.showNow && (
+        {title.showNow && !time.finished && (
           <motion.div
             className='event now'
             key='now'
@@ -117,12 +104,7 @@ export default function Timer(props) {
             animate='visible'
             exit='exit'
           >
-            <TitleCard
+            <TitleCard label='now' title={title.titleNow} subtitle={title.subtitleNow} presenter={title.presenterNow} />
-              label='now'
-              title={title.titleNow}
-              subtitle={title.subtitleNow}
-              presenter={title.presenterNow}
-            />
           </motion.div>
         )}
       </AnimatePresence>

apps/client/src/theme/_ontimeColours.scss

@@ -7,6 +7,8 @@ $white-9: rgba(255, 255, 255, 0.09);
 $white-10: rgba(255, 255, 255, 0.10);
 $white-13: rgba(255, 255, 255, 0.13);
 
+$black-10: rgba(0, 0, 0, 0.10);
+
 $gray-50: #f6f6f6;
 $gray-100: #ececec;
 $gray-200: #e2e2e2;