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