From e2348102a148df34f7aa2107736ee90b7b1aa280 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Fri, 21 Apr 2023 07:54:00 -0600
Subject: [PATCH] Improve icons

---
 web/src/components/TimelineSummary.jsx |  6 +++---
 web/src/icons/Exit.jsx                 | 12 ++++++++++++
 web/src/icons/Play.jsx                 |  4 ++--
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 web/src/icons/Exit.jsx

diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
index 6b427688d..829197c91 100644
--- a/web/src/components/TimelineSummary.jsx
+++ b/web/src/components/TimelineSummary.jsx
@@ -3,8 +3,8 @@ import useSWR from 'swr';
 import Heading from './Heading';
 import ActivityIndicator from './ActivityIndicator';
 import { formatUnixTimestampToDateTime } from '../utils/dateUtil';
-import MotionIcon from '../icons/Motion';
-import SnapshotIcon from '../icons/Snapshot';
+import PlayIcon from '../icons/Play';
+import ExitIcon from '../icons/Exit';
 import { Zone } from '../icons/Zone';
 import { useState } from 'preact/hooks';
 import { useApiHost } from '../api';
@@ -40,7 +40,7 @@ export default function TimelineSummary({ event }) {
                 aria-label={getTimelineItemDescription(config, item, event)}
                 onClick={() => setTimeIndex(index)}
               >
-                <MotionIcon className="w-8" />
+                {item.class_type == 'visible' ? <PlayIcon className="w-8" /> : <ExitIcon className="w-8" />}
               </Button>
             ) : (
               <Button
diff --git a/web/src/icons/Exit.jsx b/web/src/icons/Exit.jsx
new file mode 100644
index 000000000..35878d833
--- /dev/null
+++ b/web/src/icons/Exit.jsx
@@ -0,0 +1,12 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+function Exit({ className = '' }) {
+  return (
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
+      <path d="M22 12l-4-4v3h-8v2h8v3m2 2a10 10 0 110-12h-2.73a8 8 0 100 12z" />
+    </svg>
+  );
+}
+
+export default memo(Exit);
diff --git a/web/src/icons/Play.jsx b/web/src/icons/Play.jsx
index 995b68d66..5d1182631 100644
--- a/web/src/icons/Play.jsx
+++ b/web/src/icons/Play.jsx
@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function Play() {
+export function Play({ className = '' }) {
   return (
-    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
       <path fill="currentColor" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
     </svg>
   );