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/message/MessageControl.jsx

@@ -2,6 +2,7 @@ import { IconButton, Tooltip } from '@chakra-ui/react';
 import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
 import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
 
+import CopyTag from '../../../common/components/osc-tag/CopyTag';
 import { useMessageControlProvider } from '../../../common/hooks/useSocketProvider';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
@@ -52,8 +53,11 @@ export default function MessageControl() {
             aria-label='Toggle On Air'
           />
         </Tooltip>
-        <span className={style.onAirLabel}>On Air</span>
-        <span className={style.oscLabel}>{`/ontime/offAir << OSC >> /ontime/onAir`}</span>
+        <div className={style.onAirLabel}>On Air</div>
+        <div className={style.oscLabel}>
+          <CopyTag label='OSC'>/ontime/offAir</CopyTag>
+          <CopyTag label='OSC'>/ontime/offAir</CopyTag>
+        </div>
       </div>
     </>
   );