style: quick fixes

small improvements in app style
- fade in splash screen
- notifications without sound
- change header style
- non selectable text app wide
- change logo
- lock button more accessible
- link to help
- tooltip on collapse delay
- tooltip on private / public event toggle

client/src/common/components/buttons/ApplyIconBtn.jsx

@@ -1,16 +1,19 @@
 import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
 import { FiChevronsDown } from 'react-icons/fi';
 
 export default function ApplyIconBtn(props) {
   const { clickhandler, ...rest } = props;
   return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiChevronsDown />}
-      colorScheme='orange'
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
+    <Tooltip label='Apply delays'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiChevronsDown />}
+        colorScheme='orange'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/buttons/LockIconBtn.jsx

@@ -6,13 +6,13 @@ export default function LockIconBtn(props) {
   const { clickhandler, active, ref } = props;
   return (
     <Tooltip label='Lock cursor to current'>
-      <IconButton
+        <IconButton
         ref={ref}
         size={props.size || 'xs'}
         icon={<FiTarget />}
         color={active ? 'pink.100' : 'pink.300'}
         borderColor={active ? undefined : 'pink.300'}
-        backgroundColor={active ? 'pink.300' : undefined}
+        backgroundColor={active ? 'pink.400' : undefined}
         variant={active ? 'solid' : 'outline'}
         onClick={clickhandler}
         _focus={{ boxShadow: 'none' }}

client/src/common/components/buttons/PublicIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiUsers } from 'react-icons/fi';
+
+export default function PublicIconBtn(props) {
+  const { actionHandler, active, ...rest } = props;
+  return (
+    <Tooltip label={active ? 'Make event private' : 'Make event public'}>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiUsers />}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={() =>
+          actionHandler('update', { field: 'isPublic', value: !active })
+        }
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}