UI tweaks (#10998)

* Make buttons consistent and have hover state

* Use switch for camera to be consistent

* Use everywhere and remove unused

* Use green for normal stats color

* Fix logs copy icon

* Remove warnings from pydantic serialization

* Ignore warnings

* Fix wsdl resolution

* Fix loading on switch

web/src/components/settings/AccountSettings.tsx

@@ -3,16 +3,18 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { isDesktop } from "react-device-detect";
 import { VscAccount } from "react-icons/vsc";
-import { Button } from "../ui/button";
 
 export default function AccountSettings() {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <Button size="icon" variant="ghost">
-          <VscAccount />
-        </Button>
+        <div
+          className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`}
+        >
+          <VscAccount className="size-5 md:m-[6px]" />
+        </div>
       </TooltipTrigger>
       <TooltipContent side="right">
         <p>Account</p>

web/src/components/settings/GeneralSettings.tsx

@@ -118,9 +118,11 @@ export default function GeneralSettings({ className }: GeneralSettings) {
             <a href="#">
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button size="icon" variant="ghost">
-                    <LuSettings />
-                  </Button>
+                  <div
+                    className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`}
+                  >
+                    <LuSettings className="size-5 md:m-[6px]" />
+                  </div>
                 </TooltipTrigger>
                 <TooltipContent side="right">
                   <p>Settings</p>