refactor: migrate modal components

apps/client/src/common/components/client-modal/RedirectClientModal.tsx

@@ -1,22 +1,15 @@
 import { useState } from 'react';
 import { IoArrowForward } from 'react-icons/io5';
-import {
-  IconButton,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  Select,
-} from '@chakra-ui/react';
 
 import { navigatorConstants } from '../../../viewerConfig';
 import { setClientRemote } from '../../hooks/useSocket';
 import useUrlPresets from '../../hooks-query/useUrlPresets';
+import Button from '../buttons/Button';
 import Info from '../info/Info';
+import Input from '../input/input/Input';
 import AppLink from '../link/app-link/AppLink';
+import Modal from '../modal/Modal';
+import Select from '../select/Select';
 
 import style from './RedirectClientModal.module.scss';
 
@@ -29,8 +22,7 @@ interface RedirectClientModalProps {
   onClose: () => void;
 }
 
-export function RedirectClientModal(props: RedirectClientModalProps) {
-  const { id, isOpen, name, currentPath, origin, onClose } = props;
+export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onClose }: RedirectClientModalProps) {
   const { data } = useUrlPresets();
   const [path, setPath] = useState(currentPath);
   const [selected, setSelected] = useState('/');
@@ -47,13 +39,26 @@ export function RedirectClientModal(props: RedirectClientModalProps) {
 
   const enabledPresets = data.filter((preset) => preset.enabled);
 
+  const viewOptions = [
+    ...navigatorConstants.map((view) => ({
+      value: `/${view.url}`,
+      label: view.label,
+    })),
+    ...enabledPresets.map((preset) => ({
+      value: preset.pathAndParams,
+      label: `Preset: ${preset.alias}`,
+    })),
+  ];
+
   return (
-    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
-      <ModalOverlay />
-      <ModalContent maxWidth='max(480px, 35vw)'>
-        <ModalHeader>Redirect: {name}</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      showCloseButton
+      showBackdrop
+      title={`Redirect: ${name}`}
+      bodyElements={
+        <>
           <Info>
             Remotely redirect the client to a different URL. <br />
             Either by selecting a URL Preset or entering a custom path.
@@ -65,36 +70,21 @@ export function RedirectClientModal(props: RedirectClientModalProps) {
             <span className={style.label}>Select View or URL Preset</span>
             <div className={style.textEntry}>
               <Select
-                size='md'
-                variant='ontime'
-                isDisabled={enabledPresets.length === 0}
-                onChange={(event) => setSelected(event.target.value)}
-              >
-                <option value='/'>Select view or preset</option>
-                {navigatorConstants.map((view) => {
-                  return (
-                    <option key={view.url} value={`/${view.url}`}>
-                      {view.label}
-                    </option>
-                  );
-                })}
-                {enabledPresets.map((preset) => {
-                  return (
-                    <option key={preset.pathAndParams} value={preset.pathAndParams}>
-                      {`Preset: ${preset.alias}`}
-                    </option>
-                  );
-                })}
-              </Select>
-              <IconButton
-                variant='ontime-filled'
-                size='md'
+                fluid
+                options={viewOptions}
+                defaultValue={viewOptions[0].value}
+                onValueChange={(value) => setSelected(value)}
+                disabled={enabledPresets.length === 0}
+              />
+              <Button
+                variant='primary'
                 aria-label='Redirect to preset'
                 className={style.redirect}
-                icon={<IoArrowForward />}
-                isDisabled={enabledPresets.length === 0 || selected === '/'}
+                disabled={enabledPresets.length === 0 || selected === '/'}
                 onClick={() => handleRedirect(selected)}
-              />
+              >
+                Redirect <IoArrowForward />
+              </Button>
             </div>
           </div>
           <div className={style.inlineEntry}>
@@ -102,25 +92,24 @@ export function RedirectClientModal(props: RedirectClientModalProps) {
             <label className={style.textEntry}>
               {origin}
               <Input
-                variant='ontime-filled'
-                size='md'
                 placeholder='eg. /minimal?key=0000ffff'
+                fluid
                 value={path}
                 onChange={(event) => setPath(event.target.value)}
               />
             </label>
-            <IconButton
-              variant='ontime-filled'
-              size='md'
+            <Button
+              variant='primary'
               aria-label='Redirect'
-              isDisabled={path === currentPath || path === ''}
+              disabled={path === currentPath || path === ''}
               className={style.redirect}
-              icon={<IoArrowForward />}
               onClick={() => handleRedirect(path)}
-            />
+            >
+              Redirect <IoArrowForward />
+            </Button>
           </div>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+        </>
+      }
+    />
   );
 }

apps/client/src/common/components/modal/Modal.module.scss

@@ -1,13 +1,13 @@
 .modal {
   position: fixed;
-  top: 50%;
+  top: 10vh;
   left: 50%;
-
-  transform: translate(-50%, -50%);
-
+  transform: translateX(-50%);
+  
   padding-inline: 1rem;
   min-width: min(680px, 90vw);
   min-height: min(200px, 10vh);
+  max-width: min(680px, 90vw);
 
   background-color: $gray-1250;
   color: $ui-white;
@@ -19,7 +19,6 @@
 .backdrop {
   position: fixed;
   inset: 0;
-  z-index: $zindex-backdrop;
   background-color: $backdrop-color;
   transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
 
@@ -44,7 +43,7 @@
   flex-direction: column;
   gap: 0.5rem;
 
-  max-height: min(80vh, 600px);
+  max-height: 60vh;
   overflow-y: auto;
 }
 

apps/client/src/common/components/modal/Modal.tsx

@@ -8,7 +8,7 @@ import style from './Modal.module.scss';
 
 interface ModalProps {
   isOpen: boolean;
-  title: string;
+  title?: string;
   showCloseButton?: boolean;
   showBackdrop?: boolean;
   bodyElements: ReactNode;

apps/client/src/common/components/select/Select.module.scss

@@ -33,6 +33,10 @@
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  &.fluid {
+    width: 100%;
+  }
 }
 
 .selectIcon {

apps/client/src/common/components/select/Select.tsx

@@ -2,6 +2,8 @@ import { IoCheckmark } from 'react-icons/io5';
 import { LuChevronsUpDown } from 'react-icons/lu';
 import { Select as BaseSelect } from '@base-ui-components/react/select';
 
+import { cx } from '../../utils/styleUtils';
+
 import styles from './Select.module.scss';
 
 interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
@@ -10,12 +12,13 @@ interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
     value: T;
     label: string;
   }[];
+  fluid?: boolean;
 }
 
-export default function Select<T>({ options, ...selectRootProps }: SelectProps<T>) {
+export default function Select<T>({ options, fluid, ...selectRootProps }: SelectProps<T>) {
   return (
     <BaseSelect.Root items={options} {...selectRootProps}>
-      <BaseSelect.Trigger className={styles.select}>
+      <BaseSelect.Trigger className={cx([styles.select, fluid && styles.fluid])}>
         <BaseSelect.Value />
         <BaseSelect.Icon className={styles.selectIcon}>
           <LuChevronsUpDown />