v2 styling (#263)

* feat: implement progress bar on running event

* refactor: use event action hook

* refactor: align backend data

* style: v2 style tweaks

* style: v2 style tweaks + ts <Info>

* fix: fix delay increment calls

* style: v2 style tweaks + ts <Playback>

* style: v2 style tweaks + ts <EventEditor>

* style: v2 style tweaks + ts <MessageControl>

* fix: naming issue with message control socket endpoint

* chore: upgrade style dependencies

* style: v2 style tweaks + ts <MenuBar>

* style: v2 style tweaks + ts <RundownMenu>

* style: v2 style tweaks + ts <Playback>

* fix: add selected and next information to EventTimer

* style: v2 style tweaks + ts <EventBlock>

* style: v2 style tweaks + ts <DelayBlock>

* style: v2 style tweaks + ts <BlockBlock>

* style: v2 style tweaks + ts <QuickEntry>

* refactor: extract <TextInput> logic

* chore: upgrade build dependencies

* chore: folder structure refactor

* fix: issue with dependency path in electron

* chore: update version in demo db

client/src/features/menu/MenuBar.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect } from 'react';
 import { VStack } from '@chakra-ui/react';
 import { FiHelpCircle } from '@react-icons/all-files/fi/FiHelpCircle';
-import { FiMaximize } from '@react-icons/all-files/fi/FiMaximize';
 import { FiMinimize } from '@react-icons/all-files/fi/FiMinimize';
 import { FiSave } from '@react-icons/all-files/fi/FiSave';
 import { FiUpload } from '@react-icons/all-files/fi/FiUpload';
+import { IoScan } from '@react-icons/all-files/io5/IoScan';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 import { downloadRundown } from 'common/api/ontimeApi';
 
@@ -28,6 +28,12 @@ const buttonStyle = {
   fontSize: '1.5em',
   size: 'lg',
   colorScheme: 'white',
+  _hover: {
+    background: 'rgba(255, 255, 255, 0.10)' // $white-10
+  },
+  _active: {
+    background: 'rgba(255, 255, 255, 0.13)' // $white-13
+  }
 };
 
 export default function MenuBar(props: MenuBarProps) {
@@ -94,17 +100,17 @@ export default function MenuBar(props: MenuBarProps) {
       <QuitIconBtn clickHandler={() => actionHandler('shutdown')} />
       <TooltipActionBtn
         {...buttonStyle}
-        icon={<FiMaximize />}
+        icon={<IoScan />}
         clickHandler={() => actionHandler('max')}
         tooltip='Show full window'
-        aria-label=''
+        aria-label='Show full window'
       />
       <TooltipActionBtn
         {...buttonStyle}
         icon={<FiMinimize />}
         clickHandler={() => actionHandler('min')}
-        tooltip='Close to tray'
-        aria-label=''
+        tooltip='Minimise to tray'
+        aria-label='Minimise to tray'
       />
       <div className={style.gap} />
       <TooltipActionBtn
@@ -112,7 +118,7 @@ export default function MenuBar(props: MenuBarProps) {
         icon={<FiHelpCircle />}
         clickHandler={() => actionHandler('help')}
         tooltip='Help'
-        aria-label=''
+        aria-label='Help'
       />
       <TooltipActionBtn
         {...buttonStyle}
@@ -120,8 +126,7 @@ export default function MenuBar(props: MenuBarProps) {
         className={isSettingsOpen ? style.open : ''}
         clickHandler={onSettingsOpen}
         tooltip='Settings'
-        isRound
-        aria-label=''
+        aria-label='Settings'
       />
       <div className={style.gap} />
       <TooltipActionBtn
@@ -129,16 +134,15 @@ export default function MenuBar(props: MenuBarProps) {
         icon={<FiUpload />}
         className={isUploadOpen ? style.open : ''}
         clickHandler={onUploadOpen}
-        tooltip='Upload event list'
-        isRound
-        aria-label=''
+        tooltip='Upload showfile'
+        aria-label='Upload showfile'
       />
       <TooltipActionBtn
         {...buttonStyle}
         icon={<FiSave />}
         clickHandler={downloadRundown}
-        tooltip='Export event list'
-        aria-label=''
+        tooltip='Export showfile'
+        aria-label='Export showfile'
       />
     </VStack>
   );