refactor: migrate related components

apps/client/src/common/components/buttons/BaseButtonStyles.module.scss

@@ -81,6 +81,25 @@
 }
 
 .ghosted {
+  background: transparent;
+  color: $blue-500;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    opacity: $opacity-disabled;
+  }
+}
+
+.ghosted-white {
   background: transparent;
   color: $ui-white;
 

apps/client/src/common/components/buttons/Button.module.scss

@@ -2,6 +2,7 @@
 @import './BaseButtonStyles.module.scss';
 
 .baseButton {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -25,6 +26,36 @@
     outline: 2px solid $blue-500;
     outline-offset: 2px;
   }
+
+  &.loading {
+    cursor: wait;
+    .content {
+      opacity: 0;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: inherit;
+}
+
+.loadingOverlay {
+  position: absolute;
+  display: grid;
+  place-content: center;
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+  stroke-dasharray: 8;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .small {

apps/client/src/common/components/buttons/Button.tsx

@@ -1,29 +1,44 @@
 import { ButtonHTMLAttributes, forwardRef } from 'react';
+import { IoEllipseOutline } from 'react-icons/io5';
 
 import { cx } from '../../utils/styleUtils';
 
 import style from './Button.module.scss';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive' | 'ghosted';
+  variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive' | 'ghosted' | 'ghosted-white';
   size?: 'small' | 'medium' | 'large' | 'xlarge';
   fluid?: boolean;
+  loading?: boolean;
 }
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  const { className, children, variant = 'subtle', size = 'medium', fluid, ...buttonProps } = props;
+  ({ className, children, variant = 'subtle', size = 'medium', fluid, loading, ...buttonProps }, ref) => {
-
+    return (
-  return (
+      <button
-    <button
+        ref={ref}
-      ref={ref}
+        className={cx([
-      className={cx([style.baseButton, style[variant], style[size], fluid && style.fluid, className])}
+          style.baseButton,
-      type='button'
+          style[variant],
-      {...buttonProps}
+          style[size],
-    >
+          fluid && style.fluid,
-      {children}
+          loading && style.loading,
-    </button>
+          className,
-  );
+        ])}
-});
+        type='button'
+        disabled={loading || buttonProps.disabled}
+        {...buttonProps}
+      >
+        <span className={style.content}>{children}</span>
+        {loading && (
+          <div className={style.loadingOverlay}>
+            <IoEllipseOutline className={style.spinner} />
+          </div>
+        )}
+      </button>
+    );
+  },
+);
 
 Button.displayName = 'Button';
 

apps/client/src/common/components/buttons/IconButton.tsx

@@ -5,7 +5,7 @@ import { cx } from '../../utils/styleUtils';
 import style from './IconButton.module.scss';
 
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive' | 'ghosted';
+  variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive' | 'ghosted' | 'ghosted-white';
   size?: 'small' | 'medium' | 'large' | 'xlarge';
 }
 

apps/client/src/common/components/input/textarea/Textarea.module.scss

@@ -0,0 +1,47 @@
+@use '../../../../theme/viewerDefs' as *;
+
+.textarea {
+  box-sizing: border-box;
+
+  display: block;
+  font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  border-radius: $component-border-radius-md;
+  border: 1px solid transparent;
+
+  padding-inline: 0.5em;
+  outline: none;
+
+  &:hover:not(:disabled) {
+    background-color: $gray-1100;
+  }
+
+  &:focus:not(:read-only) {
+    background-color: $gray-1000;
+    border: 1px solid $blue-500;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
+  }
+}
+
+.subtle {
+  background-color: $gray-1200;
+}
+
+.ghosted {
+  background-color: transparent;
+  padding: 0;
+}
+
+.fluid {
+  width: 100%;
+}

apps/client/src/common/components/input/textarea/Textarea.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, TextareaHTMLAttributes } from 'react';
+
+import { cx } from '../../../utils/styleUtils';
+
+import style from './Textarea.module.scss';
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  variant?: 'subtle' | 'ghosted';
+  fluid?: boolean;
+  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function TextArea(
+  { className, variant = 'subtle', fluid, rows = 5, resize = 'none', style: customStyle, ...textareaProps },
+  ref,
+) {
+  return (
+    <textarea
+      ref={ref}
+      autoCorrect='off'
+      autoComplete='off'
+      spellCheck='false'
+      rows={rows}
+      style={{ ...customStyle, resize }}
+      className={cx([style.textarea, style[variant], fluid && style.fluid, className])}
+      {...textareaProps}
+    />
+  );
+});
+
+export default Textarea;

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

