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/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -6,7 +6,7 @@ import { OntimeEntry, TimeField } from 'ontime-types';
 
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { useFollowSelected } from '../../../common/hooks/useFollowComponent';
-import { AppMode,sessionKeys } from '../../../ontimeConfig';
+import { AppMode, sessionKeys } from '../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../cuesheet.options';
 
 import CuesheetBody from './cuesheet-table-elements/CuesheetBody';

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.module.scss

@@ -1,7 +1,6 @@
 @import "../CuesheetTable.module.scss";
 
 .eventRow {
-  vertical-align: top;
   background: color-mix(in srgb, transparent 92%, var(--user-bg, $gray-500) 8%);
   border-left: 4px solid var(--user-bg, $gray-500);
 

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -49,7 +49,8 @@ export default function EventRow({
   const [cuesheetMode] = useSessionStorage<AppMode>({
     key: sessionKeys.cuesheetMode,
     defaultValue: AppMode.Edit,
-  });  const ownRef = useRef<HTMLTableRowElement>(null);
+  });
+  const ownRef = useRef<HTMLTableRowElement>(null);
 
   const isVisible = useVisibleRowsStore((state) => state.visibleRows.has(rowId));
 

apps/client/src/views/editor/welcome/Welcome.module.scss

@@ -13,7 +13,8 @@
 
 .about {
   @extend .column;
-  font-size: calc(1rem - 2px);
+  font-size: calc(1rem - 3px);
+  padding-inline: 0.25rem;
 }
 
 .inline {

apps/client/src/views/editor/welcome/Welcome.tsx

@@ -24,17 +24,12 @@ interface WelcomeProps {
 export default function Welcome({ onClose }: WelcomeProps) {
   const navigate = useNavigate();
 
-  /** handle cleanup actions before request closing the modal */
-  const handleClose = () => {
-    onClose();
-  };
-
   /** handle loading a selected project */
   const handleLoadProject = async (filename: string) => {
     try {
       await loadProject(filename);
       await invalidateAllCaches();
-      handleClose();
+      onClose();
     } catch (_error) {
       /** no error handling for now */
     }
@@ -45,7 +40,7 @@ export default function Welcome({ onClose }: WelcomeProps) {
     try {
       await loadDemo();
       await invalidateAllCaches();
-      handleClose();
+      onClose();
     } catch (_error) {
       /** no error handling for now */
     }
@@ -54,13 +49,13 @@ export default function Welcome({ onClose }: WelcomeProps) {
   /** handle redirect to create modal */
   const handleCallCreate = () => {
     navigate('/editor?settings=project__create');
-    handleClose();
+    onClose();
   };
 
   return (
     <Modal
       isOpen
-      onClose={handleClose}
+      onClose={() => onClose()}
       showBackdrop
       bodyElements={
         <div className={style.sections}>
@@ -74,7 +69,7 @@ export default function Welcome({ onClose }: WelcomeProps) {
           <div className={style.column}>
             <div className={style.header}>
               Welcome to Ontime
-              <IconButton aria-label='close welcome modal' variant='subtle-white'>
+              <IconButton aria-label='close welcome modal' variant='subtle-white' onClick={() => onClose()}>
                 <IoClose />
               </IconButton>
             </div>
@@ -87,7 +82,7 @@ export default function Welcome({ onClose }: WelcomeProps) {
                     <th>Last Used</th>
                   </tr>
                 </thead>
-                <WelcomeProjectList loadProject={handleLoadProject} onClose={handleClose} />
+                <WelcomeProjectList loadProject={handleLoadProject} onClose={() => onClose()} />
               </table>
             </div>
           </div>
@@ -97,7 +92,7 @@ export default function Welcome({ onClose }: WelcomeProps) {
         <div className={style.column}>
           <div className={style.buttonRow}>
             <Button onClick={handleLoadDemo}>Load demo project</Button>
-            <ImportProjectButton onFinish={handleClose} />
+            <ImportProjectButton onFinish={() => onClose()} />
             <Button variant='primary' onClick={handleCallCreate}>
               Create new...
             </Button>