Camera wizard tweaks (#20643)

* dialog size tweaks

* move icon and make links in popvers clickable

* colors and clickable links

web/src/components/settings/CameraWizardDialog.tsx

@@ -20,6 +20,8 @@ import type {
   ConfigSetBody,
 } from "@/types/cameraWizard";
 import { processCameraName } from "@/utils/cameraUtil";
+import { isDesktop } from "react-device-detect";
+import { cn } from "@/lib/utils";
 
 type WizardState = {
   wizardData: Partial<WizardFormData>;
@@ -335,7 +337,15 @@ export default function CameraWizardDialog({
   return (
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent
-        className="max-h-[90dvh] max-w-4xl overflow-y-auto"
+        className={cn(
+          "max-h-[90dvh] max-w-xl overflow-y-auto",
+          isDesktop &&
+            currentStep == 0 &&
+            state.wizardData?.streams?.[0]?.testResult?.snapshot &&
+            "max-w-4xl",
+          isDesktop && currentStep == 1 && "max-w-2xl",
+          isDesktop && currentStep > 1 && "max-w-4xl",
+        )}
         onInteractOutside={(e) => {
           e.preventDefault();
         }}

web/src/components/settings/wizard/Step1NameCamera.tsx

@@ -6,7 +6,6 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-  FormDescription,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import {
@@ -298,6 +297,7 @@ export default function Step1NameCamera({
         };
 
         setTestResult(testResult);
+        onUpdate({ streams: [{ id: "", url: "", roles: [], testResult }] });
         toast.success(t("cameraWizard.step1.testSuccess"));
       } else {
         const error =
@@ -337,7 +337,7 @@ export default function Step1NameCamera({
       setIsTesting(false);
       setTestStatus("");
     }
-  }, [form, generateStreamUrl, t]);
+  }, [form, generateStreamUrl, t, onUpdate]);
 
   const onSubmit = (data: z.infer<typeof step1FormData>) => {
     onUpdate(data);
@@ -380,7 +380,9 @@ export default function Step1NameCamera({
                 name="cameraName"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t("cameraWizard.step1.cameraName")}</FormLabel>
+                    <FormLabel className="text-primary-variant">
+                      {t("cameraWizard.step1.cameraName")}
+                    </FormLabel>
                     <FormControl>
                       <Input
                         className="h-8"
@@ -400,7 +402,43 @@ export default function Step1NameCamera({
                 name="brandTemplate"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t("cameraWizard.step1.cameraBrand")}</FormLabel>
+                    <div className="flex items-center gap-1 pb-1">
+                      <FormLabel className="text-primary-variant">
+                        {t("cameraWizard.step1.cameraBrand")}
+                      </FormLabel>
+                      {field.value &&
+                        (() => {
+                          const selectedBrand = CAMERA_BRANDS.find(
+                            (brand) => brand.value === field.value,
+                          );
+                          return selectedBrand &&
+                            selectedBrand.value != "other" ? (
+                            <Popover>
+                              <PopoverTrigger asChild>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-4 w-4 p-0"
+                                >
+                                  <LuInfo className="size-3" />
+                                </Button>
+                              </PopoverTrigger>
+                              <PopoverContent className="pointer-events-auto w-80 text-primary-variant">
+                                <div className="space-y-2">
+                                  <h4 className="font-medium">
+                                    {selectedBrand.label}
+                                  </h4>
+                                  <p className="break-all text-sm text-muted-foreground">
+                                    {t("cameraWizard.step1.brandUrlFormat", {
+                                      exampleUrl: selectedBrand.exampleUrl,
+                                    })}
+                                  </p>
+                                </div>
+                              </PopoverContent>
+                            </Popover>
+                          ) : null;
+                        })()}
+                    </div>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value}
@@ -421,37 +459,6 @@ export default function Step1NameCamera({
                       </SelectContent>
                     </Select>
                     <FormMessage />
-                    {field.value &&
-                      (() => {
-                        const selectedBrand = CAMERA_BRANDS.find(
-                          (brand) => brand.value === field.value,
-                        );
-                        return selectedBrand &&
-                          selectedBrand.value != "other" ? (
-                          <FormDescription className="mt-1 pt-0.5 text-xs text-muted-foreground">
-                            <Popover>
-                              <PopoverTrigger>
-                                <div className="flex flex-row items-center gap-0.5 text-xs text-muted-foreground hover:text-primary">
-                                  <LuInfo className="mr-1 size-3" />
-                                  {t("cameraWizard.step1.brandInformation")}
-                                </div>
-                              </PopoverTrigger>
-                              <PopoverContent className="w-80">
-                                <div className="space-y-2">
-                                  <h4 className="font-medium">
-                                    {selectedBrand.label}
-                                  </h4>
-                                  <p className="break-all text-sm text-muted-foreground">
-                                    {t("cameraWizard.step1.brandUrlFormat", {
-                                      exampleUrl: selectedBrand.exampleUrl,
-                                    })}
-                                  </p>
-                                </div>
-                              </PopoverContent>
-                            </Popover>
-                          </FormDescription>
-                        ) : null;
-                      })()}
                   </FormItem>
                 )}
               />
@@ -463,7 +470,9 @@ export default function Step1NameCamera({
                     name="host"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>{t("cameraWizard.step1.host")}</FormLabel>
+                        <FormLabel className="text-primary-variant">
+                          {t("cameraWizard.step1.host")}
+                        </FormLabel>
                         <FormControl>
                           <Input
                             className="h-8"
@@ -481,7 +490,7 @@ export default function Step1NameCamera({
                     name="username"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>
+                        <FormLabel className="text-primary-variant">
                           {t("cameraWizard.step1.username")}
                         </FormLabel>
                         <FormControl>
@@ -503,7 +512,7 @@ export default function Step1NameCamera({
                     name="password"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>
+                        <FormLabel className="text-primary-variant">
                           {t("cameraWizard.step1.password")}
                         </FormLabel>
                         <FormControl>
@@ -544,7 +553,9 @@ export default function Step1NameCamera({
                   name="customUrl"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t("cameraWizard.step1.customUrl")}</FormLabel>
+                      <FormLabel className="text-primary-variant">
+                        {t("cameraWizard.step1.customUrl")}
+                      </FormLabel>
                       <FormControl>
                         <Input
                           className="h-8"

web/src/components/settings/wizard/Step2StreamConfig.tsx

@@ -277,7 +277,7 @@ export default function Step2StreamConfig({
 
               <div className="grid grid-cols-1 gap-4">
                 <div className="space-y-2">
-                  <label className="text-sm font-medium">
+                  <label className="text-sm font-medium text-primary-variant">
                     {t("cameraWizard.step2.url")}
                   </label>
                   <div className="flex flex-row items-center gap-2">
@@ -325,7 +325,7 @@ export default function Step2StreamConfig({
 
               <div className="space-y-2">
                 <div className="flex items-center gap-1">
-                  <Label className="text-sm font-medium">
+                  <Label className="text-sm font-medium text-primary-variant">
                     {t("cameraWizard.step2.roles")}
                   </Label>
                   <Popover>
@@ -334,7 +334,7 @@ export default function Step2StreamConfig({
                         <LuInfo className="size-3" />
                       </Button>
                     </PopoverTrigger>
-                    <PopoverContent className="w-80 text-xs">
+                    <PopoverContent className="pointer-events-auto w-80 text-xs">
                       <div className="space-y-2">
                         <div className="font-medium">
                           {t("cameraWizard.step2.rolesPopover.title")}
@@ -395,7 +395,7 @@ export default function Step2StreamConfig({
 
               <div className="space-y-2">
                 <div className="flex items-center gap-1">
-                  <Label className="text-sm font-medium">
+                  <Label className="text-sm font-medium text-primary-variant">
                     {t("cameraWizard.step2.featuresTitle")}
                   </Label>
                   <Popover>
@@ -404,7 +404,7 @@ export default function Step2StreamConfig({
                         <LuInfo className="size-3" />
                       </Button>
                     </PopoverTrigger>
-                    <PopoverContent className="w-80 text-xs">
+                    <PopoverContent className="pointer-events-auto w-80 text-xs">
                       <div className="space-y-2">
                         <div className="font-medium">
                           {t("cameraWizard.step2.featuresPopover.title")}