Feat: Modify the background color of the agent canvas #3221 (#9020)

### What problem does this PR solve?

Feat: Modify the background color of the agent canvas #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/collapse.tsx

@@ -17,7 +17,7 @@ export function Collapse({
   children,
   rightContent,
   open,
-  defaultOpen = true,
+  defaultOpen = false,
   onOpenChange,
   disabled,
 }: CollapseProps) {

web/src/components/cross-language-form-field.tsx

@@ -57,6 +57,7 @@ export const CrossLanguageFormField = ({
               maxCount={100}
               {...field}
               onValueChange={field.onChange}
+              defaultValue={field.value}
               modalPopover
             />
           </FormControl>

web/src/components/page-header.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 
 export function PageHeader({ children }: PropsWithChildren) {
   return (
-    <header className="flex justify-between items-center border-b bg-background-header-bar p-5">
+    <header className="flex justify-between items-center border-b bg-text-title-invert p-5">
       {children}
     </header>
   );

web/src/components/ui/sheet.tsx

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 bg-text-title-invert rounded-lg p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {