Fix colors for default light mode theme (#10909)

* fix colors for default light mode theme

* remove redundancy

* fix export dialog

* don't use primary-foreground

* change secondary button variant to be default button

* change filters button to bg-selected when filtering

* slightly lighten secondary-foreground in light mode

* fix mobile motion only button

web/src/components/overlay/ExportDialog.tsx

@@ -119,14 +119,13 @@ export default function ExportDialog({
         <Trigger asChild>
           <Button
             className="flex items-center gap-2"
-            variant="secondary"
             size="sm"
             onClick={() => {
               setMode("select");
             }}
           >
             <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
-            {isDesktop && <div className="text-primary-foreground">Export</div>}
+            {isDesktop && <div className="text-primary">Export</div>}
           </Button>
         </Trigger>
         <Content
@@ -374,7 +373,7 @@ function CustomTimeSelector({
 
   return (
     <div
-      className={`mt-3 flex items-center bg-secondary rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2"}`}
+      className={`mt-3 flex items-center bg-secondary text-secondary-foreground rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2"}`}
     >
       <FaCalendarAlt />
       <Popover
@@ -387,8 +386,8 @@ function CustomTimeSelector({
       >
         <PopoverTrigger asChild>
           <Button
-            className={isDesktop ? "" : "text-xs"}
-            variant={startOpen ? "select" : "secondary"}
+            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+            variant={startOpen ? "select" : "default"}
             size="sm"
             onClick={() => {
               setStartOpen(true);
@@ -438,7 +437,7 @@ function CustomTimeSelector({
           />
         </PopoverContent>
       </Popover>
-      <FaArrowRight className="size-4" />
+      <FaArrowRight className="size-4 text-primary" />
       <Popover
         open={endOpen}
         onOpenChange={(open) => {
@@ -449,8 +448,8 @@ function CustomTimeSelector({
       >
         <PopoverTrigger asChild>
           <Button
-            className={isDesktop ? "" : "text-xs"}
-            variant={endOpen ? "select" : "secondary"}
+            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+            variant={endOpen ? "select" : "default"}
             size="sm"
             onClick={() => {
               setEndOpen(true);

web/src/components/overlay/LogInfoDialog.tsx

@@ -32,28 +32,24 @@ export default function LogInfoDialog({
         {logLine && (
           <div className="size-full flex flex-col gap-5">
             <div className="w-min flex flex-col gap-1.5">
-              <div className="text-sm text-primary-foreground/40">Type</div>
+              <div className="text-sm text-primary/40">Type</div>
               <LogChip severity={logLine.severity} />
             </div>
             <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary-foreground/40">
-                Timestamp
-              </div>
+              <div className="text-sm text-primary/40">Timestamp</div>
               <div className="text-sm">{logLine.dateStamp}</div>
             </div>
             <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary-foreground/40">Tag</div>
+              <div className="text-sm text-primary/40">Tag</div>
               <div className="text-sm">{logLine.section}</div>
             </div>
             <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary-foreground/40">Message</div>
+              <div className="text-sm text-primary/40">Message</div>
               <div className="text-sm">{logLine.content}</div>
             </div>
             {helpfulLinks.length > 0 && (
               <div className="flex flex-col gap-1.5">
-                <div className="text-sm text-primary-foreground/40">
-                  Helpful Links
-                </div>
+                <div className="text-sm text-primary/40">Helpful Links</div>
                 {helpfulLinks.map((tip) => (
                   <Link to={tip.link} target="_blank" rel="noopener noreferrer">
                     <div className="text-sm text-selected hover:underline">

web/src/components/overlay/MobileCameraDrawer.tsx

@@ -23,7 +23,7 @@ export default function MobileCameraDrawer({
   return (
     <Drawer open={cameraDrawer} onOpenChange={setCameraDrawer}>
       <DrawerTrigger asChild>
-        <Button className="rounded-lg capitalize" size="sm" variant="secondary">
+        <Button className="rounded-lg capitalize" size="sm">
           <FaVideo className="text-secondary-foreground" />
         </Button>
       </DrawerTrigger>

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -146,19 +146,23 @@ export default function MobileReviewSettingsDrawer({
         )}
         {features.includes("calendar") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className={`w-full flex justify-center items-center gap-2 ${filter?.after ? "bg-selected text-background dark:text-primary" : ""}`}
             onClick={() => setDrawerMode("calendar")}
           >
-            <FaCalendarAlt className="fill-secondary-foreground" />
+            <FaCalendarAlt
+              className={`${filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+            />
             Calendar
           </Button>
         )}
         {features.includes("filter") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className={`w-full flex justify-center items-center gap-2 ${filter?.labels ? "bg-selected text-background dark:text-primary" : ""}`}
             onClick={() => setDrawerMode("filter")}
           >
-            <FaFilter className="fill-secondary-foreground" />
+            <FaFilter
+              className={`${filter?.labels ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+            />
             Filter
           </Button>
         )}
@@ -220,7 +224,6 @@ export default function MobileReviewSettingsDrawer({
         <SelectSeparator />
         <div className="p-2 flex justify-center items-center">
           <Button
-            variant="secondary"
             onClick={() => {
               onUpdateFilter({
                 ...filter,
@@ -280,12 +283,13 @@ export default function MobileReviewSettingsDrawer({
       >
         <DrawerTrigger asChild>
           <Button
-            className="rounded-lg capitalize"
+            className={`rounded-lg capitalize ${filter?.labels || filter?.after ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
             size="sm"
-            variant="secondary"
             onClick={() => setDrawerMode("select")}
           >
-            <FaCog className="text-secondary-foreground" />
+            <FaCog
+              className={`${filter?.labels || filter?.after ? "text-background dark:text-primary" : "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

@@ -22,7 +22,7 @@ export default function MobileTimelineDrawer({
   return (
     <Drawer open={drawer} onOpenChange={setDrawer}>
       <DrawerTrigger asChild>
-        <Button className="rounded-lg capitalize" size="sm" variant="secondary">
+        <Button className="rounded-lg capitalize" size="sm">
           <FaFlag className="text-secondary-foreground" />
         </Button>
       </DrawerTrigger>

web/src/components/overlay/SaveExportOverlay.tsx

@@ -31,9 +31,8 @@ export default function SaveExportOverlay({
           Save Export
         </Button>
         <Button
-          className="flex items-center gap-1 text-primary-foreground"
+          className="flex items-center gap-1 text-primary"
           size="sm"
-          variant="secondary"
           onClick={onCancel}
         >
           <LuX />

web/src/components/overlay/VainfoDialog.tsx

@@ -44,9 +44,7 @@ export default function VainfoDialog({
           <ActivityIndicator />
         )}
         <DialogFooter>
-          <Button variant="secondary" onClick={() => setShowVainfo(false)}>
-            Close
-          </Button>
+          <Button onClick={() => setShowVainfo(false)}>Close</Button>
           <Button variant="select" onClick={() => onCopyVainfo()}>
             Copy
           </Button>