refactor: consolidate event editor styles

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -5,6 +5,7 @@ import { millisToString, parseUserTime } from 'ontime-utils';
 import { useEmitLog } from '../../../stores/logger';
 
 interface TimeInputProps<T extends string> {
+  id?: T;
   name: T;
   submitHandler: (field: T, value: string) => void;
   time?: number;
@@ -15,7 +16,7 @@ interface TimeInputProps<T extends string> {
 }
 
 export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
-  const { name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
+  const { id, name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
   const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
@@ -117,6 +118,7 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
 
   return (
     <Input
+      id={id}
       disabled={disabled}
       size='sm'
       ref={inputRef}

apps/client/src/features/editors/editor-utils/EditorUtils.module.scss

@@ -20,3 +20,20 @@
     outline: 2px solid $gray-1000;
   }
 }
+
+.header {
+  font-size: 1.5rem;
+}
+
+.title {
+  font-size: 1rem;
+  color: $label-gray;
+}
+
+.label {
+  display: block;
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+  margin-bottom: 0.25rem;
+  max-width: max-content; // prevent label from taking entire row
+}

apps/client/src/features/editors/editor-utils/EditorUtils.tsx

@@ -1,3 +1,4 @@
+import type { LabelHTMLAttributes, ReactNode } from 'react';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { type IconBaseProps } from '@react-icons/all-files/lib';
 
@@ -8,3 +9,16 @@ import style from './EditorUtils.module.scss';
 export function Corner({ className, ...elementProps }: IconBaseProps) {
   return <IoArrowUp className={cx([style.corner, className])} {...elementProps} />;
 }
+
+export function Title({ children }: { children: ReactNode }) {
+  return <h3 className={style.title}>{children}</h3>;
+}
+
+export function Label({ children, className, ...elementProps }: LabelHTMLAttributes<HTMLLabelElement>) {
+  const classes = cx([style.label, className]);
+  return (
+    <label className={classes} {...elementProps}>
+      {children}
+    </label>
+  );
+}

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

@@ -40,13 +40,6 @@
   gap: 1rem;
 }
 
-.inputLabel {
-  display: block;
-  font-size: calc(1rem - 3px);
-  color: $label-gray;
-  margin-bottom: 0.25rem;
-}
-
 .decorated {
   color: var(--decorator-color, $ui-white);
   background-color: var(--decorator-bg, $gray-1100);
@@ -58,7 +51,6 @@
 .delayLabel {
   font-size: calc(1rem - 3px);
   color: $ontime-delay-text;
-  margin-top: 0.25rem;
 
   &::after {
     content: '\200b';
@@ -66,8 +58,6 @@
 }
 
 .switchLabel {
-  font-size: calc(1rem - 3px);
-  color: $label-gray;
   display: flex;
   align-items: center;
   gap: 0.5rem;

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

@@ -8,6 +8,7 @@ import { useEventAction } from '../../../common/hooks/useEventAction';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import useRundown from '../../../common/hooks-query/useRundown';
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
+import * as Editor from '../../editors/editor-utils/EditorUtils';
 import { useEventSelection } from '../useEventSelection';
 
 import EventEditorTimes from './composite/EventEditorTimes';
@@ -100,7 +101,7 @@ export default function EventEditor() {
         />
         <div className={style.column}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <span>Custom Fields</span>
+            <Editor.Title>Custom Fields</Editor.Title>
             <Button variant='ontime-subtle' size='sm' onClick={handleOpenCustomManager}>
               Manage
             </Button>

apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx

@@ -6,6 +6,7 @@ import { millisToString, parseUserTime } from 'ontime-utils';
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
 import { useEventAction } from '../../../../common/hooks/useEventAction';
 import { millisToDelayString } from '../../../../common/utils/dateConfig';
+import * as Editor from '../../../editors/editor-utils/EditorUtils';
 import TimeInputFlow from '../../time-input-flow/TimeInputFlow';
 
 import style from '../EventEditor.module.scss';
@@ -72,7 +73,7 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
   return (
     <div className={style.column}>
       <div>
-        <div className={style.inputLabel}>Event schedule</div>
+        <Editor.Label>Event schedule</Editor.Label>
         <div className={style.inline}>
           <TimeInputFlow
             eventId={eventId}
@@ -90,15 +91,20 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
 
       <div className={style.splitTwo}>
         <div>
-          <label className={style.inputLabel} htmlFor='timeWarning'>
+          <Editor.Label htmlFor='timeWarning'>Warning Time</Editor.Label>
-            Warning Time
+          <TimeInput
-          </label>
+            id='timeWarning'
-          <TimeInput name='timeWarning' submitHandler={handleSubmit} time={timeWarning} placeholder='Duration' />
+            name='timeWarning'
+            submitHandler={handleSubmit}
+            time={timeWarning}
+            placeholder='Duration'
+          />
         </div>
         <div>
-          <label className={style.inputLabel}>Timer Type</label>
+          <Editor.Label htmlFor='timerType'>Timer Type</Editor.Label>
           <Select
             size='sm'
+            id='timerType'
             name='timerType'
             value={timerType}
             onChange={(event) => handleSubmit('timerType', event.target.value)}
@@ -112,14 +118,19 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
           </Select>
         </div>
         <div>
-          <label className={style.inputLabel} htmlFor='timeDanger'>
+          <Editor.Label htmlFor='timeDanger'>Danger Time</Editor.Label>
-            Danger Time
+          <TimeInput
-          </label>
+            id='timeDanger'
-          <TimeInput name='timeDanger' submitHandler={handleSubmit} time={timeDanger} placeholder='Duration' />
+            name='timeDanger'
+            submitHandler={handleSubmit}
+            time={timeDanger}
+            placeholder='Duration'
+          />
         </div>
         <div>
-          <label className={style.inputLabel}>End Action</label>
+          <Editor.Label htmlFor='endAction'>End Action</Editor.Label>
           <Select
+            id='endAction'
             size='sm'
             name='endAction'
             value={endAction}
@@ -135,11 +146,17 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
       </div>
 
       <div>
-        <span className={style.inputLabel}>Event Visibility</span>
+        <Editor.Label htmlFor='isPublic'>Event Visibility</Editor.Label>
-        <label className={style.switchLabel}>
+        <Editor.Label className={style.switchLabel}>
-          <Switch size='md' isChecked={isPublic} onChange={() => handleSubmit('isPublic', isPublic)} variant='ontime' />
+          <Switch
+            id='isPublic'
+            size='md'
+            isChecked={isPublic}
+            onChange={() => handleSubmit('isPublic', isPublic)}
+            variant='ontime'
+          />
           {isPublic ? 'Public' : 'Private'}
-        </label>
+        </Editor.Label>
       </div>
     </div>
   );

apps/client/src/features/rundown/event-editor/composite/EventEditorTitles.tsx

@@ -3,6 +3,7 @@ import { Input } from '@chakra-ui/react';
 import { sanitiseCue } from 'ontime-utils';
 
 import SwatchSelect from '../../../../common/components/input/colour-input/SwatchSelect';
+import * as Editor from '../../../editors/editor-utils/EditorUtils';
 import { type EditorUpdateFields } from '../EventEditor';
 
 import EventTextArea from './EventTextArea';
@@ -30,9 +31,7 @@ const EventEditorTitles = (props: EventEditorTitlesProps) => {
     <div className={style.column}>
       <div className={style.splitTwo}>
         <div>
-          <label className={style.inputLabel} htmlFor='eventId'>
+          <Editor.Label htmlFor='eventId'>Event ID (read only)</Editor.Label>
-            Event ID (read only)
-          </label>
           <Input
             id='eventId'
             size='sm'
@@ -45,7 +44,7 @@ const EventEditorTitles = (props: EventEditorTitlesProps) => {
         <EventTextInput field='cue' label='Cue' initialValue={cue} submitHandler={cueSubmitHandler} maxLength={10} />
       </div>
       <div>
-        <label className={style.inputLabel}>Colour</label>
+        <Editor.Label>Colour</Editor.Label>
         <SwatchSelect name='colour' value={colour} handleChange={handleSubmit} />
       </div>
       <EventTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />

apps/client/src/features/rundown/event-editor/composite/EventTextArea.tsx

@@ -1,12 +1,10 @@
-import { CSSProperties, useCallback, useRef } from 'react';
+import { type CSSProperties, useCallback, useRef } from 'react';
 
 import { AutoTextArea } from '../../../../common/components/input/auto-text-area/AutoTextArea';
 import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
-import { cx } from '../../../../common/utils/styleUtils';
+import * as Editor from '../../../editors/editor-utils/EditorUtils';
 import { EditorUpdateFields } from '../EventEditor';
 
-import style from '../EventEditor.module.scss';
-
 interface CountedTextAreaProps {
   className?: string;
   field: EditorUpdateFields;
@@ -24,13 +22,12 @@ export default function EventTextArea(props: CountedTextAreaProps) {
   const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
     submitOnCtrlEnter: true,
   });
-  const classes = cx([style.inputLabel, className]);
 
   return (
     <div>
-      <label className={classes} htmlFor={field} style={givenStyles}>
+      <Editor.Label className={className} htmlFor={field} style={givenStyles}>
         {label}
-      </label>
+      </Editor.Label>
       <AutoTextArea
         id={field}
         inputref={ref}

apps/client/src/features/rundown/event-editor/composite/EventTextInput.tsx

@@ -2,10 +2,9 @@ import { useCallback, useRef } from 'react';
 import { Input, InputProps } from '@chakra-ui/react';
 
 import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
+import * as Editor from '../../../editors/editor-utils/EditorUtils';
 import { EditorUpdateFields } from '../EventEditor';
 
-import style from '../EventEditor.module.scss';
-
 interface EventTextInputProps extends InputProps {
   field: EditorUpdateFields;
   label: string;
@@ -24,9 +23,7 @@ export default function EventTextInput(props: EventTextInputProps) {
 
   return (
     <div>
-      <label className={style.inputLabel} htmlFor={field}>
+      <Editor.Label htmlFor={field}>{label}</Editor.Label>
-        {label}
-      </label>
       <Input
         id={field}
         ref={ref}