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/pages/Logs.tsx

@@ -356,11 +356,10 @@ function Logs() {
           <Button
             className="flex justify-between items-center gap-2"
             size="sm"
-            variant="secondary"
             onClick={handleCopyLogs}
           >
             <FaCopy />
-            <div className="hidden md:block text-primary-foreground">
+            <div className="hidden md:block text-primary">
               Copy to Clipboard
             </div>
           </Button>
@@ -373,8 +372,7 @@ function Logs() {
 
       {initialScroll && !endVisible && (
         <Button
-          className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-md text-primary-foreground bg-secondary-foreground z-20 p-2"
-          variant="secondary"
+          className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-md text-primary bg-secondary-foreground z-20 p-2"
           onClick={() =>
             contentRef.current?.scrollTo({
               top: contentRef.current?.scrollHeight,
@@ -386,8 +384,8 @@ function Logs() {
         </Button>
       )}
 
-      <div className="size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-primary border border-secondary rounded-md overflow-hidden">
-        <div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary-foreground/40">
+      <div className="size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-background_alt border border-secondary rounded-md overflow-hidden">
+        <div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary/40">
           <div className="p-1 flex items-center capitalize">Type</div>
           <div className="col-span-2 sm:col-span-1 flex items-center">
             Timestamp

web/src/pages/SubmitPlus.tsx

@@ -237,9 +237,9 @@ function PlusFilterGroup({
         }}
       >
         <Trigger asChild>
-          <Button size="sm" className="mx-1 capitalize" variant="secondary">
+          <Button size="sm" className="mx-1 capitalize">
             <FaVideo className="md:mr-[10px] text-secondary-foreground" />
-            <div className="hidden md:block text-primary-foreground">
+            <div className="hidden md:block text-primary">
               {selectedCameras == undefined
                 ? "All Cameras"
                 : `${selectedCameras.length} Cameras`}
@@ -314,9 +314,9 @@ function PlusFilterGroup({
         }}
       >
         <Trigger asChild>
-          <Button size="sm" className="mx-1 capitalize" variant="secondary">
+          <Button size="sm" className="mx-1 capitalize">
             <FaList className="md:mr-[10px] text-secondary-foreground" />
-            <div className="hidden md:block text-primary-foreground">
+            <div className="hidden md:block text-primary">
               {selectedLabels == undefined
                 ? "All Labels"
                 : `${selectedLabels.length} Labels`}

web/src/pages/UIPlayground.tsx

@@ -318,7 +318,11 @@ function UIPlayground() {
                 <CameraActivityIndicator />
               </div>
               <p>
-                <Button onClick={handleZoomOut} disabled={zoomLevel === 0}>
+                <Button
+                  variant="default"
+                  onClick={handleZoomOut}
+                  disabled={zoomLevel === 0}
+                >
                   Zoom Out
                 </Button>
                 <Button