refactor: migrate modal components

apps/client/src/views/editor/finder/Finder.tsx

@@ -1,8 +1,9 @@
 import { KeyboardEvent, useState } from 'react';
-import { Input, Modal, ModalBody, ModalContent, ModalFooter, ModalOverlay } from '@chakra-ui/react';
 import { useDebouncedCallback } from '@mantine/hooks';
 import { SupportedEntry } from 'ontime-types';
 
+import Input from '../../../common/components/input/input/Input';
+import Modal from '../../../common/components/modal/Modal';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
 
 import useFinder from './useFinder';
@@ -14,8 +15,7 @@ interface FinderProps {
   onClose: () => void;
 }
 
-export default function Finder(props: FinderProps) {
-  const { isOpen, onClose } = props;
+export default function Finder({ isOpen, onClose }: FinderProps) {
   const { find, results, error } = useFinder();
   const [selected, setSelected] = useState(0);
 
@@ -56,11 +56,14 @@ export default function Finder(props: FinderProps) {
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
-      <ModalOverlay />
-      <ModalContent maxWidth='max(640px, 40vw)'>
-        <ModalBody onKeyDown={navigate}>
-          <Input size='lg' onChange={debouncedFind} variant='ontime-filled' placeholder='Search...' />
+    <Modal
+      title=''
+      isOpen={isOpen}
+      onClose={onClose}
+      showBackdrop
+      bodyElements={
+        <div onKeyDown={navigate}>
+          <Input height='large' fluid onChange={debouncedFind} placeholder='Search...' />
           <ul className={style.scrollContainer} onMouseMove={handleMouseMoveEvent}>
             {error && <li className={style.error}>{error}</li>}
             {results.length === 0 && <li className={style.empty}>No results</li>}
@@ -91,12 +94,14 @@ export default function Finder(props: FinderProps) {
                 );
               })}
           </ul>
-        </ModalBody>
-        <ModalFooter className={style.footer}>
+        </div>
+      }
+      footerElements={
+        <div className={style.footer}>
           Use the keywords <span className={style.em}>cue</span>, <span className={style.em}>index</span> or
           <span className={style.em}>title</span> to filter search
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </div>
+      }
+    />
   );
 }

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

