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/features/editors/Editor.jsx

@@ -1,6 +1,4 @@
-import { Heading } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
-import NumberedText from 'common/components/text/NumberedText';
 import PlaybackControl from '../control/PlaybackControl';
 import MessageControl from '../control/MessageControl';
 import styles from './Editor.module.css';
@@ -28,43 +26,28 @@ export default function Editor() {
         </Box>
 
         <Box className={styles.editor}>
-          <Heading size='lg' paddingBottom={'0.25em'}>
-            Event List
-          </Heading>
-          <NumberedText number={1} text={'Manage events'} />
+          <h1>Event List</h1>
           <div className={styles.content}>
             <EventListWrapper />
           </div>
         </Box>
 
         <Box className={styles.messages}>
-          <Heading size='lg' paddingBottom={'0.25em'}>
-            Display Messages
-          </Heading>
-          <NumberedText
-            number={3}
-            text={'Show realtime messages on different screens'}
-          />
+          <h1>Display Messages</h1>
           <div className={styles.content}>
             <MessageControl />
           </div>
         </Box>
 
         <Box className={styles.playback}>
-          <Heading size='lg' paddingBottom={'0.25em'}>
-            Time Control
-          </Heading>
-          <NumberedText number={2} text={'Control timers'} />
+          <h1>Timer Control</h1>
           <div className={styles.content}>
             <PlaybackControl />
           </div>
         </Box>
 
         <Box className={styles.info} borderRadius='0.5em' overflowX='auto'>
-          <Heading size='lg' paddingBottom={'0.25em'}>
-            Info
-          </Heading>
-          <NumberedText number={4} text={'Running Info'} />
+          <h1>Info</h1>
           <div className={styles.content}></div>
         </Box>
       </div>

client/src/features/editors/Editor.module.css

@@ -69,6 +69,12 @@
   }
 }
 
+h1 {
+  font-size: 2.5vh;
+  color: rgba(255, 255, 255, 0.63);
+  padding-bottom: 0.25em;
+}
+
 .mainContainer > div {
   border-radius: 0.5em;
   height: 100%;

client/src/features/editors/list/ActionButtons.jsx

@@ -1,6 +1,6 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
-import { FiZap, FiPlus, FiMinusCircle, FiClock } from 'react-icons/fi';
+import { FiPlus, FiMinusCircle, FiClock } from 'react-icons/fi';
 
 export default function ActionButtons(props) {
   const { showAdd, showDelay, showBlock, actionHandler } = props;
@@ -16,7 +16,7 @@ export default function ActionButtons(props) {
         as={IconButton}
         aria-label='Options'
         size='xs'
-        icon={<FiZap />}
+        icon={<FiPlus />}
         _expanded={{ bg: 'orange.300', color: 'white' }}
         _focus={{ boxShadow: 'none' }}
         backgroundColor={'orange.200'}

client/src/features/editors/list/EventBlock.jsx

@@ -6,7 +6,7 @@ import EventTimes from 'common/components/eventTimes/EventTimes';
 import EventTimesVertical from 'common/components/eventTimes/EventTimesVertical';
 import EditableText from 'common/input/EditableText';
 import ActionButtons from './ActionButtons';
-import VisibleIconBtn from 'common/components/buttons/VisibleIconBtn';
+import PublicIconBtn from 'common/components/buttons/PublicIconBtn';
 import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
 import { millisToMinutes } from 'common/dateConfig';
 import style from './EventBlock.module.css';
@@ -93,7 +93,7 @@ const ExpandedBlock = (props) => {
         onClick={() => props.setCollapsed(true)}
       />
       <div className={style.actionOverlay}>
-        <VisibleIconBtn actionHandler={actionHandler} active={data.isPublic} />
+        <PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
         <ActionButtons
           showAdd
           showDelay
@@ -146,7 +146,7 @@ const CollapsedBlock = (props) => {
         onClick={() => props.setCollapsed(false)}
       />
       <div className={style.actionOverlay}>
-        <VisibleIconBtn actionHandler={actionHandler} active={data.isPublic} />
+        <PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
         <ActionButtons
           showAdd
           showDelay

client/src/features/editors/list/EventBlock.module.css

@@ -152,6 +152,8 @@
   font-size: 0.8em;
   float: right;
   padding-right: 1em;
+  -webkit-user-select: text;
+  user-select: text;
 }
 
 /* ================ MORE ================ */