diff --git a/apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss b/apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss index fce5901e4..3c7f81ca1 100644 --- a/apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss +++ b/apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss @@ -58,8 +58,31 @@ } } -.toggleTooltipTrigger { +.controlGroup { display: flex; + align-items: center; + gap: 0.375rem; +} + +.groupLabel { + color: $gray-400; + font-size: calc(1rem - 3px); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.02em; + white-space: nowrap; +} + +.infoIcon { + display: flex; + align-items: center; + color: $gray-400; + font-size: calc(1rem + 1px); + cursor: help; + + &:hover { + color: $gray-200; + } } .apart { diff --git a/apps/client/src/features/rundown/rundown-header/RundownHeader.tsx b/apps/client/src/features/rundown/rundown-header/RundownHeader.tsx index d7316211c..88399a5d9 100644 --- a/apps/client/src/features/rundown/rundown-header/RundownHeader.tsx +++ b/apps/client/src/features/rundown/rundown-header/RundownHeader.tsx @@ -3,6 +3,7 @@ import { ToggleGroup } from '@base-ui/react/toggle-group'; import { Toolbar } from '@base-ui/react/toolbar'; import { OffsetMode } from 'ontime-types'; import { memo } from 'react'; +import { IoInformationCircle } from 'react-icons/io5'; import Tooltip from '../../../common/components/tooltip/Tooltip'; import { setOffsetMode, useOffsetMode } from '../../../common/hooks/useSocket'; @@ -74,52 +75,61 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp return ( {showRunEditToggle && ( - - } value={AppMode.Run} className={style.radioButton} />} - > - Run - - } value={AppMode.Edit} className={style.radioButton} />} - > - Edit - - +
+ Mode + + } value={AppMode.Run} className={style.radioButton} />} + > + Run + + } value={AppMode.Edit} className={style.radioButton} />} + > + Edit + + +
)} - - } value={RundownViewMode.List} className={style.radioButton} />} - > - List - - } value={RundownViewMode.Table} className={style.radioButton} />} - > - Table - - - - {showOffsetToggle && ( - +
+ View + } value={OffsetMode.Absolute} className={style.radioButton} />} + text='View rundown in list mode' + render={} value={RundownViewMode.List} className={style.radioButton} />} > - Absolute + List } value={OffsetMode.Relative} className={style.radioButton} />} + text='View rundown in table mode' + render={} value={RundownViewMode.Table} className={style.radioButton} />} > - Relative + Table +
+ + {showOffsetToggle && ( +
+ Offset + + } value={OffsetMode.Absolute} className={style.radioButton}> + Absolute + + } value={OffsetMode.Relative} className={style.radioButton}> + Relative + + + } + > + + +
)} {showOverflowMenu && }