diff --git a/client/src/features/control/playback/Transport.jsx b/client/src/features/control/playback/Transport.jsx
index d323f74e7..417a4db45 100644
--- a/client/src/features/control/playback/Transport.jsx
+++ b/client/src/features/control/playback/Transport.jsx
@@ -1,11 +1,13 @@
import React from 'react';
+import { IoArrowUndo } from '@react-icons/all-files/io5/IoArrowUndo';
import { IoPlaySkipBack } from '@react-icons/all-files/io5/IoPlaySkipBack';
import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
-import { IoArrowUndo } from '@react-icons/all-files/io5/IoArrowUndo';
-import UnloadIconBtn from '../../../common/components/buttons/UnloadIconBtn';
import PropTypes from 'prop-types';
-import style from './PlaybackControl.module.scss';
+
import TransportIconBtn from '../../../common/components/buttons/TransportIconBtn';
+import UnloadIconBtn from '../../../common/components/buttons/UnloadIconBtn';
+
+import style from './PlaybackControl.module.scss';
export default function Transport(props) {
const { playback, selectedId, playbackControl, noEvents } = props;
diff --git a/client/src/features/editors/BlockBlock/BlockBlock.jsx b/client/src/features/editors/BlockBlock/BlockBlock.jsx
index cf12e5115..fda756c06 100644
--- a/client/src/features/editors/BlockBlock/BlockBlock.jsx
+++ b/client/src/features/editors/BlockBlock/BlockBlock.jsx
@@ -1,11 +1,13 @@
import React from 'react';
-import { HStack } from '@chakra-ui/react';
import { Draggable } from 'react-beautiful-dnd';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import { HStack } from '@chakra-ui/react';
import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import PropTypes from 'prop-types';
+
import ActionButtons from '../../../common/components/buttons/ActionButtons';
import TooltipLoadingActionBtn from '../../../common/components/buttons/TooltipLoadingActionBtn';
-import PropTypes from 'prop-types';
+
import style from './BlockBlock.module.scss';
export default function BlockBlock(props) {
diff --git a/client/src/features/editors/DelayBlock/DelayBlock.jsx b/client/src/features/editors/DelayBlock/DelayBlock.jsx
index e5a69c6d5..1d985af71 100644
--- a/client/src/features/editors/DelayBlock/DelayBlock.jsx
+++ b/client/src/features/editors/DelayBlock/DelayBlock.jsx
@@ -1,16 +1,18 @@
import React, { useCallback } from 'react';
-import { HStack } from '@chakra-ui/react';
import { Draggable } from 'react-beautiful-dnd';
-import { millisToMinutes } from 'common/utils/dateConfig';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import { HStack } from '@chakra-ui/react';
import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
-import ActionButtons from '../../../common/components/buttons/ActionButtons';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
import DelayInput from 'common/input/DelayInput';
+import { millisToMinutes } from 'common/utils/dateConfig';
+import PropTypes from 'prop-types';
+
+import ActionButtons from '../../../common/components/buttons/ActionButtons';
import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
import TooltipLoadingActionBtn from '../../../common/components/buttons/TooltipLoadingActionBtn';
+
import style from './DelayBlock.module.scss';
-import PropTypes from 'prop-types';
export default function DelayBlock(props) {
const { eventsHandler, data, index, actionHandler } = props;
diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx
index c3e7432e0..4845a79bf 100644
--- a/client/src/features/editors/Editor.jsx
+++ b/client/src/features/editors/Editor.jsx
@@ -1,11 +1,13 @@
import React, { lazy, useEffect } from 'react';
import { useDisclosure } from '@chakra-ui/hooks';
-import ModalManager from 'features/modals/ModalManager';
-import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
-import { LoggingProvider } from '../../app/context/LoggingContext';
-import { LocalEventSettingsProvider } from '../../app/context/LocalEventSettingsContext';
import { Box } from '@chakra-ui/layout';
+import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
+import ModalManager from 'features/modals/ModalManager';
+
+import { LocalEventSettingsProvider } from '../../app/context/LocalEventSettingsContext';
+import { LoggingProvider } from '../../app/context/LoggingContext';
import MenuBar from '../menu/MenuBar';
+
import styles from './Editor.module.scss';
const EventList = lazy(() => import('features/editors/list/EventListExport'));
diff --git a/client/src/features/editors/EntryBlock/EntryBlock.jsx b/client/src/features/editors/EntryBlock/EntryBlock.jsx
index a72555684..4c88670ae 100644
--- a/client/src/features/editors/EntryBlock/EntryBlock.jsx
+++ b/client/src/features/editors/EntryBlock/EntryBlock.jsx
@@ -1,8 +1,10 @@
import React, { useContext, useEffect, useState } from 'react';
-import { Tooltip } from '@chakra-ui/tooltip';
import { Checkbox } from '@chakra-ui/react';
-import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+import { Tooltip } from '@chakra-ui/tooltip';
import PropTypes from 'prop-types';
+
+import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+
import style from './EntryBlock.module.scss';
export default function EntryBlock(props) {
diff --git a/client/src/features/editors/EventBlock/CollapsedBlock.jsx b/client/src/features/editors/EventBlock/CollapsedBlock.jsx
index 483ac96b4..3f8fe05b8 100644
--- a/client/src/features/editors/EventBlock/CollapsedBlock.jsx
+++ b/client/src/features/editors/EventBlock/CollapsedBlock.jsx
@@ -1,11 +1,13 @@
import React, { memo } from 'react';
import { HStack } from '@chakra-ui/react';
import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
+import PropTypes from 'prop-types';
+
import ActionButtons from '../../../common/components/buttons/ActionButtons';
+import PublicIconBtn from '../../../common/components/buttons/PublicIconBtn';
import EventTimes from '../../../common/components/eventTimes/EventTimes';
import EditableText from '../../../common/input/EditableText';
-import PublicIconBtn from '../../../common/components/buttons/PublicIconBtn';
-import PropTypes from 'prop-types';
+
import style from './EventBlock.module.scss';
const areEqual = (prevProps, nextProps) => {
diff --git a/client/src/features/editors/EventBlock/EventBlock.jsx b/client/src/features/editors/EventBlock/EventBlock.jsx
index 4d3a2afd5..cf064f7a5 100644
--- a/client/src/features/editors/EventBlock/EventBlock.jsx
+++ b/client/src/features/editors/EventBlock/EventBlock.jsx
@@ -1,12 +1,15 @@
import React, { useContext, useMemo } from 'react';
+import { Draggable } from 'react-beautiful-dnd';
import Icon from '@chakra-ui/icon';
import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
-import { Draggable } from 'react-beautiful-dnd';
import { millisToMinutes } from 'common/utils/dateConfig';
import PropTypes from 'prop-types';
+
import { CollapseContext } from '../../../app/context/CollapseContext';
+
import CollapsedBlock from './CollapsedBlock';
import ExpandedBlock from './ExpandedBlock';
+
import style from './EventBlock.module.scss';
export default function EventBlock(props) {
diff --git a/client/src/features/editors/EventBlock/ExpandedBlock.jsx b/client/src/features/editors/EventBlock/ExpandedBlock.jsx
index 09582b1e3..199c51cf5 100644
--- a/client/src/features/editors/EventBlock/ExpandedBlock.jsx
+++ b/client/src/features/editors/EventBlock/ExpandedBlock.jsx
@@ -1,13 +1,15 @@
import React, { memo } from 'react';
import { VStack } from '@chakra-ui/react';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import PropTypes from 'prop-types';
+
import ActionButtons from '../../../common/components/buttons/ActionButtons';
-import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical';
-import EditableText from '../../../common/input/EditableText';
import PublicIconBtn from '../../../common/components/buttons/PublicIconBtn';
import TooltipLoadingActionBtn from '../../../common/components/buttons/TooltipLoadingActionBtn';
-import PropTypes from 'prop-types';
+import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical';
+import EditableText from '../../../common/input/EditableText';
+
import style from './EventBlock.module.scss';
const areEqual = (prevProps, nextProps) => {
diff --git a/client/src/features/editors/ProtectedEditor.jsx b/client/src/features/editors/ProtectedEditor.jsx
index a4acb2c97..c82c8d01c 100644
--- a/client/src/features/editors/ProtectedEditor.jsx
+++ b/client/src/features/editors/ProtectedEditor.jsx
@@ -1,5 +1,7 @@
import React from 'react';
+
import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';
+
import Editor from './Editor';
export default function ProtectedEditor() {
diff --git a/client/src/features/editors/list/EventList.jsx b/client/src/features/editors/list/EventList.jsx
index 8b88b6fe3..8a7da8518 100644
--- a/client/src/features/editors/list/EventList.jsx
+++ b/client/src/features/editors/list/EventList.jsx
@@ -1,12 +1,15 @@
import React, { createRef, useCallback, useContext, useEffect, useState } from 'react';
-import style from './List.module.scss';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { useSocket } from 'app/context/socketContext';
import Empty from 'common/state/Empty';
-import EventListItem from './EventListItem';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import EntryBlock from '../EntryBlock/EntryBlock';
+
import { CursorContext } from '../../../app/context/CursorContext';
import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+import EntryBlock from '../EntryBlock/EntryBlock';
+
+import EventListItem from './EventListItem';
+
+import style from './List.module.scss';
export default function EventList(props) {
const { events, eventsHandler } = props;
diff --git a/client/src/features/editors/list/EventListExport.jsx b/client/src/features/editors/list/EventListExport.jsx
index 2e6f96c5f..bf98b2277 100644
--- a/client/src/features/editors/list/EventListExport.jsx
+++ b/client/src/features/editors/list/EventListExport.jsx
@@ -1,11 +1,14 @@
import React from 'react';
-import { CursorProvider } from '../../../app/context/CursorContext';
-import { CollapseProvider } from '../../../app/context/CollapseContext';
import { Box } from '@chakra-ui/layout';
-import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
-import EventListWrapper from './EventListWrapper';
import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+
+import { CollapseProvider } from '../../../app/context/CollapseContext';
+import { CursorProvider } from '../../../app/context/CursorContext';
+import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
import { handleLinks } from '../../../common/utils/linkUtils';
+
+import EventListWrapper from './EventListWrapper';
+
import style from '../Editor.module.scss';
export default function EventListExport() {
diff --git a/client/src/features/editors/list/EventListItem.jsx b/client/src/features/editors/list/EventListItem.jsx
index c78f7072f..f9a10bb4b 100644
--- a/client/src/features/editors/list/EventListItem.jsx
+++ b/client/src/features/editors/list/EventListItem.jsx
@@ -1,11 +1,12 @@
import React, { memo, useCallback, useContext } from 'react';
-import DelayBlock from '../DelayBlock/DelayBlock';
-import BlockBlock from '../BlockBlock/BlockBlock';
-import EventBlock from '../EventBlock/EventBlock';
-import { LoggingContext } from '../../../app/context/LoggingContext';
-import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
import PropTypes from 'prop-types';
+import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+import { LoggingContext } from '../../../app/context/LoggingContext';
+import BlockBlock from '../BlockBlock/BlockBlock';
+import DelayBlock from '../DelayBlock/DelayBlock';
+import EventBlock from '../EventBlock/EventBlock';
+
const areEqual = (prevProps, nextProps) => {
return (
prevProps.data.revision === nextProps.data.revision &&
diff --git a/client/src/features/editors/list/EventListWrapper.jsx b/client/src/features/editors/list/EventListWrapper.jsx
index e1271ecfb..53b6b4904 100644
--- a/client/src/features/editors/list/EventListWrapper.jsx
+++ b/client/src/features/editors/list/EventListWrapper.jsx
@@ -1,7 +1,6 @@
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useMutation, useQueryClient } from 'react-query';
import { EVENTS_TABLE } from 'app/api/apiConstants';
-import { LoggingContext } from '../../../app/context/LoggingContext';
import {
fetchAllEvents,
requestApplyDelay,
@@ -13,10 +12,14 @@ import {
requestReorder,
} from 'app/api/eventsApi.js';
import { useFetch } from 'app/hooks/useFetch.js';
-import EventList from './EventList';
-import EventListMenu from 'features/menu/EventListMenu.jsx';
import Empty from 'common/state/Empty';
+import EventListMenu from 'features/menu/EventListMenu.jsx';
+
import { CollapseContext } from '../../../app/context/CollapseContext';
+import { LoggingContext } from '../../../app/context/LoggingContext';
+
+import EventList from './EventList';
+
import styles from '../Editor.module.scss';
export default function EventListWrapper() {
diff --git a/client/src/features/info/Info.jsx b/client/src/features/info/Info.jsx
index 4e65c78a2..be0f3e5c6 100644
--- a/client/src/features/info/Info.jsx
+++ b/client/src/features/info/Info.jsx
@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect,useState } from 'react';
import { useSocket } from 'app/context/socketContext';
-import style from './Info.module.scss';
-import InfoTitle from './InfoTitle';
+
import InfoLogger from './InfoLogger';
import InfoNif from './InfoNif';
+import InfoTitle from './InfoTitle';
+
+import style from './Info.module.scss';
export default function Info() {
const socket = useSocket();
diff --git a/client/src/features/info/InfoExport.jsx b/client/src/features/info/InfoExport.jsx
index bbf70ce9f..b2987eb3a 100644
--- a/client/src/features/info/InfoExport.jsx
+++ b/client/src/features/info/InfoExport.jsx
@@ -1,11 +1,14 @@
import React from 'react';
import { Box } from '@chakra-ui/layout';
import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+
import ErrorBoundary from '../../common/components/errorBoundary/ErrorBoundary';
-import Info from './Info';
-import style from '../editors/Editor.module.scss';
import { handleLinks } from '../../common/utils/linkUtils';
+import Info from './Info';
+
+import style from '../editors/Editor.module.scss';
+
export default function InfoExport() {
return (
diff --git a/client/src/features/info/InfoLogger.jsx b/client/src/features/info/InfoLogger.jsx
index d531468b7..d276857fa 100644
--- a/client/src/features/info/InfoLogger.jsx
+++ b/client/src/features/info/InfoLogger.jsx
@@ -1,6 +1,8 @@
import React, { useCallback, useContext, useEffect, useState } from 'react';
-import CollapseBar from '../../common/components/collapseBar/CollapseBar';
+
import { LoggingContext } from '../../app/context/LoggingContext';
+import CollapseBar from '../../common/components/collapseBar/CollapseBar';
+
import style from './InfoLogger.module.scss';
export default function InfoLogger() {
diff --git a/client/src/features/info/InfoNif.jsx b/client/src/features/info/InfoNif.jsx
index 170b751e4..56d45d7fa 100644
--- a/client/src/features/info/InfoNif.jsx
+++ b/client/src/features/info/InfoNif.jsx
@@ -2,8 +2,10 @@ import React, { useState } from 'react';
import { APP_TABLE } from 'app/api/apiConstants';
import { getInfo, ontimePlaceholderInfo } from 'app/api/ontimeApi';
import { useFetch } from 'app/hooks/useFetch';
+
import CollapseBar from '../../common/components/collapseBar/CollapseBar';
import { openLink } from '../../common/utils/linkUtils';
+
import style from './Info.module.scss';
export default function InfoNif() {
diff --git a/client/src/features/info/InfoTitle.jsx b/client/src/features/info/InfoTitle.jsx
index 89ba76325..3a328f607 100644
--- a/client/src/features/info/InfoTitle.jsx
+++ b/client/src/features/info/InfoTitle.jsx
@@ -1,6 +1,8 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
+
import CollapseBar from '../../common/components/collapseBar/CollapseBar';
+
import style from './Info.module.scss';
export default function InfoTitle(props) {
diff --git a/client/src/features/info/__tests__/Info.test.js b/client/src/features/info/__tests__/Info.test.js
index e30509441..84f28f532 100644
--- a/client/src/features/info/__tests__/Info.test.js
+++ b/client/src/features/info/__tests__/Info.test.js
@@ -1,7 +1,8 @@
import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
import { render, screen } from '@testing-library/react';
import SocketProvider from 'app/context/socketContext';
-import { QueryClient, QueryClientProvider } from 'react-query';
+
import Info from '../Info';
const queryClient = new QueryClient();
diff --git a/client/src/features/menu/EventListMenu.jsx b/client/src/features/menu/EventListMenu.jsx
index 63537b93c..7320f3382 100644
--- a/client/src/features/menu/EventListMenu.jsx
+++ b/client/src/features/menu/EventListMenu.jsx
@@ -1,14 +1,17 @@
import React, { memo, useCallback, useContext } from 'react';
import { ButtonGroup, HStack } from '@chakra-ui/react';
-import { CursorContext } from '../../app/context/CursorContext';
-import { FiChevronsUp } from '@react-icons/all-files/fi/FiChevronsUp';
import { FiChevronsDown } from '@react-icons/all-files/fi/FiChevronsDown';
+import { FiChevronsUp } from '@react-icons/all-files/fi/FiChevronsUp';
import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
-import { IoCaretUp } from '@react-icons/all-files/io5/IoCaretUp';
import { IoCaretDown } from '@react-icons/all-files/io5/IoCaretDown';
-import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
-import MenuActionButtons from './MenuActionButtons';
+import { IoCaretUp } from '@react-icons/all-files/io5/IoCaretUp';
import PropTypes from 'prop-types';
+
+import { CursorContext } from '../../app/context/CursorContext';
+import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
+
+import MenuActionButtons from './MenuActionButtons';
+
import style from './EventListMenu.module.css';
const EventListMenu = ({ eventsHandler }) => {
diff --git a/client/src/features/menu/MenuActionButtons.jsx b/client/src/features/menu/MenuActionButtons.jsx
index dc459ea62..1d08344f8 100644
--- a/client/src/features/menu/MenuActionButtons.jsx
+++ b/client/src/features/menu/MenuActionButtons.jsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
import { IconButton } from '@chakra-ui/button';
+import { Divider } from '@chakra-ui/layout';
+import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
+import { Tooltip } from '@chakra-ui/tooltip';
import { FiClock } from '@react-icons/all-files/fi/FiClock';
import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
import { FiTrash2 } from '@react-icons/all-files/fi/FiTrash2';
-import { Divider } from '@chakra-ui/layout';
-import { Tooltip } from '@chakra-ui/tooltip';
import PropTypes from 'prop-types';
export default function MenuActionButtons(props) {
diff --git a/client/src/features/menu/MenuBar.jsx b/client/src/features/menu/MenuBar.jsx
index f32a351c6..53954a229 100644
--- a/client/src/features/menu/MenuBar.jsx
+++ b/client/src/features/menu/MenuBar.jsx
@@ -1,18 +1,20 @@
import React, { useCallback, useContext, useEffect, useRef } from 'react';
import { useMutation, useQueryClient } from 'react-query';
import { VStack } from '@chakra-ui/react';
-import { downloadEvents, uploadEvents } from 'app/api/ontimeApi';
+import { FiDownload } from '@react-icons/all-files/fi/FiDownload';
+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 { FiHelpCircle } from '@react-icons/all-files/fi/FiHelpCircle';
import { FiSettings } from '@react-icons/all-files/fi/FiSettings';
import { FiUpload } from '@react-icons/all-files/fi/FiUpload';
-import { FiDownload } from '@react-icons/all-files/fi/FiDownload';
import { EVENTS_TABLE } from 'app/api/apiConstants';
-import { LoggingContext } from '../../app/context/LoggingContext';
-import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
-import QuitIconBtn from '../../common/components/buttons/QuitIconBtn';
+import { downloadEvents, uploadEvents } from 'app/api/ontimeApi';
import PropTypes from 'prop-types';
+
+import { LoggingContext } from '../../app/context/LoggingContext';
+import QuitIconBtn from '../../common/components/buttons/QuitIconBtn';
+import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
+
import style from './MenuBar.module.scss';
export default function MenuBar(props) {
diff --git a/client/src/features/menu/__tests__/EventListMenu.test.js b/client/src/features/menu/__tests__/EventListMenu.test.js
index 78996da4b..d65a06209 100644
--- a/client/src/features/menu/__tests__/EventListMenu.test.js
+++ b/client/src/features/menu/__tests__/EventListMenu.test.js
@@ -1,8 +1,9 @@
import React from 'react';
-import { render, screen } from '@testing-library/react';
-import MenuBar from '../MenuBar';
-import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
import { QueryClientProvider } from 'react-query';
+import { render, screen } from '@testing-library/react';
+
+import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
+import MenuBar from '../MenuBar';
const onOpenHandler = jest.fn();
const onCloseHandler = jest.fn();
diff --git a/client/src/features/menu/__tests__/MenuActionButtons.test.js b/client/src/features/menu/__tests__/MenuActionButtons.test.js
index 9437f83e9..d1e659d1a 100644
--- a/client/src/features/menu/__tests__/MenuActionButtons.test.js
+++ b/client/src/features/menu/__tests__/MenuActionButtons.test.js
@@ -1,5 +1,6 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
+
import MenuActionButtons from "../MenuActionButtons";
const actionHandler = jest.fn();
diff --git a/client/src/features/menu/__tests__/MenuBar.test.js b/client/src/features/menu/__tests__/MenuBar.test.js
index 78996da4b..d65a06209 100644
--- a/client/src/features/menu/__tests__/MenuBar.test.js
+++ b/client/src/features/menu/__tests__/MenuBar.test.js
@@ -1,8 +1,9 @@
import React from 'react';
-import { render, screen } from '@testing-library/react';
-import MenuBar from '../MenuBar';
-import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
import { QueryClientProvider } from 'react-query';
+import { render, screen } from '@testing-library/react';
+
+import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
+import MenuBar from '../MenuBar';
const onOpenHandler = jest.fn();
const onCloseHandler = jest.fn();
diff --git a/client/src/features/modals/AliasesModal.jsx b/client/src/features/modals/AliasesModal.jsx
index a2e8e1703..b27983713 100644
--- a/client/src/features/modals/AliasesModal.jsx
+++ b/client/src/features/modals/AliasesModal.jsx
@@ -1,20 +1,23 @@
/* eslint-disable jsx-a11y/anchor-has-content */
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { Button, IconButton } from '@chakra-ui/button';
+import { ModalBody } from '@chakra-ui/modal';
+import { Input } from '@chakra-ui/react';
+import { Tooltip } from '@chakra-ui/tooltip';
import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
-import { ModalBody } from '@chakra-ui/modal';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { Input } from '@chakra-ui/react';
-import { getAliases, postAliases } from '../../app/api/ontimeApi';
-import { useFetch } from 'app/hooks/useFetch';
import { ALIASES } from 'app/api/apiConstants';
+import { useFetch } from 'app/hooks/useFetch';
+
+import { getAliases, postAliases } from '../../app/api/ontimeApi';
import { viewerLocations } from '../../app/appConstants';
import { LoggingContext } from '../../app/context/LoggingContext';
import { validateAlias } from '../../app/utils/aliases';
-import SubmitContainer from './SubmitContainer';
import { handleLinks, host } from '../../common/utils/linkUtils';
+
+import SubmitContainer from './SubmitContainer';
+
import style from './Modals.module.scss';
export default function AliasesModal() {
diff --git a/client/src/features/modals/AppSettingsModal.jsx b/client/src/features/modals/AppSettingsModal.jsx
index 9c36cef81..0d96a6182 100644
--- a/client/src/features/modals/AppSettingsModal.jsx
+++ b/client/src/features/modals/AppSettingsModal.jsx
@@ -1,18 +1,21 @@
import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { IconButton } from '@chakra-ui/button';
import { ModalBody } from '@chakra-ui/modal';
import { Checkbox, FormControl, FormLabel, Input, PinInput, PinInputField } from '@chakra-ui/react';
-import { getSettings, ontimePlaceholderSettings, postSettings } from 'app/api/ontimeApi';
-import { useFetch } from 'app/hooks/useFetch';
-import { APP_SETTINGS } from 'app/api/apiConstants';
-import style from './Modals.module.scss';
-import { LoggingContext } from '../../app/context/LoggingContext';
-import { IconButton } from '@chakra-ui/button';
import { FiEye } from '@react-icons/all-files/fi/FiEye';
import { FiX } from '@react-icons/all-files/fi/FiX';
-import SubmitContainer from './SubmitContainer';
-import { inputProps } from './modalHelper';
+import { APP_SETTINGS } from 'app/api/apiConstants';
+import { getSettings, ontimePlaceholderSettings, postSettings } from 'app/api/ontimeApi';
+import { useFetch } from 'app/hooks/useFetch';
+
import { LocalEventSettingsContext } from '../../app/context/LocalEventSettingsContext';
+import { LoggingContext } from '../../app/context/LoggingContext';
import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
+
+import { inputProps } from './modalHelper';
+import SubmitContainer from './SubmitContainer';
+
+import style from './Modals.module.scss';
const version = require('../../../package.json').version
export default function AppSettingsModal() {
diff --git a/client/src/features/modals/EventSettingsModal.jsx b/client/src/features/modals/EventSettingsModal.jsx
index fe15b9fbb..0bee6a7c8 100644
--- a/client/src/features/modals/EventSettingsModal.jsx
+++ b/client/src/features/modals/EventSettingsModal.jsx
@@ -1,13 +1,16 @@
import React, { useCallback, useEffect, useState } from 'react';
import { ModalBody } from '@chakra-ui/modal';
import { FormLabel, Input, Textarea } from '@chakra-ui/react';
+import { EVENT_TABLE } from 'app/api/apiConstants';
import { fetchEvent, postEvent } from 'app/api/eventApi';
import { useFetch } from 'app/hooks/useFetch';
-import { EVENT_TABLE } from 'app/api/apiConstants';
-import style from './Modals.module.scss';
+
import { eventPlaceholderSettings } from '../../app/api/ontimeApi';
-import SubmitContainer from './SubmitContainer';
+
import { inputProps } from './modalHelper';
+import SubmitContainer from './SubmitContainer';
+
+import style from './Modals.module.scss';
export default function SettingsModal() {
const { data, status, refetch } = useFetch(EVENT_TABLE, fetchEvent);
diff --git a/client/src/features/modals/IntegrationSettingsModal.jsx b/client/src/features/modals/IntegrationSettingsModal.jsx
index 953f8f9df..b246652de 100644
--- a/client/src/features/modals/IntegrationSettingsModal.jsx
+++ b/client/src/features/modals/IntegrationSettingsModal.jsx
@@ -1,14 +1,17 @@
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { ModalBody } from '@chakra-ui/modal';
import { FormControl, FormLabel, Input, Switch } from '@chakra-ui/react';
+import { FiInfo } from '@react-icons/all-files/fi/FiInfo';
+import { APP_TABLE } from 'app/api/apiConstants';
import { getInfo, httpPlaceholder, ontimeVars, postInfo } from 'app/api/ontimeApi';
import { useFetch } from 'app/hooks/useFetch';
-import { APP_TABLE } from 'app/api/apiConstants';
-import style from './Modals.module.scss';
+
import { LoggingContext } from '../../app/context/LoggingContext';
-import { FiInfo } from '@react-icons/all-files/fi/FiInfo';
-import SubmitContainer from './SubmitContainer';
+
import { inputProps } from './modalHelper';
+import SubmitContainer from './SubmitContainer';
+
+import style from './Modals.module.scss';
export default function IntegrationSettingsModal() {
const { data, status, refetch } = useFetch(APP_TABLE, getInfo);
diff --git a/client/src/features/modals/ModalManager.jsx b/client/src/features/modals/ModalManager.jsx
index b93e63b86..eb36417ae 100644
--- a/client/src/features/modals/ModalManager.jsx
+++ b/client/src/features/modals/ModalManager.jsx
@@ -1,5 +1,4 @@
import React from 'react';
-import PropTypes from 'prop-types';
import {
Modal,
ModalCloseButton,
@@ -8,12 +7,14 @@ import {
ModalOverlay,
} from '@chakra-ui/modal';
import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/tabs';
-import EventSettingsModal from './EventSettingsModal';
-import OscSettingsModal from './OscSettingsModal';
+import PropTypes from 'prop-types';
+
import AliasesModal from './AliasesModal';
import AppSettingsModal from './AppSettingsModal';
-import TableOptionsModal from './TableOptionsModal';
+import EventSettingsModal from './EventSettingsModal';
import IntegrationSettingsModal from './IntegrationSettingsModal';
+import OscSettingsModal from './OscSettingsModal';
+import TableOptionsModal from './TableOptionsModal';
export default function ModalManager(props) {
const { isOpen, onClose } = props;
diff --git a/client/src/features/modals/OscSettingsModal.jsx b/client/src/features/modals/OscSettingsModal.jsx
index 3417e5721..1e998bf3b 100644
--- a/client/src/features/modals/OscSettingsModal.jsx
+++ b/client/src/features/modals/OscSettingsModal.jsx
@@ -1,16 +1,19 @@
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { ModalBody } from '@chakra-ui/modal';
import { FormControl, FormLabel, Input } from '@chakra-ui/react';
+import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
+import { OSC_SETTINGS } from 'app/api/apiConstants';
import { getOSC, oscPlaceholderSettings, postOSC } from 'app/api/ontimeApi';
import { useFetch } from 'app/hooks/useFetch';
-import { OSC_SETTINGS } from 'app/api/apiConstants';
-import style from './Modals.module.scss';
+
import { LoggingContext } from '../../app/context/LoggingContext';
-import SubmitContainer from './SubmitContainer';
-import { inputProps, portInputProps } from './modalHelper';
-import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
import EnableBtn from '../../common/components/buttons/EnableBtn';
+import { inputProps, portInputProps } from './modalHelper';
+import SubmitContainer from './SubmitContainer';
+
+import style from './Modals.module.scss';
+
// currently defined endpoints
// temporary
const oscCycleEndpoints = [
diff --git a/client/src/features/modals/SubmitContainer.jsx b/client/src/features/modals/SubmitContainer.jsx
index 0fc4495fb..e69736441 100644
--- a/client/src/features/modals/SubmitContainer.jsx
+++ b/client/src/features/modals/SubmitContainer.jsx
@@ -1,8 +1,9 @@
import React from 'react';
-import style from './Modals.module.scss';
import { Button } from '@chakra-ui/button';
import PropTypes from 'prop-types';
+import style from './Modals.module.scss';
+
export default function SubmitContainer(props) {
const { submitting, changed, revert, status } = props;
diff --git a/client/src/features/modals/TableOptionsModal.jsx b/client/src/features/modals/TableOptionsModal.jsx
index 3337c1003..d4bb90dbc 100644
--- a/client/src/features/modals/TableOptionsModal.jsx
+++ b/client/src/features/modals/TableOptionsModal.jsx
@@ -1,14 +1,17 @@
import React, { useCallback, useEffect, useState } from 'react';
import { ModalBody } from '@chakra-ui/modal';
import { Input } from '@chakra-ui/react';
-import { getUserFields, postUserFields, userFieldsPlaceholder } from '../../app/api/ontimeApi';
-import { useFetch } from 'app/hooks/useFetch';
-import { USERFIELDS } from 'app/api/apiConstants';
-import SubmitContainer from './SubmitContainer';
-import style from './Modals.module.scss';
import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
+import { USERFIELDS } from 'app/api/apiConstants';
+import { useFetch } from 'app/hooks/useFetch';
+
+import { getUserFields, postUserFields, userFieldsPlaceholder } from '../../app/api/ontimeApi';
import { handleLinks, host } from '../../common/utils/linkUtils';
+import SubmitContainer from './SubmitContainer';
+
+import style from './Modals.module.scss';
+
export default function TableOptionsModal() {
const { data, status, refetch } = useFetch(USERFIELDS, getUserFields);
const [changed, setChanged] = useState(false);
diff --git a/client/src/features/table/OntimeTable.jsx b/client/src/features/table/OntimeTable.jsx
index 53b53c78c..5e525456e 100644
--- a/client/src/features/table/OntimeTable.jsx
+++ b/client/src/features/table/OntimeTable.jsx
@@ -1,8 +1,6 @@
import React, { useCallback, useContext, useEffect, useMemo } from 'react';
-import { TableSettingsContext } from '../../app/context/TableSettingsContext';
import { useBlockLayout, useColumnOrder, useResizeColumns, useTable } from 'react-table';
import { Tooltip } from '@chakra-ui/tooltip';
-import PropTypes from 'prop-types';
import {
closestCenter,
DndContext,
@@ -17,14 +15,19 @@ import {
SortableContext,
sortableKeyboardCoordinates,
} from '@dnd-kit/sortable';
+import PropTypes from 'prop-types';
+
+import { TableSettingsContext } from '../../app/context/TableSettingsContext';
import { useLocalStorage } from '../../app/hooks/useLocalStorage';
-import { defaultColumnOrder, defaultHiddenColumns } from './defaults';
-import { makeColumns } from './columns';
-import EventRow from './tableRows/EventRow';
-import DelayRow from './tableRows/DelayRow';
-import BlockRow from './tableRows/BlockRow';
+
import SortableCell from './tableElements/SortableCell';
import TableSettings from './tableElements/TableSettings';
+import BlockRow from './tableRows/BlockRow';
+import DelayRow from './tableRows/DelayRow';
+import EventRow from './tableRows/EventRow';
+import { makeColumns } from './columns';
+import { defaultColumnOrder, defaultHiddenColumns } from './defaults';
+
import style from './Table.module.scss';
export default function OntimeTable({ tableData, userFields, handleUpdate, selectedId }) {
diff --git a/client/src/features/table/ProtectedTable.jsx b/client/src/features/table/ProtectedTable.jsx
index 7c2ec7e6a..77217382c 100644
--- a/client/src/features/table/ProtectedTable.jsx
+++ b/client/src/features/table/ProtectedTable.jsx
@@ -1,7 +1,9 @@
import React from 'react';
-import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';
-import TableWrapper from './TableWrapper';
+
import { TableSettingsProvider } from '../../app/context/TableSettingsContext';
+import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';
+
+import TableWrapper from './TableWrapper';
export default function ProtectedTable() {
return (
diff --git a/client/src/features/table/TableHeader.jsx b/client/src/features/table/TableHeader.jsx
index b4883f602..d35d1db6c 100644
--- a/client/src/features/table/TableHeader.jsx
+++ b/client/src/features/table/TableHeader.jsx
@@ -1,16 +1,19 @@
import React, { useContext, useEffect, useState } from 'react';
-import { useFetch } from '../../app/hooks/useFetch';
-import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiSettings } from '@react-icons/all-files/fi/FiSettings';
+import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
+import { IoMoon } from '@react-icons/all-files/io5/IoMoon';
+
import { EVENT_TABLE } from '../../app/api/apiConstants';
import { fetchEvent } from '../../app/api/eventApi';
-import { FiSettings } from '@react-icons/all-files/fi/FiSettings';
-import { IoMoon } from '@react-icons/all-files/io5/IoMoon';
-import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
import { useSocket } from '../../app/context/socketContext';
+import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+import { useFetch } from '../../app/hooks/useFetch';
import { formatDisplay } from '../../common/utils/dateConfig';
-import { Tooltip } from '@chakra-ui/tooltip';
-import PlaybackIcon from './tableElements/PlaybackIcon';
import { stringFromMillis } from '../../common/utils/time';
+
+import PlaybackIcon from './tableElements/PlaybackIcon';
+
import style from './Table.module.scss';
export default function TableHeader() {
diff --git a/client/src/features/table/TableWrapper.jsx b/client/src/features/table/TableWrapper.jsx
index 6020c954f..d2c0565f2 100644
--- a/client/src/features/table/TableWrapper.jsx
+++ b/client/src/features/table/TableWrapper.jsx
@@ -1,13 +1,16 @@
import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { useFetch } from '../../app/hooks/useFetch';
-import { useSocket } from '../../app/context/socketContext';
-import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+
import { EVENTS_TABLE, USERFIELDS } from '../../app/api/apiConstants';
import { fetchAllEvents, requestPatch } from '../../app/api/eventsApi';
-import TableHeader from './TableHeader';
-import OntimeTable from './OntimeTable';
-import useMutateEvents from '../../app/hooks/useMutateEvents';
import { getUserFields } from '../../app/api/ontimeApi';
+import { useSocket } from '../../app/context/socketContext';
+import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+import { useFetch } from '../../app/hooks/useFetch';
+import useMutateEvents from '../../app/hooks/useMutateEvents';
+
+import OntimeTable from './OntimeTable';
+import TableHeader from './TableHeader';
+
import style from './Table.module.scss';
export default function TableWrapper() {
diff --git a/client/src/features/table/columns.jsx b/client/src/features/table/columns.jsx
index 542c58a4b..8dcf347ba 100644
--- a/client/src/features/table/columns.jsx
+++ b/client/src/features/table/columns.jsx
@@ -1,7 +1,10 @@
import React from 'react';
import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
-import EditableCell from './tableElements/EditableCell';
+
import { stringFromMillis } from '../../common/utils/time.js';
+
+import EditableCell from './tableElements/EditableCell';
+
import style from './Table.module.scss';
/**
diff --git a/client/src/features/table/tableElements/EditableCell.jsx b/client/src/features/table/tableElements/EditableCell.jsx
index 5c1a86a33..61eeafd20 100644
--- a/client/src/features/table/tableElements/EditableCell.jsx
+++ b/client/src/features/table/tableElements/EditableCell.jsx
@@ -1,7 +1,8 @@
import React, { useCallback, useEffect, useState } from 'react';
-import { AutoTextArea } from '../../../common/input/AutoTextArea';
import PropTypes from 'prop-types';
+import { AutoTextArea } from '../../../common/input/AutoTextArea';
+
/**
* Shamelessly copied from react-table docs
* Plugged into chakra-ui editable component
diff --git a/client/src/features/table/tableElements/PlaybackIcon.jsx b/client/src/features/table/tableElements/PlaybackIcon.jsx
index 2284fc3b2..a8ffbba28 100644
--- a/client/src/features/table/tableElements/PlaybackIcon.jsx
+++ b/client/src/features/table/tableElements/PlaybackIcon.jsx
@@ -1,10 +1,10 @@
import React from 'react';
-import PropTypes from 'prop-types';
-import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
-import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
-import { IoPause } from '@react-icons/all-files/io5/IoPause';
-import { IoStop } from '@react-icons/all-files/io5/IoStop';
import { Tooltip } from '@chakra-ui/tooltip';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
+import PropTypes from 'prop-types';
export default function PlaybackIcon(props) {
const { state } = props;
diff --git a/client/src/features/table/tableElements/SortableCell.jsx b/client/src/features/table/tableElements/SortableCell.jsx
index fb9d301e6..11ade7848 100644
--- a/client/src/features/table/tableElements/SortableCell.jsx
+++ b/client/src/features/table/tableElements/SortableCell.jsx
@@ -3,6 +3,7 @@ import { Tooltip } from '@chakra-ui/tooltip';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import PropTypes from 'prop-types';
+
import styles from '../Table.module.scss';
export default function SortableCell({ column }) {
diff --git a/client/src/features/table/tableElements/TableSettings.jsx b/client/src/features/table/tableElements/TableSettings.jsx
index d2e412b04..8d5cdd20d 100644
--- a/client/src/features/table/tableElements/TableSettings.jsx
+++ b/client/src/features/table/tableElements/TableSettings.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Button } from '@chakra-ui/button';
import PropTypes from 'prop-types';
+
import style from '../Table.module.scss';
// reusable button styles
diff --git a/client/src/features/table/tableRows/BlockRow.jsx b/client/src/features/table/tableRows/BlockRow.jsx
index ddd51723f..f97088455 100644
--- a/client/src/features/table/tableRows/BlockRow.jsx
+++ b/client/src/features/table/tableRows/BlockRow.jsx
@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
+
import style from '../Table.module.scss';
export default function BlockRow(props) {
diff --git a/client/src/features/table/tableRows/DelayRow.jsx b/client/src/features/table/tableRows/DelayRow.jsx
index ae5300de3..7c14353cb 100644
--- a/client/src/features/table/tableRows/DelayRow.jsx
+++ b/client/src/features/table/tableRows/DelayRow.jsx
@@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
+
import { millisToMinutes } from '../../../common/utils/dateConfig';
+
import style from '../Table.module.scss';
export default function DelayRow(props) {
diff --git a/client/src/features/table/tableRows/EventRow.jsx b/client/src/features/table/tableRows/EventRow.jsx
index cfee8959c..044058f01 100644
--- a/client/src/features/table/tableRows/EventRow.jsx
+++ b/client/src/features/table/tableRows/EventRow.jsx
@@ -1,6 +1,7 @@
import React from 'react';
-import PropTypes from 'prop-types';
import Color from 'color';
+import PropTypes from 'prop-types';
+
import style from '../Table.module.scss';
/**
diff --git a/client/src/features/viewers/ViewWrapper.jsx b/client/src/features/viewers/ViewWrapper.jsx
index 43db2b761..274bb614d 100644
--- a/client/src/features/viewers/ViewWrapper.jsx
+++ b/client/src/features/viewers/ViewWrapper.jsx
@@ -1,10 +1,11 @@
/* eslint-disable react/display-name */
import React, { useEffect, useState } from 'react';
-import { fetchAllEvents } from 'app/api/eventsApi';
+import { EVENT_TABLE, EVENTS_TABLE } from 'app/api/apiConstants';
import { fetchEvent } from 'app/api/eventApi';
+import { fetchAllEvents } from 'app/api/eventsApi';
import { useSocket } from 'app/context/socketContext';
import { useFetch } from 'app/hooks/useFetch';
-import { EVENT_TABLE, EVENTS_TABLE } from 'app/api/apiConstants';
+
import { stringFromMillis } from '../../common/utils/time';
const withSocket = (Component) => {
diff --git a/client/src/features/viewers/backstage/StageManager.jsx b/client/src/features/viewers/backstage/StageManager.jsx
index df5a40e9f..f4fc13e53 100644
--- a/client/src/features/viewers/backstage/StageManager.jsx
+++ b/client/src/features/viewers/backstage/StageManager.jsx
@@ -1,13 +1,15 @@
import React, { useEffect, useState } from 'react';
import QRCode from 'react-qr-code';
-import { AnimatePresence, motion } from 'framer-motion';
-import { formatDisplay } from 'common/utils/dateConfig';
-import Paginator from 'common/components/views/Paginator';
import NavLogo from 'common/components/nav/NavLogo';
+import Paginator from 'common/components/views/Paginator';
import TitleSide from 'common/components/views/TitleSide';
+import { formatDisplay } from 'common/utils/dateConfig';
+import { AnimatePresence, motion } from 'framer-motion';
+import PropTypes from 'prop-types';
+
import { getEventsWithDelay } from '../../../common/utils/eventsManager';
import { titleVariants } from '../common/animation';
-import PropTypes from 'prop-types';
+
import style from './StageManager.module.scss';
export default function StageManager(props) {
diff --git a/client/src/features/viewers/countdown/Countdown.jsx b/client/src/features/viewers/countdown/Countdown.jsx
new file mode 100644
index 000000000..ac893d1f4
--- /dev/null
+++ b/client/src/features/viewers/countdown/Countdown.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Countdown(props) {
+ return (
+
+ Countdown
+
+ )
+}
+
+Countdown.propTypes={
+
+}
\ No newline at end of file
diff --git a/client/src/features/viewers/foh/Public.jsx b/client/src/features/viewers/foh/Public.jsx
index f0d41328f..bbc8ec322 100644
--- a/client/src/features/viewers/foh/Public.jsx
+++ b/client/src/features/viewers/foh/Public.jsx
@@ -1,11 +1,13 @@
import React, { useEffect, useState } from 'react';
import QRCode from 'react-qr-code';
-import { AnimatePresence, motion } from 'framer-motion';
-import Paginator from 'common/components/views/Paginator';
import NavLogo from 'common/components/nav/NavLogo';
+import Paginator from 'common/components/views/Paginator';
import TitleSide from 'common/components/views/TitleSide';
-import { titleVariants } from '../common/animation';
+import { AnimatePresence, motion } from 'framer-motion';
import PropTypes from 'prop-types';
+
+import { titleVariants } from '../common/animation';
+
import style from './Public.module.scss';
export default function Public(props) {
diff --git a/client/src/features/viewers/production/Pip.jsx b/client/src/features/viewers/production/Pip.jsx
index 729009c62..7b89bf8fc 100644
--- a/client/src/features/viewers/production/Pip.jsx
+++ b/client/src/features/viewers/production/Pip.jsx
@@ -1,11 +1,12 @@
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import QRCode from 'react-qr-code';
-import { AnimatePresence, motion } from 'framer-motion';
-import Paginator from 'common/components/views/Paginator';
-import NavLogo from 'common/components/nav/NavLogo';
-import { formatDisplay } from 'common/utils/dateConfig';
import { ReactComponent as Emptyimage } from 'assets/images/empty.svg';
+import NavLogo from 'common/components/nav/NavLogo';
+import Paginator from 'common/components/views/Paginator';
+import { formatDisplay } from 'common/utils/dateConfig';
+import { AnimatePresence, motion } from 'framer-motion';
import PropTypes from 'prop-types';
+
import style from './Pip.module.scss';
export default function Pip(props) {
diff --git a/client/src/features/viewers/production/lower/LowerClean.jsx b/client/src/features/viewers/production/lower/LowerClean.jsx
index 5b976ba75..e2c0ce02d 100644
--- a/client/src/features/viewers/production/lower/LowerClean.jsx
+++ b/client/src/features/viewers/production/lower/LowerClean.jsx
@@ -1,8 +1,10 @@
import React, { useEffect, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
-import style from './LowerClean.module.css';
+
import NavLogo from "../../../../common/components/nav/NavLogo";
+import style from './LowerClean.module.css';
+
export default function LowerClean(props) {
const { lower, title, options } = props;
const defaults = {
diff --git a/client/src/features/viewers/production/lower/LowerLines.jsx b/client/src/features/viewers/production/lower/LowerLines.jsx
index d1750b01d..b4080bbb7 100644
--- a/client/src/features/viewers/production/lower/LowerLines.jsx
+++ b/client/src/features/viewers/production/lower/LowerLines.jsx
@@ -1,8 +1,10 @@
import React, { useEffect, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
-import style from './LowerLines.module.css';
+
import NavLogo from "../../../../common/components/nav/NavLogo";
+import style from './LowerLines.module.css';
+
export default function LowerLines(props) {
const { lower, title, options } = props;
const defaults = {
diff --git a/client/src/features/viewers/production/lower/LowerWrapper.jsx b/client/src/features/viewers/production/lower/LowerWrapper.jsx
index fbbbd8ac3..853a2314b 100644
--- a/client/src/features/viewers/production/lower/LowerWrapper.jsx
+++ b/client/src/features/viewers/production/lower/LowerWrapper.jsx
@@ -1,7 +1,8 @@
import React, { memo, useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
import LowerClean from './LowerClean';
import LowerLines from './LowerLines';
-import { useSearchParams } from 'react-router-dom';
const isEqual = require('react-fast-compare');
const areEqual = (prevProps, nextProps) => {
diff --git a/client/src/features/viewers/studio/StudioClock.jsx b/client/src/features/viewers/studio/StudioClock.jsx
index 98c2a8197..499a10c2e 100644
--- a/client/src/features/viewers/studio/StudioClock.jsx
+++ b/client/src/features/viewers/studio/StudioClock.jsx
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
-import style from './StudioClock.module.scss';
+import PropTypes from 'prop-types';
import useFitText from 'use-fit-text';
+
import NavLogo from '../../../common/components/nav/NavLogo';
import { formatDisplay } from '../../../common/utils/dateConfig';
import {
@@ -8,7 +9,8 @@ import {
getEventsWithDelay,
trimEventlist,
} from '../../../common/utils/eventsManager';
-import PropTypes from 'prop-types';
+
+import style from './StudioClock.module.scss';
export default function StudioClock(props) {
const { title, time, backstageEvents, selectedId, nextId, onAir } = props;
diff --git a/client/src/features/viewers/timer/MinimalTimer.jsx b/client/src/features/viewers/timer/MinimalTimer.jsx
index 1827bf47f..fd143b367 100644
--- a/client/src/features/viewers/timer/MinimalTimer.jsx
+++ b/client/src/features/viewers/timer/MinimalTimer.jsx
@@ -1,7 +1,9 @@
import React, { useEffect } from 'react';
-import { formatDisplay } from '../../../common/utils/dateConfig';
-import NavLogo from '../../../common/components/nav/NavLogo';
import PropTypes from 'prop-types';
+
+import NavLogo from '../../../common/components/nav/NavLogo';
+import { formatDisplay } from '../../../common/utils/dateConfig';
+
import style from './MinimalTimer.module.scss';
export default function MinimalTimer(props) {
diff --git a/client/src/features/viewers/timer/Timer.jsx b/client/src/features/viewers/timer/Timer.jsx
index d45bbb17b..e185bf64d 100644
--- a/client/src/features/viewers/timer/Timer.jsx
+++ b/client/src/features/viewers/timer/Timer.jsx
@@ -1,11 +1,12 @@
import React, { useEffect, useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
import { useSearchParams } from 'react-router-dom';
import Countdown from 'common/components/countdown/Countdown';
import MyProgressBar from 'common/components/myProgressBar/MyProgressBar';
import NavLogo from 'common/components/nav/NavLogo';
import TitleCard from 'common/components/views/TitleCard';
+import { AnimatePresence, motion } from 'framer-motion';
import PropTypes from 'prop-types';
+
import style from './Timer.module.scss';
export default function Timer(props) {
diff --git a/client/src/index.js b/client/src/index.js
index 8de4169d7..745580476 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,13 +1,15 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import { QueryClient, QueryClientProvider } from 'react-query';
import { BrowserRouter } from 'react-router-dom';
import { ChakraProvider } from '@chakra-ui/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+
import { AppContextProvider } from './app/context/AppContext';
import SocketProvider from './app/context/socketContext';
import theme from './theme/theme';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
import './index.scss';
// Load Open Sans typeface
diff --git a/client/yarn.lock b/client/yarn.lock
index cc4ee3dd2..20805215d 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -4812,6 +4812,11 @@ eslint-plugin-react@^7.27.1:
semver "^6.3.0"
string.prototype.matchall "^4.0.6"
+eslint-plugin-simple-import-sort@^7.0.0:
+ version "7.0.0"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz#a1dad262f46d2184a90095a60c66fef74727f0f8"
+ integrity sha512-U3vEDB5zhYPNfxT5TYR7u01dboFZp+HNpnGhkDB2g/2E4wZ/g1Q9Ton8UwCLfRV9yAKyYqDh62oHOamvkFxsvw==
+
eslint-plugin-testing-library@^5.0.1:
version "5.1.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.1.0.tgz#6ad539a53d4e897d3045902f8e534e07cebd4e8b"