cleanup + lint

src/features/editors/Editor.jsx

@@ -1,5 +1,5 @@
-import { Button } from '@chakra-ui/button';
-import { ArrowForwardIcon } from '@chakra-ui/icons';
+import { IconButton } from '@chakra-ui/button';
+import { SettingsIcon } from '@chakra-ui/icons';
 import { Grid, GridItem, Heading } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
 import { useContext } from 'react';
@@ -7,7 +7,6 @@ import { useEffect, useState } from 'react';
 import { EventContext } from '../../app/context/eventContext';
 import NumberedText from '../../common/components/text/NumberedText';
 import PlaybackControl from '../control/PlaybackControl';
-import EventForm from '../form/EventForm';
 import MessageForm from '../form/MessageForm';
 import PreviewContainer from '../viewers/PreviewContainer';
 import styles from './Editor.module.css';
@@ -34,11 +33,10 @@ export default function Editor() {
     >
       <GridItem rowSpan={3}>
         <Box className={styles.editor} borderRadius='0.5em'>
-          <Heading style={{ paddingBottom: '0.25em' }}>Event List</Heading>
-          <NumberedText
-            number={1}
-            text={'Manage and select event to run'}
-          />
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Event List
+          </Heading>
+          <NumberedText number={1} text={'Manage and select event to run'} />
           <div className={styles.content}>
             <EventList formMode={formMode} setFormMode={setFormMode} />
           </div>
@@ -47,7 +45,9 @@ export default function Editor() {
 
       <GridItem colStart={2} rowStart={2} rowSpan={2} colSpan={2}>
         <Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
-          <Heading style={{ paddingBottom: '0.25em' }}>Preview Displays</Heading>
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Preview Displays
+          </Heading>
           <NumberedText number={4} text={'Realtime screen preview'} />
           <div className={styles.content}>
             <PreviewContainer />
@@ -57,8 +57,13 @@ export default function Editor() {
 
       <GridItem colStart={2} rowStart={1} rowSpan={1} colSpan={1}>
         <Box className={styles.editor} borderRadius='0.5em'>
-          <Heading style={{ paddingBottom: '0.25em' }}>Display Messages</Heading>
-          <NumberedText number={2} text={'Show realtime messages on separate screen types'} />
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Display Messages
+          </Heading>
+          <NumberedText
+            number={2}
+            text={'Show realtime messages on separate screen types'}
+          />
           <div className={styles.content}></div>
           <MessageForm />
         </Box>
@@ -66,7 +71,9 @@ export default function Editor() {
 
       <GridItem colStart={3} rowStart={1}>
         <Box className={styles.editor} borderRadius='0.5em'>
-          <Heading style={{ paddingBottom: '0.25em' }}>Time Control</Heading>
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Time Control
+          </Heading>
           <NumberedText number={3} text={'Control Timer'} />
           <div className={styles.content}></div>
           <PlaybackControl />
@@ -74,7 +81,67 @@ export default function Editor() {
       </GridItem>
 
       <GridItem colStart={4} rowSpan={3}>
-        <Box className={styles.editor} borderRadius='0.5em'>S</Box>
+        <Box className={styles.editor} borderRadius='0.5em'>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '2em',
+              paddingTop: '3em',
+            }}
+          >
+            <IconButton icon={<SettingsIcon />} isRound variant='outline' />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#3b8cd8',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#3182ce',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#2778c4',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#1d6eba',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#1364b0',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#095aa6',
+                borderRadius: '50%',
+              }}
+            />
+          </div>
+        </Box>
       </GridItem>
     </Grid>
   );