From a79df6d9c4f4528dfd7c76106d0cb8557da07e01 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 2 Apr 2024 12:22:09 -0600
Subject: [PATCH] Use history button next to back button

---
 .../dynamic/CameraFeatureToggle.tsx           |  4 +-
 web/src/views/live/LiveCameraView.tsx         | 61 ++++++++++---------
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/web/src/components/dynamic/CameraFeatureToggle.tsx b/web/src/components/dynamic/CameraFeatureToggle.tsx
index 3a7af29c3..07da7a7a5 100644
--- a/web/src/components/dynamic/CameraFeatureToggle.tsx
+++ b/web/src/components/dynamic/CameraFeatureToggle.tsx
@@ -42,7 +42,9 @@ export default function CameraFeatureToggle({
         variants[variant][isActive ? "active" : "inactive"]
       }`}
     >
-      <Icon className="size-5 md:m-[6px]" />
+      <Icon
+        className={`size-5 md:m-[6px] ${isActive ? "text-white" : "text-muted-foreground"}`}
+      />
     </div>
   );
 
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 106ba0a50..2da863afb 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -51,10 +51,11 @@ import {
 } from "react-icons/fa";
 import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
 import { HiViewfinderCircle } from "react-icons/hi2";
-import { IoMdArrowBack, IoMdArrowDown } from "react-icons/io";
+import { IoMdArrowBack } from "react-icons/io";
 import {
   LuEar,
   LuEarOff,
+  LuHistory,
   LuPictureInPicture,
   LuVideo,
   LuVideoOff,
@@ -219,14 +220,35 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           }
         >
           {!fullscreen ? (
-            <Button
-              className={`flex items-center gap-2.5 rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
-              size={isMobile ? "icon" : "sm"}
-              onClick={() => navigate(-1)}
-            >
-              <IoMdArrowBack className="size-5" />
-              {isDesktop && "Back"}
-            </Button>
+            <div className="flex items-center gap-2">
+              <Button
+                className={`flex items-center gap-2.5 rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
+                size="sm"
+                onClick={() => navigate(-1)}
+              >
+                <IoMdArrowBack className="size-5" />
+                {isDesktop && "Back"}
+              </Button>
+              <Button
+                className="flex items-center gap-2.5 rounded-lg"
+                size="sm"
+                onClick={() => {
+                  navigate("events", {
+                    state: {
+                      severity: "alert",
+                      recording: {
+                        camera: camera.name,
+                        startTime: Date.now() / 1000 - 30,
+                        severity: "alert",
+                      } as RecordingStartingPoint,
+                    },
+                  });
+                }}
+              >
+                <LuHistory className="size-5" />
+                {isDesktop && "History"}
+              </Button>
+            </div>
           ) : (
             <div />
           )}
@@ -334,27 +356,6 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             />
           )}
         </TransformComponent>
-        <div className="flex justify-center items-center">
-          <Button
-            className="flex items-center gap-2.5 rounded-lg"
-            size="sm"
-            onClick={() => {
-              navigate("events", {
-                state: {
-                  severity: "alert",
-                  recording: {
-                    camera: camera.name,
-                    startTime: Date.now() / 1000 - 30,
-                    severity: "alert",
-                  } as RecordingStartingPoint,
-                },
-              });
-            }}
-          >
-            <IoMdArrowDown />
-            History
-          </Button>
-        </div>
       </div>
     </TransformWrapper>
   );