V2 styles part2 (#233)

* style: create tag to display network messages
* style: create button style for playback
* style: review style for QuickEntry
* style: review style for Info panel
* style: review style for Event blocks
* style: review style for Message control panel
* style: review style for Playback control
* style: review application styles
* style: review block styles
* refactor: TapButton has active state
* style: small style tweaks
* refactor: type checks

client/src/features/control/playback/Transport.tsx

@@ -0,0 +1,63 @@
+import { Tooltip } from '@chakra-ui/react';
+import { IoPlayBack } from '@react-icons/all-files/io5/IoPlayBack';
+import { IoPlaySkipBack } from '@react-icons/all-files/io5/IoPlaySkipBack';
+import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+
+import { usePlaybackControlProvider } from '../../../common/hooks/useSocketProvider';
+import { Playstate } from '../../../common/models/OntimeTypes';
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+import TapButton from './TapButton';
+
+import style from './PlaybackControl.module.scss';
+
+interface TransportProps {
+  playback: Playstate;
+  selectedId: string;
+  noEvents: boolean;
+}
+
+export default function Transport(props: TransportProps) {
+  const { playback, selectedId, noEvents } = props;
+  const { setPlayback } = usePlaybackControlProvider();
+  const isRolling = playback === 'roll';
+
+  return (
+    <div className={style.playbackContainer}>
+      <Tooltip label='Previous event' openDelay={tooltipDelayMid}>
+        <TapButton
+          onClick={() => setPlayback.previous()}
+          disabled={isRolling || noEvents}
+        >
+          <IoPlaySkipBack />
+        </TapButton>
+      </Tooltip>
+      <Tooltip label='Next event' openDelay={tooltipDelayMid}>
+        <TapButton
+          onClick={() => setPlayback.next()}
+          disabled={isRolling || noEvents}
+        >
+          <IoPlaySkipForward />
+        </TapButton>
+      </Tooltip>
+      <Tooltip label='Reload event' openDelay={tooltipDelayMid}>
+        <TapButton
+          onClick={() => setPlayback.reload()}
+          disabled={selectedId == null || isRolling || noEvents}
+        >
+          <IoPlayBack />
+        </TapButton>
+      </Tooltip>
+      <Tooltip label='Unload Event' openDelay={100}>
+        <TapButton
+          onClick={() => setPlayback.stop()}
+          disabled={(selectedId == null && !isRolling) || noEvents}
+          theme='stop'
+        >
+          <IoStop />
+        </TapButton>
+      </Tooltip>
+    </div>
+  );
+}