refactor: style cleanups and migrations

fix: close modal with button
refactor: small type improvements
refactor: migrate time inputs
refactor: migrate tooltips
refactor: prevent component resizing

apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx

@@ -1,14 +1,13 @@
 import { memo } from 'react';
 import { IoAlertCircleOutline, IoLink, IoLockClosed, IoLockOpenOutline, IoUnlink } from 'react-icons/io5';
-import { InputRightElement, Tooltip } from '@chakra-ui/react';
 import { TimeField, TimeStrategy } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
 
 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
-import TimeInputWithButton from '../../../common/components/input/time-input/TimeInputWithButton';
+import TimeInput from '../../../common/components/input/time-input/TimeInput';
+import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { cx } from '../../../common/utils/styleUtils';
-import { tooltipDelayFast, tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './TimeInputFlow.module.scss';
 
@@ -25,8 +24,17 @@ interface EventBlockTimerProps {
 }
 
 export default memo(TimeInputFlow);
-function TimeInputFlow(props: EventBlockTimerProps) {
-  const { eventId, countToEnd, timeStart, timeEnd, duration, timeStrategy, linkStart, delay, showLabels } = props;
+function TimeInputFlow({
+  eventId,
+  countToEnd,
+  timeStart,
+  timeEnd,
+  duration,
+  timeStrategy,
+  linkStart,
+  delay,
+  showLabels,
+}: EventBlockTimerProps) {
   const { updateEntry, updateTimer } = useEntryActions();
 
   // In sync with EventEditorTimes
@@ -52,86 +60,80 @@ function TimeInputFlow(props: EventBlockTimerProps) {
   }
 
   const hasDelay = delay !== 0;
-
   const isLockedEnd = timeStrategy === TimeStrategy.LockEnd;
   const isLockedDuration = timeStrategy === TimeStrategy.LockDuration;
 
-  const activeStart = cx([style.timeAction, linkStart && style.active]);
-  const activeEnd = cx([style.timeAction, isLockedEnd && style.active]);
-  const activeDuration = cx([style.timeAction, isLockedDuration && style.active]);
-
   return (
     <>
       <div>
         {showLabels && <Editor.Label className={style.sectionTitle}>Start time</Editor.Label>}
-        <TimeInputWithButton<TimeField>
-          name='timeStart'
-          submitHandler={handleSubmit}
-          time={timeStart}
-          hasDelay={hasDelay}
-          placeholder='Start'
-          disabled={linkStart}
-        >
-          <Tooltip label='Link start to previous end' openDelay={tooltipDelayMid}>
-            <InputRightElement className={activeStart} onClick={() => handleLink(!linkStart)}>
-              <span className={style.timeLabel}>S</span>
-              <span className={style.fourtyfive}>{linkStart ? <IoLink /> : <IoUnlink />}</span>
-            </InputRightElement>
+        <div className={cx([style.inputGroup, hasDelay && style.delayed])}>
+          <TimeInput
+            name='timeStart'
+            submitHandler={handleSubmit}
+            time={timeStart}
+            placeholder='Start'
+            align='left'
+            disabled={linkStart}
+          />
+          <Tooltip
+            text='Link start to previous end'
+            className={cx([style.timeAction, linkStart && style.active])}
+            onClick={() => handleLink(!linkStart)}
+          >
+            <span className={style.fourtyfive}>{linkStart ? <IoLink /> : <IoUnlink />}</span>
           </Tooltip>
-        </TimeInputWithButton>
+        </div>
       </div>
 
       <div>
         {showLabels && <Editor.Label>End time</Editor.Label>}
-        <TimeInputWithButton<TimeField>
-          name='timeEnd'
-          submitHandler={handleSubmit}
-          time={timeEnd}
-          hasDelay={hasDelay}
-          disabled={isLockedDuration}
-          placeholder='End'
-        >
-          <Tooltip label='Lock end' openDelay={tooltipDelayMid}>
-            <InputRightElement
-              className={activeEnd}
-              onClick={() => handleChangeStrategy(TimeStrategy.LockEnd)}
-              data-testid='lock__end'
-            >
-              <span className={style.timeLabel}>E</span>
-              {isLockedEnd ? <IoLockClosed /> : <IoLockOpenOutline />}
-            </InputRightElement>
+        <div className={cx([style.inputGroup, hasDelay && style.delayed])}>
+          <TimeInput
+            name='timeEnd'
+            submitHandler={handleSubmit}
+            time={timeEnd}
+            placeholder='End'
+            align='left'
+            disabled={isLockedDuration}
+          />
+          <Tooltip
+            text='Lock end'
+            className={cx([style.timeAction, isLockedEnd && style.active])}
+            onClick={() => handleChangeStrategy(TimeStrategy.LockEnd)}
+            data-testid='lock__end'
+          >
+            {isLockedEnd ? <IoLockClosed /> : <IoLockOpenOutline />}
           </Tooltip>
-        </TimeInputWithButton>
+        </div>
       </div>
 
       <div>
         {showLabels && <Editor.Label>Duration</Editor.Label>}
-        <TimeInputWithButton<TimeField>
-          name='duration'
-          submitHandler={handleSubmit}
-          time={duration}
-          disabled={isLockedEnd}
-          placeholder='Duration'
-        >
-          <Tooltip label='Lock duration' openDelay={tooltipDelayMid}>
-            <InputRightElement
-              className={activeDuration}
-              onClick={() => handleChangeStrategy(TimeStrategy.LockDuration)}
-              data-testid='lock__duration'
-            >
-              <span className={style.timeLabel}>D</span>
-              {isLockedDuration ? <IoLockClosed /> : <IoLockOpenOutline />}
-            </InputRightElement>
+        <div className={cx([style.inputGroup, hasDelay && style.delayed])}>
+          <TimeInput
+            name='duration'
+            submitHandler={handleSubmit}
+            time={duration}
+            placeholder='Duration'
+            align='left'
+            disabled={isLockedEnd}
+          />
+          <Tooltip
+            text='Lock duration'
+            className={cx([style.timeAction, isLockedDuration && style.active])}
+            onClick={() => handleChangeStrategy(TimeStrategy.LockDuration)}
+            data-testid='lock__duration'
+          >
+            {isLockedDuration ? <IoLockClosed /> : <IoLockOpenOutline />}
           </Tooltip>
-        </TimeInputWithButton>
+        </div>
       </div>
 
       {warnings.length > 0 && (
-        <div className={style.timerNote} data-testid='event-warning'>
-          <Tooltip label={warnings.join(' - ')} openDelay={tooltipDelayFast} variant='ontime-ondark' shouldWrapChildren>
-            <IoAlertCircleOutline />
-          </Tooltip>
-        </div>
+        <Tooltip text={warnings.join(' - ')} className={style.timerNote} data-testid='event-warning' render={<span />}>
+          <IoAlertCircleOutline />
+        </Tooltip>
       )}
     </>
   );