diff --git a/apps/client/src/views/cuesheet/cuesheet-table-header/CuesheetTableHeader.module.scss b/apps/client/src/views/cuesheet/cuesheet-table-header/CuesheetTableHeader.module.scss deleted file mode 100644 index 944dbcc3b..000000000 --- a/apps/client/src/views/cuesheet/cuesheet-table-header/CuesheetTableHeader.module.scss +++ /dev/null @@ -1,120 +0,0 @@ -$label-colour: $gray-700; -$active-colour: $gray-500; - -@mixin label { - font-size: $inner-section-text-size; - color: $label-colour; - text-align: center; - align-self: end; -} - -@mixin time { - font-family: 'Open Sans Light', $ontime-font-family; - font-size: 2rem; - text-align: center; -} - -.header { - grid-area: header; - display: grid; - width: 100%; - padding: 0.25rem 1rem; - height: max-content; - column-gap: 2rem; - - grid-template-areas: 'event playback timer clock actions'; - grid-template-columns: 1fr auto auto auto auto; - align-items: center; - justify-items: center; -} - -.event { - grid-area: event; - justify-self: start; - - .title { - font-size: 1.75rem; - } - - .eventNow { - justify-self: start; - font-size: 1.5rem; - } -} - -.playback { - grid-area: playback; - display: flex; - flex-direction: column; - justify-items: center; - align-items: center; - - .playbackLabel { - @include label; - } - - svg { - font-size: 2rem; - height: 3rem; - color: $label-colour; - } -} - -.timer { - grid-area: timer; - - .timerLabel { - @include label; - } - - .value { - @include time; - } -} - -.clock { - grid-area: clock; - - .clockLabel { - @include label; - } - - .value { - grid-area: clock; - @include time; - } -} - -.headerActions { - grid-area: actions; - display: flex; - align-items: center; - gap: 0.5rem; - color: $label-colour; - height: 100%; - font-size: 1rem; - - .actionIcon, - .actionText { - cursor: pointer; - - &.enabled { - color: $active-indicator; - } - - &:hover { - color: $active-colour; - } - } - - .actionIcon { - font-size: 1.25rem; - } -} - -@media (min-width: 1200px) { - // in large screens we want to space the buttons - .headerActions { - padding-left: 10vw; - } -} diff --git a/apps/client/src/views/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx b/apps/client/src/views/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx deleted file mode 100644 index 94f65896c..000000000 --- a/apps/client/src/views/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { Tooltip } from '@chakra-ui/react'; -import { IoLocate } from '@react-icons/all-files/io5/IoLocate'; -import { Playback, ProjectData } from 'ontime-types'; - -import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon'; -import useProjectData from '../../../common/hooks-query/useProjectData'; -import { cx, enDash } from '../../../common/utils/styleUtils'; -import { tooltipDelayFast } from '../../../ontimeConfig'; -import { useCuesheetSettings } from '../store/cuesheetSettingsStore'; - -import CuesheetTableHeaderTimers from './CuesheetTableHeaderTimers'; - -import style from './CuesheetTableHeader.module.scss'; - -interface CuesheetTableHeaderProps { - handleExport: (headerData: ProjectData) => void; - featureData: { - playback: Playback; - selectedEventIndex: number | null; - numEvents: number; - titleNow: string | null; - }; -} - -export default function CuesheetTableHeader({ handleExport, featureData }: CuesheetTableHeaderProps) { - const followSelected = useCuesheetSettings((state) => state.followSelected); - const toggleFollow = useCuesheetSettings((state) => state.toggleFollow); - const { data: project } = useProjectData(); - - const exportProject = () => { - if (project) { - handleExport(project); - } - }; - - const selected = !featureData.numEvents - ? 'No events' - : `Event ${featureData.selectedEventIndex != null ? featureData.selectedEventIndex + 1 : enDash}/${ - featureData.numEvents ? featureData.numEvents : enDash - }`; - - return ( -