Implement camera stats graphs (#10831)

* Implement camera graphs

* Cleanup naming

* Cleanup rendering

* Cleanup spacing

* Fix audio name

* theme updates to match design corretly

* Mobile color fixes

* Mobile color fixes

web/src/views/live/LiveBirdseyeView.tsx

@@ -133,7 +133,7 @@ export default function LiveBirdseyeView() {
               onClick={() => navigate(-1)}
             >
               <IoMdArrowBack className="size-5" />
-              {isDesktop && "Back"}
+              {isDesktop && <div className="text-primary-foreground">Back</div>}
             </Button>
           ) : (
             <div />

web/src/views/live/LiveCameraView.tsx

@@ -228,7 +228,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 onClick={() => navigate(-1)}
               >
                 <IoMdArrowRoundBack className="size-5" />
-                {isDesktop && "Back"}
+                {isDesktop && (
+                  <div className="text-primary-foreground">Back</div>
+                )}
               </Button>
               <Button
                 className="flex items-center gap-2.5 rounded-lg"
@@ -248,7 +250,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 }}
               >
                 <LuHistory className="size-5" />
-                {isDesktop && "History"}
+                {isDesktop && (
+                  <div className="text-primary-foreground">History</div>
+                )}
               </Button>
             </div>
           ) : (

web/src/views/live/LiveDashboardView.tsx

@@ -139,7 +139,7 @@ export default function LiveDashboardView({
               className={`p-1 ${
                 layout == "grid"
                   ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                  : "bg-muted"
+                  : "bg-secondary"
               }`}
               size="xs"
               onClick={() => setLayout("grid")}
@@ -150,7 +150,7 @@ export default function LiveDashboardView({
               className={`p-1 ${
                 layout == "list"
                   ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                  : "bg-muted"
+                  : "bg-secondary"
               }`}
               size="xs"
               onClick={() => setLayout("list")}