UI tweaks (#10946)

* fix warning

* Improve event switching speed

* Fix icon colors

* Only show frigate+ page when frigate+ is enabled

* Add link from reecordings to live as well

web/src/views/events/RecordingView.tsx

@@ -39,6 +39,7 @@ import MobileTimelineDrawer from "@/components/overlay/MobileTimelineDrawer";
 import MobileReviewSettingsDrawer from "@/components/overlay/MobileReviewSettingsDrawer";
 import Logo from "@/components/Logo";
 import { Skeleton } from "@/components/ui/skeleton";
+import { FaVideo } from "react-icons/fa";
 
 const SEGMENT_DURATION = 30;
 
@@ -251,14 +252,28 @@ export function RecordingView({
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
         )}
-        <Button
-          className="flex items-center gap-2 rounded-lg"
-          size="sm"
-          onClick={() => navigate(-1)}
+        <div
+          className={`flex items-center gap-2 ${isMobile ? "landscape:flex-col" : ""}`}
         >
-          <IoMdArrowRoundBack className="size-5" size="small" />
-          {isDesktop && <div className="text-primary">Back</div>}
-        </Button>
+          <Button
+            className={`flex items-center gap-2.5 rounded-lg`}
+            size="sm"
+            onClick={() => navigate(-1)}
+          >
+            <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+            {isDesktop && <div className="text-primary">Back</div>}
+          </Button>
+          <Button
+            className="flex items-center gap-2.5 rounded-lg"
+            size="sm"
+            onClick={() => {
+              navigate(`/#${mainCamera}`);
+            }}
+          >
+            <FaVideo className="size-5 text-secondary-foreground" />
+            {isDesktop && <div className="text-primary">Live</div>}
+          </Button>
+        </div>
         <div className="flex items-center justify-end gap-2">
           <MobileCameraDrawer
             allCameras={allCameras}