@@ -8,10 +8,25 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  width: 100%;
+}
+
+.about {
+  @extend .column;
+  font-size: calc(1rem - 2px);
+}
+
+.inline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .header {
   font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .logo {
@@ -20,7 +35,6 @@
 }
 
 .buttonRow {
-  margin-top: 1rem;
   display: flex;
   gap: 1rem;
   justify-content: end;
@@ -38,6 +52,7 @@
 
 .table {
   width: 100%;
+  font-size: calc(1rem - 2px);
 
   tbody {
     background-color: $gray-1300;

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

@@ -1,11 +1,15 @@
+import { IoClose } from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
-import { Button, Checkbox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay } from '@chakra-ui/react';
 
 import { loadDemo, loadProject } from '../../../common/api/db';
 import { postShowWelcomeDialog } from '../../../common/api/settings';
 import { invalidateAllCaches } from '../../../common/api/utils';
+import Button from '../../../common/components/buttons/Button';
+import IconButton from '../../../common/components/buttons/IconButton';
+import Checkbox from '../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import ExternalLink from '../../../common/components/link/external-link/ExternalLink';
+import Modal from '../../../common/components/modal/Modal';
 import { appVersion, discordUrl, documentationUrl, websiteUrl } from '../../../externals';
 
 import ImportProjectButton from './composite/ImportProjectButton';
@@ -17,8 +21,7 @@ interface WelcomeProps {
   onClose: () => void;
 }
 
-export default function Welcome(props: WelcomeProps) {
-  const { onClose } = props;
+export default function Welcome({ onClose }: WelcomeProps) {
   const navigate = useNavigate();
 
   /** handle cleanup actions before request closing the modal */
@@ -55,54 +58,56 @@ export default function Welcome(props: WelcomeProps) {
   };
 
   return (
-    <Modal isOpen onClose={handleClose} closeOnOverlayClick={false} variant='ontime'>
-      <ModalOverlay />
-      <ModalContent maxWidth='max(640px, 40vw)'>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className={style.sections}>
-            <div className={style.column}>
-              <img src='ontime-logo.png' alt='ontime' className={style.logo} />
-              <div>Ontime v{appVersion}</div>
-              <ExternalLink href={websiteUrl}>Website</ExternalLink>
-              <ExternalLink href={documentationUrl}>Read the docs</ExternalLink>
-              <ExternalLink href={discordUrl}>Discord server</ExternalLink>
+    <Modal
+      isOpen
+      onClose={handleClose}
+      showBackdrop
+      bodyElements={
+        <div className={style.sections}>
+          <div className={style.about}>
+            <img src='ontime-logo.png' alt='ontime' className={style.logo} />
+            <div>Ontime v{appVersion}</div>
+            <ExternalLink href={websiteUrl}>Website</ExternalLink>
+            <ExternalLink href={documentationUrl}>Read the docs</ExternalLink>
+            <ExternalLink href={discordUrl}>Discord server</ExternalLink>
+          </div>
+          <div className={style.column}>
+            <div className={style.header}>
+              Welcome to Ontime
+              <IconButton variant='subtle-white'>
+                <IoClose />
+              </IconButton>
             </div>
-            <div className={style.column}>
-              <div className={style.header}>Welcome to Ontime</div>
-              <Editor.Title>Select project</Editor.Title>
-              <div className={style.tableContainer}>
-                <table className={style.table}>
-                  <thead>
-                    <tr>
-                      <th>File Name</th>
-                      <th>Last Used</th>
-                    </tr>
-                  </thead>
-                  <WelcomeProjectList loadProject={handleLoadProject} onClose={handleClose} />
-                </table>
-              </div>
+            <Editor.Title>Select project</Editor.Title>
+            <div className={style.tableContainer}>
+              <table className={style.table}>
+                <thead>
+                  <tr>
+                    <th>File Name</th>
+                    <th>Last Used</th>
+                  </tr>
+                </thead>
+                <WelcomeProjectList loadProject={handleLoadProject} onClose={handleClose} />
+              </table>
             </div>
           </div>
+        </div>
+      }
+      footerElements={
+        <div className={style.column}>
           <div className={style.buttonRow}>
-            <Button size='sm' variant='ontime-subtle' onClick={handleLoadDemo}>
-              Load demo project
-            </Button>
+            <Button onClick={handleLoadDemo}>Load demo project</Button>
             <ImportProjectButton onFinish={handleClose} />
-            <Button size='sm' variant='ontime-filled' onClick={handleCallCreate}>
+            <Button variant='primary' onClick={handleCallCreate}>
               Create new...
             </Button>
           </div>
-          <Checkbox
-            size='sm'
-            variant='ontime-ondark'
-            defaultChecked
-            onChange={(event) => postShowWelcomeDialog(event.target.checked)}
-          >
+          <Editor.Label className={style.inline}>
+            <Checkbox defaultChecked onCheckedChange={(checked) => postShowWelcomeDialog(checked)} />
             Show this modal on next startup
-          </Checkbox>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+          </Editor.Label>
+        </div>
+      }
+    />
   );
 }

apps/client/src/views/editor/welcome/composite/ImportProjectButton.tsx

@@ -4,18 +4,18 @@
  */
 
 import { ChangeEvent, useRef } from 'react';
-import { Button, Input } from '@chakra-ui/react';
+import { Input } from '@chakra-ui/react';
 
 import { uploadProjectFile } from '../../../../common/api/db';
 import { invalidateAllCaches } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
 import { validateProjectFile } from '../../../../common/utils/uploadUtils';
 
 interface ImportProjectButtonProps {
   onFinish: () => void;
 }
 
-export default function ImportProjectButton(props: ImportProjectButtonProps) {
-  const { onFinish } = props;
+export default function ImportProjectButton({ onFinish }: ImportProjectButtonProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleSelectFile = () => {
@@ -50,9 +50,7 @@ export default function ImportProjectButton(props: ImportProjectButtonProps) {
         data-testid='file-input'
       />
 
-      <Button size='sm' variant='ontime-subtle' onClick={handleSelectFile}>
-        Import project
-      </Button>
+      <Button onClick={handleSelectFile}>Import project</Button>
     </>
   );
 }