style: menubar mockup

client/src/features/menu/buttons/DownloadIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiDownload } from 'react-icons/fi';
+
+export default function DownloadIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Download File'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiDownload />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/HelpIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiHelpCircle } from 'react-icons/fi';
+
+export default function HelpIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Help'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiHelpCircle />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/InfoIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiHome } from 'react-icons/fi';
+
+export default function InfoIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Event Main'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiHome />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/MaxIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiMaximize } from 'react-icons/fi';
+
+export default function MaxIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Show full window'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiMaximize />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/MinIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiMinimize } from 'react-icons/fi';
+
+export default function MinIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Close to tray'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiMinimize />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/QuitIconBtn.jsx

@@ -0,0 +1,21 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiPower } from 'react-icons/fi';
+
+export default function QuitIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Quit Application'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiPower />}
+        colorScheme='red'
+        variant='outline'
+        isRound
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/SettingsIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiSettings } from 'react-icons/fi';
+
+export default function SettingsIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Application Settings'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiSettings />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}