Use history button next to back button

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>
   );
 

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 ? (
+            <div className="flex items-center gap-2">
               <Button
                 className={`flex items-center gap-2.5 rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
-              size={isMobile ? "icon" : "sm"}
+                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>
   );