update debug bundle setting page

client/ui/frontend/src/components/typography/HelpText.tsx

@@ -5,13 +5,15 @@ type Props = {
     children?: ReactNode;
     margin?: boolean;
     className?: string;
+    disabled?: boolean;
 };
 
-export const HelpText = ({ children, margin = true, className }: Props) => (
+export const HelpText = ({ children, margin = true, className, disabled = false }: Props) => (
     <span
         className={cn(
-            "text-[.81rem] dark:text-nb-gray-300 block font-light tracking-wide",
+            "text-[.81rem] dark:text-nb-gray-300 block font-light tracking-wide transition-all duration-300",
             margin && "mb-2",
+            disabled && "opacity-30 pointer-events-none",
             className,
         )}
     >

client/ui/frontend/src/components/typography/Label.tsx

@@ -10,13 +10,19 @@ const labelVariants = cva(
 type LabelProps = ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
     VariantProps<typeof labelVariants> & {
         as?: "label" | "div";
+        disabled?: boolean;
     };
 
 export const Label = forwardRef<HTMLElement, LabelProps>(function Label(
-    { className, as = "label", children, ...props },
+    { className, as = "label", disabled = false, children, ...props },
     ref,
 ) {
-    const classes = cn(labelVariants(), className, "select-none");
+    const classes = cn(
+        labelVariants(),
+        className,
+        "select-none transition-all duration-300",
+        disabled && "opacity-30 pointer-events-none",
+    );
 
     if (as === "div") {
         return (