@@ -17,11 +17,11 @@
   font-size: calc(1rem - 2px);
   white-space: nowrap;
 
-  &:hover:not(:disabled) {
+  &:hover:not([data-disabled]) {
     background-color: $gray-1100;
   }
 
-  &:active {
+  &:active:not([data-disabled]) {
     background-color: $gray-1000;
   }
 
@@ -29,7 +29,7 @@
     background-color: $gray-1000;
   }
 
-  &:disabled {
+  &[data-disabled] {
     opacity: 0.4;
     cursor: not-allowed;
   }

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

@@ -4,25 +4,17 @@ import { Select as BaseSelect } from '@base-ui-components/react/select';
 
 import styles from './Select.module.scss';
 
-interface SelectProps<T extends string | null = string> {
+interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
-  defaultValue?: T;
+  // overload items to not allow undefined values
   options: {
-    value: NonNullable<T>;
+    value: T;
     label: string;
-    disabled?: boolean; // exposed to allow creating a non-selectable option
   }[];
-  value?: T;
-  onChange?: (value: NonNullable<T>) => void;
 }
 
-export default function Select<T extends string | null = string>({
+export default function Select<T>({ options, ...selectRootProps }: SelectProps<T>) {
-  defaultValue,
-  options,
-  value,
-  onChange,
-}: SelectProps<T>) {
   return (
-    <BaseSelect.Root items={options} defaultValue={defaultValue} onValueChange={onChange} value={value}>
+    <BaseSelect.Root items={options} {...selectRootProps}>
       <BaseSelect.Trigger className={styles.select}>
         <BaseSelect.Value />
         <BaseSelect.Icon className={styles.selectIcon}>
@@ -33,16 +25,14 @@ export default function Select<T extends string | null = string>({
         <BaseSelect.Positioner side='bottom' align='start'>
           <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
           <BaseSelect.Popup className={styles.popup}>
-            {options.map((option) => {
+            {options.map(({ label, value }) => (
-              return (
+              <BaseSelect.Item key={String(value)} className={styles.item} value={value}>
-                <BaseSelect.Item key={option.value} className={styles.item} value={option.value}>
+                <BaseSelect.ItemIndicator className={styles.itemIndicator}>
-                  <BaseSelect.ItemIndicator className={styles.itemIndicator}>
+                  <IoCheckmark className={styles.itemIndicatorIcon} />
-                    <IoCheckmark className={styles.itemIndicatorIcon} />
+                </BaseSelect.ItemIndicator>
-                  </BaseSelect.ItemIndicator>
+                <BaseSelect.ItemText className={styles.itemLabel}>{label}</BaseSelect.ItemText>
-                  <BaseSelect.ItemText className={styles.itemLabel}>{option.label}</BaseSelect.ItemText>
+              </BaseSelect.Item>
-                </BaseSelect.Item>
+            ))}
-              );
-            })}
           </BaseSelect.Popup>
           <BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
         </BaseSelect.Positioner>

apps/client/src/features/app-settings/panel-content/PanelContent.tsx

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { Button } from '@chakra-ui/react';
+
+import Button from '../../../common/components/buttons/Button';
 
 import style from './PanelContent.module.scss';
 
@@ -8,14 +9,12 @@ interface PanelContentProps {
   onClose: () => void;
 }
 
-export default function PanelContent(props: PropsWithChildren<PanelContentProps>) {
+export default function PanelContent({ onClose, children }: PropsWithChildren<PanelContentProps>) {
-  const { onClose, children } = props;
-
   return (
     <div className={style.contentWrapper}>
       <div className={style.corner}>
-        <Button onClick={onClose} aria-label='close' rightIcon={<IoClose />} variant='ontime-subtle'>
+        <Button size='large' onClick={onClose}>
-          Close settings
+          Close settings <IoClose />
         </Button>
       </div>
       <div className={style.content}>{children}</div>

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

@@ -1,11 +1,13 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import QRCode from 'react-qr-code';
-import { Button, Select, Switch } from '@chakra-ui/react';
 
 import { generateUrl } from '../../../../common/api/session';
 import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
 import Info from '../../../../common/components/info/Info';
+import Select from '../../../../common/components/select/Select';
+import Switch from '../../../../common/components/switch/Switch';
 import useInfo from '../../../../common/hooks-query/useInfo';
 import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
 import copyToClipboard from '../../../../common/utils/copyToClipboard';
@@ -33,14 +35,15 @@ export default function GenerateLinkForm() {
 
   const {
     handleSubmit,
-    register,
     setError,
+    watch,
+    setValue,
     formState: { errors },
   } = useForm<GenerateLinkFormOptions>({
     mode: 'onChange',
     defaultValues: {
       baseUrl: currentHostName,
-      path: '',
+      path: 'timer',
       lock: false,
       authenticate: false,
     },
@@ -67,6 +70,29 @@ export default function GenerateLinkForm() {
     }
   };
 
+  const hostOptions = useMemo(
+    () =>
+      infoData.networkInterfaces.map((nif) => ({
+        value: nif.address,
+        label: `${nif.name} - ${nif.address}`,
+      })),
+    [infoData.networkInterfaces],
+  );
+
+  const pathOptions = useMemo(
+    () => [
+      { value: 'timer', label: 'Timer' },
+      { value: 'cuesheet', label: 'Cuesheet' },
+      { value: 'op', label: 'Operator' },
+      { value: '', label: 'Companion' },
+      ...urlPresetData.map((preset) => ({
+        value: preset.alias,
+        label: `Preset: ${preset.alias}`,
+      })),
+    ],
+    [urlPresetData],
+  );
+
   return (
     <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={(event) => preventEscape(event)}>
       {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
@@ -81,59 +107,40 @@ export default function GenerateLinkForm() {
             title='Host IP'
             description={`Which IP address will be used${isOntimeCloud ? ' (not applicable in Ontime Cloud)' : ''}`}
           />
-          <Select variant='ontime' isDisabled={isOntimeCloud} size='sm' {...register('baseUrl')}>
+          <Select
-            {infoData.networkInterfaces.map((nif) => {
+            disabled={isOntimeCloud}
-              return (
+            options={hostOptions}
-                <option key={nif.name} value={nif.address}>
+            value={watch('baseUrl')}
-                  {`${nif.name} - ${nif.address}`}
+            onValueChange={(value) => setValue('baseUrl', value)}
-                </option>
+          />
-              );
-            })}
-          </Select>
         </Panel.ListItem>
         <Panel.ListItem>
           <Panel.Field
             title='URL Preset'
             description='Which preset will the link point to (will default to /timer if none is given)'
           />
-          <Select variant='ontime' size='sm' {...register('path')}>
+          <Select options={pathOptions} value={watch('path')} onValueChange={(value) => setValue('path', value)} />
-            <option key='timer' value='timer'>
-              Timer
-            </option>
-            <option key='companion' value=''>
-              Companion
-            </option>
-            {urlPresetData.map((preset) => {
-              return (
-                <option key={preset.alias} value={preset.alias}>
-                  {`Preset: ${preset.alias}`}
-                </option>
-              );
-            })}
-          </Select>
         </Panel.ListItem>
         <Panel.ListItem>
           <Panel.Field
             title='Lock navigation'
             description='Prevent showing navigation (will only work for non production URLs)'
           />
-          <Switch variant='ontime' size='lg' {...register('lock')} />
+          <Switch name='lock' checked={watch('lock')} onCheckedChange={(checked) => setValue('lock', checked)} />
         </Panel.ListItem>
         <Panel.ListItem>
           <Panel.Field title='Authenticate' description='Whether the URL should be pre-authenticated' />
-          <Switch variant='ontime' size='lg' {...register('authenticate')} />
+          <Switch
+            name='authenticate'
+            checked={watch('authenticate')}
+            onCheckedChange={(checked) => setValue('authenticate', checked)}
+          />
         </Panel.ListItem>
       </Panel.ListGroup>
       <Panel.ListGroup>
         <Panel.ListItem>
           <Panel.Field title='Generate link' description='Fill form and generate link and QR code' />
-          <Button
+          <Button variant='primary' loading={formState === 'loading'} type='submit' style={{ alignSelf: 'end' }}>
-            variant='ontime-filled'
-            size='sm'
-            isLoading={formState === 'loading'}
-            type='submit'
-            style={{ alignSelf: 'end' }}
-          >
             {formState === 'success' ? 'Link copied to clipboard!' : 'Update share link'}
           </Button>
           <div className={style.column}>

apps/client/src/features/app-settings/panel/network-panel/NetworkLogExport.tsx

@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 import { IoArrowUp } from 'react-icons/io5';
-import { Button } from '@chakra-ui/react';
 
+import Button from '../../../../common/components/buttons/Button';
 import { handleLinks } from '../../../../common/utils/linkUtils';
 import Log from '../../../log/Log';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -18,13 +18,8 @@ export default function LogExport() {
       <Panel.Card>
         <Panel.SubHeader>
           Event log
-          <Button
+          <Button onClick={extract}>
-            variant='ontime-subtle'
+            Extract <IoArrowUp className={style.iconRotate} />
-            size='sm'
-            rightIcon={<IoArrowUp className={style.iconRotate} />}
-            onClick={extract}
-          >
-            Extract
           </Button>
         </Panel.SubHeader>
         <Panel.Divider />

apps/client/src/features/app-settings/panel/project-panel/ManageProjects.tsx

@@ -1,10 +1,10 @@
 import { ChangeEvent, useRef, useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
 import { useSearchParams } from 'react-router-dom';
-import { Button, Input } from '@chakra-ui/react';
 
 import { uploadProjectFile } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
 import { validateProjectFile } from '../../../../common/utils/uploadUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -57,7 +57,7 @@ export default function ManageProjects() {
 
   return (
     <Panel.Section>
-      <Input
+      <input
         ref={fileInputRef}
         style={{ display: 'none' }}
         type='file'
@@ -70,22 +70,14 @@ export default function ManageProjects() {
           Manage projects
           <Panel.InlineElements>
             <Button
-              variant='ontime-subtle'
               onClick={handleSelectFile}
-              size='sm'
+              disabled={Boolean(loading) || isCreatingProject}
-              isDisabled={Boolean(loading) || isCreatingProject}
+              loading={loading === 'import'}
-              isLoading={loading === 'import'}
             >
               Import
             </Button>
-            <Button
+            <Button onClick={handleToggleCreate} disabled={Boolean(loading) || isCreatingProject}>
-              variant='ontime-subtle'
+              New <IoAdd />
-              onClick={handleToggleCreate}
-              size='sm'
-              isDisabled={Boolean(loading) || isCreatingProject}
-              rightIcon={<IoAdd />}
-            >
-              New
             </Button>
           </Panel.InlineElements>
         </Panel.SubHeader>

apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import { IoTrash } from 'react-icons/io5';
+import { IoAdd, IoTrash } from 'react-icons/io5';
-import { Button, Input, Textarea } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { PROJECT_LIST } from '../../../../common/api/constants';
 import { createProject } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Input from '../../../../common/components/input/input/Input';
+import Textarea from '../../../../common/components/input/textarea/Textarea';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { documentationUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -86,10 +88,10 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
       <Panel.Title>
         Create new project
         <Panel.InlineElements>
-          <Button onClick={onClose} variant='ontime-ghosted' size='sm' isDisabled={isSubmitting}>
+          <Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
             Cancel
           </Button>
-          <Button isDisabled={!isValid} type='submit' isLoading={isSubmitting} variant='ontime-filled' size='sm'>
+          <Button disabled={!isValid} type='submit' loading={isSubmitting} variant='primary'>
             Create project
           </Button>
         </Panel.InlineElements>
@@ -98,53 +100,31 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
       <Panel.Section className={style.innerColumn}>
         <label>
           Project title
-          <Input
+          <Input fluid maxLength={50} placeholder='Your project name' {...register('title')} />
-            variant='ontime-filled'
-            size='sm'
-            maxLength={50}
-            placeholder='Your project name'
-            autoComplete='off'
-            {...register('title')}
-          />
         </label>
         <label>
           Project description
-          <Input
+          <Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
-            variant='ontime-filled'
-            size='sm'
-            maxLength={100}
-            placeholder='Euro Love, Malmö 2024'
-            autoComplete='off'
-            {...register('description')}
-          />
         </label>
         <label>
           Backstage info
           <Textarea
-            variant='ontime-filled'
+            fluid
-            size='sm'
             maxLength={150}
             placeholder='Wi-Fi password: 1234'
-            autoComplete='off'
+            resize='vertical'
-            resize='none'
             {...register('backstageInfo')}
           />
         </label>
         <label>
           Backstage QR code Url
-          <Input
+          <Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
-            variant='ontime-filled'
-            size='sm'
-            placeholder={documentationUrl}
-            autoComplete='off'
-            {...register('backstageUrl')}
-          />
         </label>
         <Panel.Section>
           <Panel.ListItem>
             <Panel.Field title='Custom data' description='Add custom data for your project' />
-            <Button variant='ontime-subtle' onClick={handleAddCustom}>
+            <Button onClick={handleAddCustom}>
-              +
+              Add <IoAdd />
             </Button>
           </Panel.ListItem>
           {fields.map((field, idx) => (
@@ -152,25 +132,13 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
               <Panel.Paragraph>{idx + 1}.</Panel.Paragraph>
               <label>
                 Title
-                <Input
+                <Input placeholder={field.title} {...register(`custom.${idx}.title` as const)} />
-                  variant='ontime-filled'
-                  size='sm'
-                  placeholder={field.title}
-                  autoComplete='off'
-                  {...register(`custom.${idx}.title` as const)}
-                />
               </label>
               <label>
                 Value
-                <Input
+                <Input placeholder={field.value} autoComplete='off' {...register(`custom.${idx}.value` as const)} />
-                  variant='ontime-filled'
-                  size='sm'
-                  placeholder={field.value}
-                  autoComplete='off'
-                  {...register(`custom.${idx}.value` as const)}
-                />
               </label>
-              <Button variant='ontime-ghosted' onClick={() => remove(idx)}>
+              <Button variant='ghosted' onClick={() => remove(idx)}>
                 <IoTrash />
               </Button>
             </div>

apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx

@@ -1,12 +1,14 @@
 import { ChangeEvent, useEffect, useRef } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { IoAdd, IoDownloadOutline, IoTrash } from 'react-icons/io5';
-import { Button, Input, Textarea } from '@chakra-ui/react';
 import { type ProjectData } from 'ontime-types';
 
 import { projectLogoPath } from '../../../../common/api/constants';
 import { postProjectData, uploadProjectLogo } from '../../../../common/api/project';
 import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Input from '../../../../common/components/input/input/Input';
+import Textarea from '../../../../common/components/input/textarea/Textarea';
 import useProjectData from '../../../../common/hooks-query/useProjectData';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { validateLogo } from '../../../../common/utils/uploadUtils';
@@ -112,16 +114,10 @@ export default function ProjectData() {
         <Panel.SubHeader>
           Project data
           <Panel.InlineElements>
-            <Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={isSubmitting || !isDirty}>
+            <Button onClick={onReset} disabled={isSubmitting || !isDirty}>
               Revert to saved
             </Button>
-            <Button
+            <Button variant='primary' type='submit' disabled={!isDirty || !isValid} loading={isSubmitting}>
-              variant='ontime-filled'
-              size='sm'
-              type='submit'
-              isDisabled={!isDirty || !isValid}
-              isLoading={isSubmitting}
-            >
               Save
             </Button>
           </Panel.InlineElements>
@@ -132,20 +128,16 @@ export default function ProjectData() {
           <label>
             Project title
             <Input
-              variant='ontime-filled'
+              fluid
-              size='sm'
               maxLength={50}
               placeholder='Project title is shown in production views'
-              autoComplete='off'
               {...register('title')}
             />
           </label>
           <Panel.Section style={{ marginTop: 0 }}>
             <label>
               Project logo
-              <Input
+              <input
-                variant='ontime-filled'
-                size='sm'
                 type='file'
                 style={{ display: 'none' }}
                 accept='image/*'
@@ -161,25 +153,17 @@ export default function ProjectData() {
                   <>
                     <img src={`${projectLogoPath}/${watch('projectLogo')}`} />
                     <Button
-                      size='sm'
+                      variant='subtle-destructive'
-                      variant='ontime-filled'
+                      disabled={isSubmitting || !watch('projectLogo')}
-                      isDisabled={isSubmitting || !watch('projectLogo')}
-                      leftIcon={<IoTrash />}
                       onClick={handleDeleteLogo}
-                      type='button'
                     >
+                      <IoTrash />
                       Delete
                     </Button>
                   </>
                 ) : (
-                  <Button
+                  <Button disabled={isSubmitting} onClick={handleClickUpload} type='button'>
-                    variant='ontime-filled'
+                    <IoDownloadOutline />
-                    size='sm'
-                    isDisabled={isSubmitting}
-                    leftIcon={<IoDownloadOutline />}
-                    onClick={handleClickUpload}
-                    type='button'
-                  >
                     Upload logo
                   </Button>
                 )}
@@ -187,44 +171,30 @@ export default function ProjectData() {
               </Panel.Card>
             </label>
           </Panel.Section>
+
           <label>
             Project description
-            <Input
+            <Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
-              variant='ontime-filled'
-              size='sm'
-              maxLength={100}
-              placeholder='Euro Love, Malmö 2024'
-              autoComplete='off'
-              {...register('description')}
-            />
           </label>
           <label>
             Backstage info
             <Textarea
-              variant='ontime-filled'
+              fluid
-              size='sm'
               maxLength={150}
               placeholder='Wi-Fi password: 1234'
-              autoComplete='off'
+              resize='vertical'
-              resize='none'
               {...register('backstageInfo')}
             />
           </label>
           <label>
             Backstage QR code URL
-            <Input
+            <Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
-              variant='ontime-filled'
-              size='sm'
-              placeholder={documentationUrl}
-              autoComplete='off'
-              {...register('backstageUrl')}
-            />
           </label>
           <Panel.Section style={{ marginTop: 0 }}>
             <Panel.ListItem>
               <Panel.Field title='Custom data' description='' />
-              <Button leftIcon={<IoAdd />} size='sm' variant='ontime-subtle' onClick={handleAddCustom}>
+              <Button onClick={handleAddCustom}>
-                Add
+                Add <IoAdd />
               </Button>
             </Panel.ListItem>
             {fields.length > 0 &&
@@ -237,41 +207,31 @@ export default function ProjectData() {
                   | undefined;
                 return (
                   <div key={field.id} className={style.customDataItem}>
-                    <div>
+                    <div className={style.titleRow}>
-                      <div className={style.titleRow}>
+                      <label>
-                        <label>
+                        Title
-                          Title
+                        <Input
-                          <Input
+                          fluid
-                            variant='ontime-filled'
+                          defaultValue={field.title}
-                            size='sm'
+                          placeholder='Title of your custom data'
-                            defaultValue={field.title}
+                          {...register(`custom.${idx}.title`, {
-                            placeholder='Title of your custom data'
+                            required: { value: true, message: 'Field cannot be empty' },
-                            autoComplete='off'
+                          })}
-                            {...register(`custom.${idx}.title`, {
+                        />
-                              required: { value: true, message: 'Field cannot be empty' },
+                      </label>
-                            })}
+                      <Button variant='subtle-destructive' onClick={() => remove(idx)}>
-                          />
+                        <IoTrash />
-                        </label>
+                        Delete Entry
-                        <Button
+                      </Button>
-                          size='sm'
-                          variant='ontime-subtle'
-                          color='#FA5656' // $red-500
-                          onClick={() => remove(idx)}
-                          leftIcon={<IoTrash />}
-                        >
-                          Delete Entry
-                        </Button>
-                      </div>
-                      {rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
                     </div>
+                    {rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
                     <label>
                       Value
                       <Textarea
-                        variant='ontime-filled'
+                        fluid
-                        resize='none'
+                        rows={3}
-                        size='sm'
+                        resize='vertical'
                         defaultValue={field.value}
-                        autoComplete='off'
                         placeholder='Text of your custom data'
                         {...register(`custom.${idx}.value`, {
                           required: { value: true, message: 'Field cannot be empty' },

apps/client/src/features/control/message/TimerViewControl.tsx

@@ -61,14 +61,6 @@ function SecondarySourceControl() {
     }
   };
 
-  const changeValue = (newValue: SecondarySource) => {
-    // we can only update the remote if it is enabled
-    if (secondarySource !== null) {
-      setMessage.timerSecondarySource(newValue);
-    }
-    setValue(newValue);
-  };
-
   return (
     <>
       <Select
@@ -79,7 +71,13 @@ function SecondarySourceControl() {
           { value: 'aux3', label: 'Aux 3' },
           { value: 'secondary', label: 'Secondary message' },
         ]}
-        onChange={changeValue}
+        onValueChange={(value) => {
+          // we can only update the remote if it is enabled
+          if (secondarySource !== null) {
+            setMessage.timerSecondarySource(value as SecondarySource);
+          }
+          setValue(value as SecondarySource);
+        }}
       />
       <Button
         variant={secondarySource !== null ? 'primary' : 'subtle'}

apps/client/src/features/log/Log.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
-import { Button } from '@chakra-ui/react';
 import { LogOrigin } from 'ontime-types';
 
+import Button from '../../common/components/buttons/Button';
 import { clearLogs, useLogData } from '../../common/stores/logger';
 import * as Panel from '../app-settings/panel-utils/PanelUtils';
 
@@ -52,8 +52,8 @@ export default function Log() {
     <>
       <Panel.InlineElements className={style.buttonBar}>
         <Button
-          variant={showUser ? 'ontime-filled' : 'ontime-outlined'}
+          variant={showUser ? 'primary' : 'subtle'}
-          size='xs'
+          size='small'
           onClick={() => setShowUser((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.User)}
           onContextMenu={(e) => e.preventDefault()}
@@ -61,8 +61,8 @@ export default function Log() {
           {LogOrigin.User}
         </Button>
         <Button
-          variant={showClient ? 'ontime-filled' : 'ontime-outlined'}
+          variant={showClient ? 'primary' : 'subtle'}
-          size='xs'
+          size='small'
           onClick={() => setShowClient((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Client)}
           onContextMenu={(e) => e.preventDefault()}
@@ -70,8 +70,8 @@ export default function Log() {
           {LogOrigin.Client}
         </Button>
         <Button
-          variant={showServer ? 'ontime-filled' : 'ontime-outlined'}
+          variant={showServer ? 'primary' : 'subtle'}
-          size='xs'
+          size='small'
           onClick={() => setShowServer((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Server)}
           onContextMenu={(e) => e.preventDefault()}
@@ -79,8 +79,8 @@ export default function Log() {
           {LogOrigin.Server}
         </Button>
         <Button
-          variant={showPlayback ? 'ontime-filled' : 'ontime-outlined'}
+          variant={showPlayback ? 'primary' : 'subtle'}
-          size='xs'
+          size='small'
           onClick={() => setShowPlayback((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Playback)}
           onContextMenu={(e) => e.preventDefault()}
@@ -88,8 +88,8 @@ export default function Log() {
           {LogOrigin.Playback}
         </Button>
         <Button
-          variant={showRx ? 'ontime-filled' : 'ontime-outlined'}
+          variant={showRx ? 'primary' : 'subtle'}
-          size='xs'
+          size='small'
           onClick={() => setShowRx((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Rx)}
           onContextMenu={(e) => e.preventDefault()}
@@ -97,15 +97,15 @@ export default function Log() {
           {LogOrigin.Rx}
         </Button>
         <Button
-          variant={showTx ? 'ontime-filled' : 'ontime-outlined'}
+          variant={showTx ? 'primary' : 'subtle'}
-          size='xs'
+          size='small'
           onClick={() => setShowTx((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Tx)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Tx}
         </Button>
-        <Button variant='ontime-subtle' size='xs' onClick={clearLogs}>
+        <Button variant='subtle-destructive' size='small' onClick={clearLogs}>
           Clear
         </Button>
       </Panel.InlineElements>

apps/client/src/features/overview/composite/OverviewWrapper.tsx

@@ -1,7 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { ErrorBoundary } from '@sentry/react';
-import { Playback } from 'ontime-types';
+import { isPlaybackActive, millisToString } from 'ontime-utils';
-import { millisToString } from 'ontime-utils';
 
 import { useIsOnline, useRuntimePlaybackOverview, useTimer } from '../../../common/hooks/useSocket';
 import useProjectData from '../../../common/hooks-query/useProjectData';
@@ -72,8 +71,9 @@ export function ProgressOverview() {
 export function RuntimeOverview() {
   const { clock, offset, playback } = useRuntimePlaybackOverview();
 
-  const offsetText = getOffsetText(offset);
+  const isPlaying = isPlaybackActive(playback);
-  const offsetClasses = cx([style.offset, playback !== Playback.Stop && (offset < 0 ? style.behind : style.ahead)]);
+  const offsetText = getOffsetText(isPlaying ? offset : null);
+  const offsetClasses = cx([style.offset, isPlaying && (offset < 0 ? style.behind : style.ahead)]);
 
   return (
     <>

apps/client/src/features/rundown/entry-editor/composite/EventEditorTimes.tsx

@@ -102,7 +102,7 @@ function EventEditorTimes({
             <Editor.Label htmlFor='endAction'>End Action</Editor.Label>
             <Select
               value={endAction}
-              onChange={(value) => handleSubmit('endAction', value)}
+              onValueChange={(value) => handleSubmit('endAction', value)}
               options={[
                 { value: EndAction.None, label: 'None' },
                 { value: EndAction.LoadNext, label: 'Load next event' },
@@ -138,7 +138,7 @@ function EventEditorTimes({
             <Editor.Label htmlFor='timerType'>Timer Type</Editor.Label>
             <Select
               value={timerType}
-              onChange={(value) => handleSubmit('timerType', value)}
+              onValueChange={(value) => handleSubmit('timerType', value)}
               options={[
                 { value: TimerType.CountDown, label: 'Count down' },
                 { value: TimerType.CountUp, label: 'Count up' },

apps/client/src/features/rundown/entry-editor/composite/EventEditorTriggers.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useState } from 'react';
+import { Fragment, useCallback, useMemo, useState } from 'react';
 import { IoAlertCircle, IoCheckmarkCircle, IoTrash } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
 import { TimerLifeCycle, timerLifecycleValues, Trigger } from 'ontime-types';
@@ -66,18 +66,38 @@ function EventTriggerForm({ eventId, triggers }: EventTriggerFormProps) {
 
   const validationError = getValidationError(cycleValue, automationId);
 
+  const triggerOptions = useMemo(
+    () => [
+      { value: null, label: 'Select Trigger' },
+      ...eventTriggerOptions.map((cycle) => ({ value: cycle, label: cycle })),
+    ],
+    [], // eventTriggerOptions is a constant, no need for dependency
+  );
+
+  const automationOptions = useMemo(
+    () => [
+      { value: null, label: 'Select Automation' },
+      ...Object.values(automationSettings.automations).map(({ id, title }) => ({ value: id, label: title })),
+    ],
+    [automationSettings.automations], // This needs to be a dependency as it can change
+  );
+
   return (
     <div className={style.triggerForm}>
       <Select
         value={cycleValue}
-        onChange={(value) => setCycleValue(value)}
+        onValueChange={(value) => {
-        options={eventTriggerOptions.map((cycle) => ({ value: cycle, label: cycle }))}
+          if (value !== null) setCycleValue(value);
+        }}
+        options={triggerOptions}
       />
 
       <Select
-        value={automationId}
+        value={automationId ?? null}
-        onChange={(value) => setAutomationId(value)}
+        onValueChange={(value) => {
-        options={Object.values(automationSettings.automations).map(({ id, title }) => ({ value: id, label: title }))}
+          if (value !== null) setAutomationId(value);
+        }}
+        options={automationOptions}
       />
 
       <Button

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

@@ -50,9 +50,7 @@ function EditableImage({ initialValue, updateValue }: EditableImageProps) {
   return (
     <div className={style.imageCell}>
       <div className={style.overlay}>
-        <Button variant='subtle-white' onClick={openInNewTab}>
+        <Button onClick={openInNewTab}>Preview</Button>
-          Preview
-        </Button>
         <Button variant='subtle-destructive' onClick={() => handleUpdate('')}>
           Delete
         </Button>

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.tsx

@@ -72,7 +72,7 @@ function ViewSettings() {
     <Popover.Root>
       <Popover.Trigger
         render={
-          <Button variant='ghosted'>
+          <Button variant='ghosted-white'>
             <IoSettingsOutline /> Settings
             <IoChevronDown />
           </Button>
@@ -140,7 +140,7 @@ function ColumnSettings({
     <Popover.Root>
       <Popover.Trigger
         render={
-          <Button variant='ghosted'>
+          <Button variant='ghosted-white'>
             <IoOptions /> View
             <IoChevronDown />
           </Button>

apps/server/src/api-data/session/session.validation.ts

@@ -1,10 +1,9 @@
-
 import { body } from 'express-validator';
 import { requestValidationFunction } from '../validation-utils/validationFunction.js';
 
 export const validateGenerateUrl = [
   body('baseUrl').isString().trim().notEmpty(),
-  body('path').isString().trim().notEmpty(),
+  body('path').isString().trim(),
   body('lock').isBoolean(),
   body('authenticate').isBoolean(),
 

e2e/tests/features/301-spreadsheet-import.spec.ts

@@ -24,7 +24,7 @@ test('sheet file upload', async ({ page }) => {
   await page.getByRole('button', { name: 'Import preview' }).click();
   await page.getByRole('button', { name: 'Apply' }).click();
   await page.getByRole('button', { name: 'Return' }).click();
-  await page.getByLabel('close').click();
+  await page.getByRole('button', { name: 'Close settings' }).click();
 
   // asset test events
   const firstTitle = page.getByTestId('entry-1').getByTestId('block__title');