From f4f0df6ce46f9fb580a44650d0babe735c48d7e2 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 26 Mar 2025 12:07:02 -0600
Subject: [PATCH] change icon button icon

---
 web/src/components/ui/buttons/Button.stories.tsx      | 10 ++++++----
 web/src/components/ui/buttons/Button.tsx              | 11 +++++++++--
 .../ChatLayout/FileContainer/FileContainer.tsx        | 10 +++++++++-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/web/src/components/ui/buttons/Button.stories.tsx b/web/src/components/ui/buttons/Button.stories.tsx
index a1b0db63c..c53841029 100644
--- a/web/src/components/ui/buttons/Button.stories.tsx
+++ b/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'
   }
 };
 
diff --git a/web/src/components/ui/buttons/Button.tsx b/web/src/components/ui/buttons/Button.tsx
index 2ec52e98f..4a73559d2 100644
--- a/web/src/components/ui/buttons/Button.tsx
+++ b/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 = {
diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainer.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainer.tsx
index 61c82c755..6c95b259e 100644
--- a/web/src/layouts/ChatLayout/FileContainer/FileContainer.tsx
+++ b/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}