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/components/overlay/ExportDialog.tsx

@@ -122,8 +122,8 @@ export default function ExportDialog({
               setMode("select");
             }}
           >
-            <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
-            {isDesktop && "Export"}
+            <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
+            {isDesktop && <div className="text-primary-foreground">Export</div>}
           </Button>
         </Trigger>
         <Content

web/src/components/overlay/MobileCameraDrawer.tsx

@@ -24,7 +24,7 @@ export default function MobileCameraDrawer({
     <Drawer open={cameraDrawer} onOpenChange={setCameraDrawer}>
       <DrawerTrigger asChild>
         <Button className="rounded-lg capitalize" size="sm" variant="secondary">
-          <FaVideo className="text-muted-foreground" />
+          <FaVideo className="text-secondary-foreground" />
         </Button>
       </DrawerTrigger>
       <DrawerContent className="max-h-[75dvh] px-4 mx-1 rounded-t-2xl overflow-hidden">

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -137,7 +137,7 @@ export default function MobileReviewSettingsDrawer({
             className="w-full flex justify-center items-center gap-2"
             onClick={() => setDrawerMode("export")}
           >
-            <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
+            <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
             Export
           </Button>
         )}
@@ -146,7 +146,7 @@ export default function MobileReviewSettingsDrawer({
             className="w-full flex justify-center items-center gap-2"
             onClick={() => setDrawerMode("calendar")}
           >
-            <FaCalendarAlt className="fill-muted-foreground" />
+            <FaCalendarAlt className="fill-secondary-foreground" />
             Calendar
           </Button>
         )}
@@ -155,7 +155,7 @@ export default function MobileReviewSettingsDrawer({
             className="w-full flex justify-center items-center gap-2"
             onClick={() => setDrawerMode("filter")}
           >
-            <FaFilter className="fill-muted-foreground" />
+            <FaFilter className="fill-secondary-foreground" />
             Filter
           </Button>
         )}
@@ -282,7 +282,7 @@ export default function MobileReviewSettingsDrawer({
             variant="secondary"
             onClick={() => setDrawerMode("select")}
           >
-            <FaCog className="text-muted-foreground" />
+            <FaCog className="text-secondary-foreground" />
           </Button>
         </DrawerTrigger>
         <DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">

web/src/components/overlay/MobileTimelineDrawer.tsx

@@ -23,7 +23,7 @@ export default function MobileTimelineDrawer({
     <Drawer open={drawer} onOpenChange={setDrawer}>
       <DrawerTrigger asChild>
         <Button className="rounded-lg capitalize" size="sm" variant="secondary">
-          <FaFlag className="text-muted-foreground" />
+          <FaFlag className="text-secondary-foreground" />
         </Button>
       </DrawerTrigger>
       <DrawerContent className="max-h-[75dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">