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/app-settings/panel-content/PanelContent.module.scss

@@ -1,7 +1,7 @@
 .corner {
-  position: absolute;
-  top: 1rem;
-  right: 2rem;
+  position: fixed;
+  top: 6rem;
+  right: 4rem;
   z-index: $zindex-floating;
 }
 

apps/client/src/features/app-settings/panel-list/PanelList.tsx

@@ -1,9 +1,8 @@
 import { Fragment } from 'react';
-import { Tooltip } from '@chakra-ui/react';
 
+import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { isKeyEnter } from '../../../common/utils/keyEvent';
 import { cx } from '../../../common/utils/styleUtils';
-import { tooltipDelayFast } from '../../../ontimeConfig';
 import { SettingsOption, SettingsOptionId, useAppSettingsMenu } from '../useAppSettingsMenu';
 import useAppSettingsNavigation from '../useAppSettingsNavigation';
 
@@ -26,7 +25,7 @@ export default function PanelList({ selectedPanel, location }: PanelListProps) {
         const isSelected = selectedPanel === panel.id;
         if (panel.highlight) {
           return (
-            <Tooltip key={panel.id} label={panel.highlight} openDelay={tooltipDelayFast} shouldWrapChildren>
+            <Tooltip key={panel.id} text={panel.highlight} render={<span />}>
               <PanelListItem panel={panel} location={location} isSelected={isSelected} />
             </Tooltip>
           );

apps/client/src/features/app-settings/panel/feature-panel/FeaturePanel.tsx

@@ -23,13 +23,13 @@ export default function FeaturePanel({ location }: PanelBaseProps) {
         <Panel.Section>
           <Panel.Card>
             <Panel.SubHeader>Share Ontime Link</Panel.SubHeader>
-            <Panel.Divider />
             {!isOntimeCloud && (
               <>
                 <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
                 <InfoNif />
               </>
             )}
+            <Panel.Divider />
             <GenerateLinkFormExport />
           </Panel.Card>
         </Panel.Section>

apps/client/src/features/app-settings/panel/feature-panel/GenerateLinkForm.tsx

@@ -73,18 +73,12 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, isLockedToV
   };
 
   return (
-    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={(event) => preventEscape(event)}>
+    <form onSubmit={handleSubmit(onSubmit)} onKeyDown={(event) => preventEscape(event)}>
       {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
       {!isLockedToView ? (
-        <Info>
-          <Panel.Paragraph>
-            You can generate a link to share with your team or to use in automation (such as companion).
-          </Panel.Paragraph>
-        </Info>
+        <Info>You can generate a link to share with your team or to use in automation (such as companion).</Info>
       ) : (
-        <Info>
-          <Panel.Paragraph>You can generate a link to share with your team</Panel.Paragraph>
-        </Info>
+        <Info>You can generate a link to share with your team</Info>
       )}
       <Panel.ListGroup>
         <Panel.ListItem>
@@ -136,6 +130,6 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, isLockedToV
           </div>
         </Panel.ListItem>
       </Panel.ListGroup>
-    </Panel.Section>
+    </form>
   );
 }

apps/client/src/features/app-settings/panel/feature-panel/UrlPresetsForm.tsx

@@ -8,10 +8,10 @@ import { postUrlPresets } from '../../../../common/api/urlPresets';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
-import TooltipActionBtn from '../../../../common/components/buttons/TooltipActionBtn';
 import Info from '../../../../common/components/info/Info';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
+import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { handleLinks } from '../../../../common/utils/linkUtils';
@@ -194,17 +194,15 @@ export default function UrlPresetsForm() {
                       <Panel.Error>{maybeUrlError}</Panel.Error>
                     </td>
                     <Panel.InlineElements relation='inner' as='td'>
-                      <TooltipActionBtn
-                        size='sm'
-                        isDisabled={!canTest}
-                        clickHandler={(event) => handleLinks(preset.alias, event)}
-                        tooltip='Test preset'
-                        aria-label='Test preset'
-                        variant='ontime-ghosted'
-                        color='#e2e2e2' // $gray-200
-                        icon={<IoOpenOutline />}
+                      <Tooltip
+                        text='Test preset'
+                        render={<IconButton variant='ghosted-white' />}
                         data-testid={`field__test_${index}`}
-                      />
+                        onClick={(event) => handleLinks(preset.alias, event)}
+                        disabled={!canTest}
+                      >
+                        <IoOpenOutline />
+                      </Tooltip>
                       <IconButton
                         onClick={() => remove(index)}
                         variant='ghosted-destructive'

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { IoAdd, IoTrash } from 'react-icons/io5';
-import { Select, Tooltip } from '@chakra-ui/react';
+import { Select } from '@chakra-ui/react';
 import { ImportMap, isAlphanumericWithSpace } from 'ontime-utils';
 
 import Button from '../../../../../../common/components/buttons/Button';
 import IconButton from '../../../../../../common/components/buttons/IconButton';
 import Input from '../../../../../../common/components/input/input/Input';
+import Tooltip from '../../../../../../common/components/tooltip/Tooltip';
 import * as Panel from '../../../../panel-utils/PanelUtils';
 import useGoogleSheet from '../useGoogleSheet';
 import { useSheetStore } from '../useSheetStore';
@@ -97,10 +98,13 @@ export default function ImportMapForm(props: ImportMapFormProps) {
         Import options
         <Panel.InlineElements>
           {!isSpreadsheet && (
-            <Tooltip label='Revoke the google authentication'>
-              <Button onClick={handleRevoke} disabled={isLoading}>
-                Revoke
-              </Button>
+            <Tooltip
+              text='Revoke the google authentication'
+              render={<Button />}
+              onClick={handleRevoke}
+              disabled={isLoading}
+            >
+              Revoke
             </Tooltip>
           )}
           <Button onClick={onCancel} disabled={isLoading}>