Tweaks (#22965)

* use ffmpeg to probe rtsp urls instead of cv2

cv2 is faster (no subprocess launch) and will continue to be used for recording segments

* tweak faq

* change unsaved color to orange

avoids confusion with validation errors (red)

* don't use any variant of orange as a profile color

avoids confusion with unsaved changes

* more unsaved color tweaks

web/src/components/config-form/sectionExtras/CameraReviewClassification.tsx

@@ -218,7 +218,7 @@ export default function CameraReviewClassification({
                 <Label
                   className={cn(
                     "flex flex-row items-center text-base",
-                    alertsZonesModified && "text-danger",
+                    alertsZonesModified && "text-unsaved",
                   )}
                 >
                   <Trans ns="views/settings">cameraReview.review.alerts</Trans>
@@ -286,7 +286,7 @@ export default function CameraReviewClassification({
                 <Label
                   className={cn(
                     "flex flex-row items-center text-base",
-                    detectionsZonesModified && "text-danger",
+                    detectionsZonesModified && "text-unsaved",
                   )}
                 >
                   <Trans ns="views/settings">

web/src/components/config-form/sections/BaseSection.tsx

@@ -1012,7 +1012,7 @@ export function ConfigSection({
         >
           {hasChanges && (
             <div className="flex items-center gap-2">
-              <span className="text-sm text-danger">
+              <span className="text-sm text-unsaved">
                 {t("unsavedChanges", {
                   ns: "views/settings",
                   defaultValue: "You have unsaved changes",
@@ -1299,7 +1299,7 @@ export function ConfigSection({
                 {hasChanges && (
                   <Badge
                     variant="secondary"
-                    className="cursor-default bg-danger text-xs text-white hover:bg-danger"
+                    className="cursor-default bg-unsaved text-xs text-black hover:bg-unsaved"
                   >
                     {t("button.modified", {
                       ns: "common",

web/src/components/config-form/theme/fields/KnownPlatesField.tsx

@@ -154,7 +154,7 @@ export function KnownPlatesField(props: FieldProps) {
             <div className="flex items-center justify-between">
               <div>
                 <CardTitle
-                  className={cn("text-sm", isModified && "text-danger")}
+                  className={cn("text-sm", isModified && "text-unsaved")}
                 >
                   {title}
                 </CardTitle>

web/src/components/config-form/theme/fields/ReplaceRulesField.tsx

@@ -142,7 +142,7 @@ export function ReplaceRulesField(props: FieldProps) {
             <div className="flex items-center justify-between">
               <div>
                 <CardTitle
-                  className={cn("text-sm", isModified && "text-danger")}
+                  className={cn("text-sm", isModified && "text-unsaved")}
                 >
                   {title}
                 </CardTitle>

web/src/components/config-form/theme/templates/FieldTemplate.tsx

@@ -497,7 +497,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
         htmlFor={id}
         className={cn(
           "text-sm font-medium",
-          isModified && "text-danger",
+          isModified && "text-unsaved",
           hasFieldErrors && "text-destructive",
         )}
       >
@@ -516,7 +516,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
     return (
       <Label
         htmlFor={id}
-        className={cn("text-sm font-medium", isModified && "text-danger")}
+        className={cn("text-sm font-medium", isModified && "text-unsaved")}
       >
         {finalLabel}
         {required && <span className="ml-1 text-destructive">*</span>}
@@ -535,7 +535,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
         htmlFor={id}
         className={cn(
           "text-sm font-medium",
-          isModified && "text-danger",
+          isModified && "text-unsaved",
           hasFieldErrors && "text-destructive",
         )}
       >

web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx

@@ -467,7 +467,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
                 <CardTitle
                   className={cn(
                     "flex items-center text-sm",
-                    hasModifiedDescendants && "text-danger",
+                    hasModifiedDescendants && "text-unsaved",
                   )}
                 >
                   {inferredLabel}

web/src/pages/Settings.tsx

@@ -1435,7 +1435,7 @@ export default function Settings() {
                 />
               )}
               {showUnsavedDot && (
-                <span className="inline-block size-2 rounded-full bg-danger" />
+                <span className="inline-block size-2 rounded-full bg-unsaved" />
               )}
             </div>
           )}
@@ -1516,7 +1516,7 @@ export default function Settings() {
               <div className="sticky bottom-0 z-50 mt-2 bg-background p-4">
                 <div className="flex flex-col items-center gap-2">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-danger">
+                    <span className="text-sm text-unsaved">
                       {t("unsavedChanges", {
                         ns: "views/settings",
                         defaultValue: "You have unsaved changes",

web/src/utils/profileColors.ts

@@ -79,11 +79,11 @@ const PROFILE_COLORS: ProfileColor[] = [
     bgMuted: "bg-green-400/20",
   },
   {
-    bg: "bg-amber-400",
-    text: "text-amber-400",
-    dot: "bg-amber-400",
-    border: "border-amber-400",
-    bgMuted: "bg-amber-400/20",
+    bg: "bg-fuchsia-500",
+    text: "text-fuchsia-500",
+    dot: "bg-fuchsia-500",
+    border: "border-fuchsia-500",
+    bgMuted: "bg-fuchsia-500/20",
   },
   {
     bg: "bg-slate-400",
@@ -93,11 +93,11 @@ const PROFILE_COLORS: ProfileColor[] = [
     bgMuted: "bg-slate-400/20",
   },
   {
-    bg: "bg-orange-300",
-    text: "text-orange-300",
-    dot: "bg-orange-300",
-    border: "border-orange-300",
-    bgMuted: "bg-orange-300/20",
+    bg: "bg-stone-500",
+    text: "text-stone-500",
+    dot: "bg-stone-500",
+    border: "border-stone-500",
+    bgMuted: "bg-stone-500/20",
   },
   {
     bg: "bg-blue-300",

web/src/views/settings/Go2RtcStreamsSettingsView.tsx

@@ -380,7 +380,9 @@ export default function Go2RtcStreamsSettingsView({
         >
           {hasChanges && (
             <div className="flex items-center gap-2">
-              <span className="text-sm text-danger">{t("unsavedChanges")}</span>
+              <span className="text-sm text-unsaved">
+                {t("unsavedChanges")}
+              </span>
             </div>
           )}
           <div className="flex w-full items-center gap-2 md:w-auto">

web/src/views/settings/SingleSectionPage.tsx

@@ -212,7 +212,7 @@ export function SingleSectionPage({
             {sectionStatus.hasChanges && (
               <Badge
                 variant="secondary"
-                className="cursor-default bg-danger text-xs text-white hover:bg-danger"
+                className="cursor-default bg-unsaved text-xs text-black hover:bg-unsaved"
               >
                 {t("button.modified", {
                   ns: "common",
@@ -250,7 +250,7 @@ export function SingleSectionPage({
           {sectionStatus.hasChanges && (
             <Badge
               variant="secondary"
-              className="cursor-default bg-danger text-xs text-white hover:bg-danger"
+              className="cursor-default bg-unsaved text-xs text-black hover:bg-unsaved"
             >
               {t("button.modified", { ns: "common", defaultValue: "Modified" })}
             </Badge>