From b7f1b381a9ca4b287c76af761bbcfe366cafb0e1 Mon Sep 17 00:00:00 2001
From: JohnMark Sill <johnmarksilly@gmail.com>
Date: Wed, 16 Feb 2022 11:07:17 -0600
Subject: [PATCH] chore: formatting

---
 web/src/routes/Cameras.jsx      |  2 +-
 web/src/routes/Debug.jsx        | 20 ++++----
 web/src/routes/Events/index.jsx |  8 ++--
 web/src/routes/Recording.jsx    |  8 ++--
 web/src/routes/StyleGuide.jsx   | 82 ++++++++++++++++-----------------
 5 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/web/src/routes/Cameras.jsx b/web/src/routes/Cameras.jsx
index f6c148be4..3afe146f6 100644
--- a/web/src/routes/Cameras.jsx
+++ b/web/src/routes/Cameras.jsx
@@ -15,7 +15,7 @@ export default function Cameras() {
   return status !== FetchStatus.LOADED ? (
     <ActivityIndicator />
   ) : (
-    <div className='grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4'>
+    <div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4">
       {Object.entries(config.cameras).map(([camera, conf]) => (
         <Camera name={camera} conf={conf} />
       ))}
diff --git a/web/src/routes/Debug.jsx b/web/src/routes/Debug.jsx
index c5c5a0b31..f9b35c1a8 100644
--- a/web/src/routes/Debug.jsx
+++ b/web/src/routes/Debug.jsx
@@ -33,9 +33,9 @@ export default function Debug() {
   }, [config]);
 
   return (
-    <div className='space-y-4 p-2 px-4'>
+    <div className="space-y-4 p-2 px-4">
       <Heading>
-        Debug <span className='text-sm'>{service.version}</span>
+        Debug <span className="text-sm">{service.version}</span>
       </Heading>
 
       {!detectors ? (
@@ -44,8 +44,8 @@ export default function Debug() {
         </div>
       ) : (
         <Fragment>
-          <div data-testid='detectors' className='min-w-0 overflow-auto'>
-            <Table className='w-full'>
+          <div data-testid="detectors" className="min-w-0 overflow-auto">
+            <Table className="w-full">
               <Thead>
                 <Tr>
                   <Th>detector</Th>
@@ -67,8 +67,8 @@ export default function Debug() {
             </Table>
           </div>
 
-          <div data-testid='cameras' className='min-w-0 overflow-auto'>
-            <Table className='w-full'>
+          <div data-testid="cameras" className="min-w-0 overflow-auto">
+            <Table className="w-full">
               <Thead>
                 <Tr>
                   <Th>camera</Th>
@@ -96,12 +96,12 @@ export default function Debug() {
         </Fragment>
       )}
 
-      <div className='relative'>
-        <Heading size='sm'>Config</Heading>
-        <Button className='absolute top-8 right-4' onClick={handleCopyConfig}>
+      <div className="relative">
+        <Heading size="sm">Config</Heading>
+        <Button className="absolute top-8 right-4" onClick={handleCopyConfig}>
           Copy to Clipboard
         </Button>
-        <pre className='overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96'>
+        <pre className="overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96">
           {JSON.stringify(config, null, 2)}
         </pre>
       </div>
diff --git a/web/src/routes/Events/index.jsx b/web/src/routes/Events/index.jsx
index e56bcd7a1..48d326a1a 100644
--- a/web/src/routes/Events/index.jsx
+++ b/web/src/routes/Events/index.jsx
@@ -81,11 +81,11 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
     [apiHost, handleFilter, pathname, scrollToRef]
   );
   return (
-    <div className='space-y-4 p-2 px-4 w-full'>
+    <div className="space-y-4 p-2 px-4 w-full">
       <Heading>Events</Heading>
       <Filters onChange={handleFilter} searchParams={searchParams} />
-      <div className='min-w-0 overflow-auto'>
-        <Table className='min-w-full table-fixed'>
+      <div className="min-w-0 overflow-auto">
+        <Table className="min-w-full table-fixed">
           <TableHead />
 
           {events.map((props, idx) => {
@@ -95,7 +95,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
 
           <Tfoot>
             <Tr>
-              <Td className='text-center p-4' colSpan='8'>
+              <Td className="text-center p-4" colSpan="8">
                 {status === FetchStatus.LOADING ? <ActivityIndicator /> : reachedEnd ? 'No more events' : null}
               </Td>
             </Tr>
diff --git a/web/src/routes/Recording.jsx b/web/src/routes/Recording.jsx
index 8689e0449..0ec639a19 100644
--- a/web/src/routes/Recording.jsx
+++ b/web/src/routes/Recording.jsx
@@ -16,10 +16,10 @@ export default function Recording({ camera, date, hour, seconds }) {
 
   if (data.length === 0) {
     return (
-      <div className='space-y-4'>
+      <div className="space-y-4">
         <Heading>{camera} Recordings</Heading>
-        <div class='bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4' role='alert'>
-          <p class='font-bold'>No Recordings Found</p>
+        <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
+          <p class="font-bold">No Recordings Found</p>
           <p>Make sure you have enabled the record role in your configuration for the {camera} camera.</p>
         </div>
       </div>
@@ -69,7 +69,7 @@ export default function Recording({ camera, date, hour, seconds }) {
   }
 
   return (
-    <div className='space-y-4 p-2 px-4'>
+    <div className="space-y-4 p-2 px-4">
       <Heading>{camera} Recordings</Heading>
 
       <VideoPlayer
diff --git a/web/src/routes/StyleGuide.jsx b/web/src/routes/StyleGuide.jsx
index a360ba7e3..d1c0e2310 100644
--- a/web/src/routes/StyleGuide.jsx
+++ b/web/src/routes/StyleGuide.jsx
@@ -25,47 +25,47 @@ export default function StyleGuide() {
   };
 
   return (
-    <div className='p-2 px-4'>
-      <Heading size='md'>Button</Heading>
-      <div className='flex space-x-4 mb-4'>
+    <div className="p-2 px-4">
+      <Heading size="md">Button</Heading>
+      <div className="flex space-x-4 mb-4">
         <Button>Default</Button>
-        <Button color='red'>Danger</Button>
-        <Button color='green'>Save</Button>
-        <Button color='gray'>Gray</Button>
+        <Button color="red">Danger</Button>
+        <Button color="green">Save</Button>
+        <Button color="gray">Gray</Button>
         <Button disabled>Disabled</Button>
       </div>
-      <div className='flex space-x-4 mb-4'>
-        <Button type='text'>Default</Button>
-        <Button color='red' type='text'>
+      <div className="flex space-x-4 mb-4">
+        <Button type="text">Default</Button>
+        <Button color="red" type="text">
           Danger
         </Button>
-        <Button color='green' type='text'>
+        <Button color="green" type="text">
           Save
         </Button>
-        <Button color='gray' type='text'>
+        <Button color="gray" type="text">
           Gray
         </Button>
-        <Button disabled type='text'>
+        <Button disabled type="text">
           Disabled
         </Button>
       </div>
-      <div className='flex space-x-4 mb-4'>
-        <Button type='outlined'>Default</Button>
-        <Button color='red' type='outlined'>
+      <div className="flex space-x-4 mb-4">
+        <Button type="outlined">Default</Button>
+        <Button color="red" type="outlined">
           Danger
         </Button>
-        <Button color='green' type='outlined'>
+        <Button color="green" type="outlined">
           Save
         </Button>
-        <Button color='gray' type='outlined'>
+        <Button color="gray" type="outlined">
           Gray
         </Button>
-        <Button disabled type='outlined'>
+        <Button disabled type="outlined">
           Disabled
         </Button>
       </div>
 
-      <Heading size='md'>Dialog</Heading>
+      <Heading size="md">Dialog</Heading>
       <Button
         onClick={() => {
           setShowDialog(true);
@@ -76,8 +76,8 @@ export default function StyleGuide() {
       {showDialog ? (
         <Dialog
           onDismiss={handleDismissDialog}
-          title='This is a dialog'
-          text='Would you like to see more?'
+          title="This is a dialog"
+          text="Would you like to see more?"
           actions={[
             { text: 'Yes', color: 'red', onClick: handleDismissDialog },
             { text: 'No', onClick: handleDismissDialog },
@@ -85,41 +85,41 @@ export default function StyleGuide() {
         />
       ) : null}
 
-      <Heading size='md'>Switch</Heading>
-      <div className='flex-col space-y-4 max-w-4xl'>
-        <Switch label='Disabled, off' labelPosition='after' />
-        <Switch label='Disabled, on' labelPosition='after' checked />
+      <Heading size="md">Switch</Heading>
+      <div className="flex-col space-y-4 max-w-4xl">
+        <Switch label="Disabled, off" labelPosition="after" />
+        <Switch label="Disabled, on" labelPosition="after" checked />
         <Switch
-          label='Enabled, (off initial)'
-          labelPosition='after'
+          label="Enabled, (off initial)"
+          labelPosition="after"
           checked={switches[0]}
           id={0}
           onChange={handleSwitch}
         />
         <Switch
-          label='Enabled, (on initial)'
-          labelPosition='after'
+          label="Enabled, (on initial)"
+          labelPosition="after"
           checked={switches[1]}
           id={1}
           onChange={handleSwitch}
         />
 
-        <Switch checked={switches[2]} id={2} label='Label before' onChange={handleSwitch} />
-        <Switch checked={switches[3]} id={3} label='Label after' labelPosition='after' onChange={handleSwitch} />
+        <Switch checked={switches[2]} id={2} label="Label before" onChange={handleSwitch} />
+        <Switch checked={switches[3]} id={3} label="Label after" labelPosition="after" onChange={handleSwitch} />
       </div>
 
-      <Heading size='md'>Select</Heading>
-      <div className='flex space-x-4 mb-4 max-w-4xl'>
-        <Select label='Basic select box' options={['All', 'None', 'Other']} selected='None' />
+      <Heading size="md">Select</Heading>
+      <div className="flex space-x-4 mb-4 max-w-4xl">
+        <Select label="Basic select box" options={['All', 'None', 'Other']} selected="None" />
       </div>
 
-      <Heading size='md'>TextField</Heading>
-      <div className='flex-col space-y-4 max-w-4xl'>
-        <TextField label='Default text field' />
-        <TextField label='Pre-filled' value='This is my pre-filled value' />
-        <TextField label='With help' helpText='This is some help text' />
-        <TextField label='Leading icon' leadingIcon={ArrowDropdown} />
-        <TextField label='Trailing icon' trailingIcon={ArrowDropup} />
+      <Heading size="md">TextField</Heading>
+      <div className="flex-col space-y-4 max-w-4xl">
+        <TextField label="Default text field" />
+        <TextField label="Pre-filled" value="This is my pre-filled value" />
+        <TextField label="With help" helpText="This is some help text" />
+        <TextField label="Leading icon" leadingIcon={ArrowDropdown} />
+        <TextField label="Trailing icon" trailingIcon={ArrowDropup} />
       </div>
     </div>
   );