Match designs better

web/src/components/dynamic/CameraFeatureToggle.tsx

@@ -43,7 +43,7 @@ export default function CameraFeatureToggle({
       }`}
     >
       <Icon
-        className={`size-5 md:m-[6px] ${isActive ? "text-white" : "text-muted-foreground"}`}
+        className={`size-5 md:m-[6px] ${isActive ? "text-white" : "text-secondary-foreground"}`}
       />
     </div>
   );

web/src/views/events/RecordingView.tsx

@@ -251,6 +251,7 @@ export function RecordingView({
         <Button
           className="flex items-center gap-2 rounded-lg"
           size="sm"
+          variant="secondary"
           onClick={() => navigate(-1)}
         >
           <IoMdArrowRoundBack className="size-5" size="small" />

web/src/views/live/LiveCameraView.tsx

@@ -51,7 +51,7 @@ import {
 } from "react-icons/fa";
 import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
 import { HiViewfinderCircle } from "react-icons/hi2";
-import { IoMdArrowBack } from "react-icons/io";
+import { IoMdArrowRoundBack } from "react-icons/io";
 import {
   LuEar,
   LuEarOff,
@@ -222,16 +222,18 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           {!fullscreen ? (
             <div className="flex items-center gap-2">
               <Button
-                className={`flex items-center gap-2.5 rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
+                className={`flex items-center gap-2.5 rounded-lg`}
                 size="sm"
+                variant="secondary"
                 onClick={() => navigate(-1)}
               >
-                <IoMdArrowBack className="size-5" />
+                <IoMdArrowRoundBack className="size-5" />
                 {isDesktop && "Back"}
               </Button>
               <Button
                 className="flex items-center gap-2.5 rounded-lg"
                 size="sm"
+                variant="secondary"
                 onClick={() => {
                   navigate("events", {
                     state: {

web/themes/theme-default.css

@@ -27,8 +27,8 @@
     --secondary: hsl(0, 0%, 96%);
     --secondary: 0 0% 96%;
 
-    --secondary-foreground: hsl(0, 0%, 45%);
-    --secondary-foreground: 0 0% 45%;
+    --secondary-foreground: hsl(0, 0%, 32%);
+    --secondary-foreground: 0 0% 32%;
 
     --secondary-highlight: hsl(0, 0%, 94%);
     --secondary-highlight: 0 0% 94%;