change icon button icon

web/src/components/ui/buttons/Button.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 import * as OutlinedIcons from '../icons/NucleoIconOutlined';
 import { IconSelectOutlined } from '../icons/NucleoIconOutlined/iconStories';
+import { ArrowUp } from '../icons/NucleoIconOutlined';
 
 const meta: Meta<typeof Button> = {
   title: 'UI/Buttons/Button',
@@ -146,10 +147,11 @@ export const Small: Story = {
 
 export const IconButton: Story = {
   args: {
-    variant: 'default',
-    size: 'default',
-    prefix: 'ShapeSquare',
-    children: ''
+    variant: 'black',
+    size: 'tall',
+    prefix: 'ArrowUp',
+    children: '',
+    rounding: 'full'
   }
 };
 

web/src/components/ui/buttons/Button.tsx

@@ -81,7 +81,7 @@ export const buttonIconVariants = cva('', {
   variants: {
     variant: {
       default: 'text-icon-color',
-      black: 'text-white',
+      black: 'text-white!',
       primary: 'text-white',
       ghost: 'text-icon-color',
       link: 'text-icon-color',
@@ -98,7 +98,14 @@ export const buttonIconVariants = cva('', {
       true: 'text-gray-light',
       false: ''
     }
+  },
+  compoundVariants: [
+    {
+      variant: 'black',
+      disabled: true,
+      className: 'text-white'
     }
+  ]
 });
 
 const loadingSizeVariants = {

web/src/layouts/ChatLayout/FileContainer/FileContainer.tsx

@@ -82,7 +82,15 @@ export const FileContainer: React.FC<FileContainerProps> = ({ children }) => {
   }, [isOpenSecondary]);
 
   return (
-    <AppPageLayout className="flex h-full min-w-[380px] flex-col" header={<FileContainerHeader />}>
+    <AppPageLayout
+      className="flex h-full min-w-[380px] flex-col"
+      header={useMemo(
+        () => (
+          <FileContainerHeader />
+        ),
+        []
+      )}
+      headerClassName="border-l">
       <AppSplitter
         ref={appSplitterRef}
         autoSaveId={autoSaveId}