Feat/55 v2 (#225)

* chore: upgrade relevant libraries
* feat(skip): add skip styling to paginated items
* chore: upgrade relevant libraries
* Fix: issue with text colour (#214)
* fix: adjust text colour from context
* fix: issue with wrong proptype
* fix issue with vite migration (#217)
* hotfix: 1.8.2 issues vite migration
* fix: file import options
* feat(55): styling
* refactor: remove onhover option for entry block
* refactor: relocate logging provider
* refactor: convert to typescript
* feat(55): add event editor
* refactor: extract event actions
* fix: bad import
* feat(55): redesign components
* fix: issues with not awaiting async
* refactor: replace socket with subscription
* refactor: remove unused
* style: small tweaks
* refactor: extract event actions
* refactor: cleanup debug
* refactor: chakra imports
* fix: optimistic mutations
* refactor: handle promise rejections
* refactor: validation
* fix: rq optimistic mutations
* feat: add playback feedback to block
* refactor: no optimistic adding of events
* refactor: simplify cursor state
* styles: cleanup editor style
* refactor: cleanup duration update
* fix: revert package upgrade (issues with vitest)
* fix: prevent cyclic imports
* refactor: extract data fetcher
* refactor: typescript migration
* chore: update tests

client/src/features/modals/ViewsSettingsModal.jsx

@@ -1,13 +1,13 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { ModalBody } from '@chakra-ui/modal';
-import { FormControl, FormLabel } from '@chakra-ui/react';
+import { FormControl, FormLabel, ModalBody } from '@chakra-ui/react';
+import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
 
-import { VIEW_SETTINGS } from '../../common/api/apiConstants';
-import { getView, postView, viewsPlaceholder } from '../../common/api/ontimeApi';
+import { postView } from '../../common/api/ontimeApi';
 import EnableBtn from '../../common/components/buttons/EnableBtn';
 import { LoggingContext } from '../../common/context/LoggingContext';
-import { useFetch } from '../../common/hooks/useFetch';
+import useSettings from '../../common/hooks-query/useSettings';
+import { viewsSettingsPlaceholder } from '../../common/models/ViewSettings.type';
 import { openLink } from '../../common/utils/linkUtils';
 
 import SubmitContainer from './SubmitContainer';
@@ -15,9 +15,9 @@ import SubmitContainer from './SubmitContainer';
 import style from './Modals.module.scss';
 
 export default function ViewsSettingsModal() {
-  const { data, status, refetch } = useFetch(VIEW_SETTINGS, getView);
+  const { data, status, refetch } = useSettings();
   const { emitError } = useContext(LoggingContext);
-  const [formData, setFormData] = useState(viewsPlaceholder);
+  const [formData, setFormData] = useState(viewsSettingsPlaceholder);
   const [changed, setChanged] = useState(false);
   const [submitting, setSubmitting] = useState(false);
 
@@ -90,6 +90,16 @@ export default function ViewsSettingsModal() {
           This feature allows user defined CSS to override the application stylesheets as a way to
           customise viewers appearance.
           <br />
+          Currently the feature affects the following views<br />
+          <ul className={style.featureList}>
+            <li><IoCheckmarkSharp /> Stage timer</li>
+            <li><IoCheckmarkSharp /> Clock</li>
+            <li><IoCheckmarkSharp /> Minimal timer</li>
+            <li><IoCheckmarkSharp /> Backstage screen</li>
+            <li><IoCheckmarkSharp /> Public screen</li>
+            <li><IoCheckmarkSharp /> Picture in Picture</li>
+            <li><IoCheckmarkSharp /> Countdown</li>
+          </ul>
           Read more about it in the documentation{' '}
           <a
             href='#!'