fix icon sizes

5 files changed, 24 insertions, 14 deletions

diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index 97b79ff5..f51b7d9f 100644
--- a/extension/react-app/src/components/CodeBlock.tsx
+++ b/extension/react-app/src/components/CodeBlock.tsx
@@ -52,11 +52,12 @@ function CopyButton(props: { textToCopy: string; visible: boolean }) {
         }}
       >
         {clicked ? (
-          <CheckCircleIcon color="#00ff00" className="h-6 w-6" />
+          <CheckCircleIcon color="#00ff00" width="1.5em" height="1.5em" />
         ) : (
           <ClipboardIcon
             color={hovered ? "#00ff00" : "white"}
-            className="h-6 w-6"
+            width="1.5em"
+            height="1.5em"
           />
         )}
       </StyledCopyButton>
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 35c36726..18e150e5 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -297,7 +297,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 props.onToggleAddContext();
               }}
             >
-              <DocumentPlusIcon className="h-6 w-6" />
+              <DocumentPlusIcon width="1.5em" height="1.5em" />
             </HeaderButtonWithText>
           ))}
       </div>
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 4726b609..19cdd2e1 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -167,12 +167,12 @@ function StepContainer(props: StepContainerProps) {
             loading={(props.historyNode.active as boolean) || false}
             error={props.historyNode.observation?.error ? true : false}
           >
-            <div className="m-2">
+            <div className="m-2 flex items-center">
               {!isUserInput &&
                 (props.open ? (
-                  <ChevronDownIcon className="h-6 w-6" />
+                  <ChevronDownIcon width="1.5em" height="1.5em" />
                 ) : (
-                  <ChevronRightIcon className="h-6 w-6" />
+                  <ChevronRightIcon width="1.5em" height="1.5em" />
                 ))}
               {props.historyNode.observation?.title ||
                 (props.historyNode.step.name as any)}
@@ -195,7 +195,7 @@ function StepContainer(props: StepContainerProps) {
                     client?.showLogsAtIndex(props.index);
                   }}
                 >
-                  <MagnifyingGlassIcon className="h-6 w-6" />
+                  <MagnifyingGlassIcon width="1.5em" height="1.5em" />
                 </HeaderButtonWithText>
               )}
               <HeaderButtonWithText
@@ -211,11 +211,16 @@ function StepContainer(props: StepContainerProps) {
               >
                 {props.historyNode.active ? (
                   <StopCircleIcon
-                    className="h-6 w-6"
+                    width="1.5em"
+                    height="1.5em"
                     onClick={props.onDelete}
                   />
                 ) : (
-                  <XMarkIcon className="h-6 w-6" onClick={props.onDelete} />
+                  <XMarkIcon
+                    width="1.5em"
+                    height="1.5em"
+                    onClick={props.onDelete}
+                  />
                 )}
               </HeaderButtonWithText>
               {props.historyNode.observation?.error ? (
@@ -226,7 +231,11 @@ function StepContainer(props: StepContainerProps) {
                     props.onRetry();
                   }}
                 >
-                  <ArrowPathIcon className="h-6 w-6" onClick={props.onRetry} />
+                  <ArrowPathIcon
+                    width="1.5em"
+                    height="1.5em"
+                    onClick={props.onRetry}
+                  />
                 </HeaderButtonWithText>
               ) : (
                 <></>
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index ed11851f..d44be38e 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -37,7 +37,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
           }}
           text="Delete"
         >
-          <XMarkIcon className="h-6 w-6" />
+          <XMarkIcon width="1.5em" height="1.5em" />
         </HeaderButtonWithText>
       </div>
     </StyledDiv>
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index 57185ea0..3ae8e14e 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -536,14 +536,14 @@ If you already have an LLM deployed on your own infrastructure, or would like to
           }}
           text="Clear"
         >
-          <TrashIcon className="h-6 w-6" />
+          <TrashIcon width="1.5em" height="1.5em" />
         </HeaderButtonWithText>
         <a
           href="https://continue.dev/docs/how-to-use-continue"
           className="no-underline"
         >
           <HeaderButtonWithText text="Docs">
-            <BookOpenIcon className="h-6 w-6" />
+            <BookOpenIcon width="1.5em" height="1.5em" />
           </HeaderButtonWithText>
         </a>
         <HeaderButtonWithText
@@ -557,7 +557,7 @@ If you already have an LLM deployed on your own infrastructure, or would like to
           }}
           text="Feedback"
         >
-          <ChatBubbleOvalLeftEllipsisIcon className="h-6 w-6" />
+          <ChatBubbleOvalLeftEllipsisIcon width="1.5em" height="1.5em" />
         </HeaderButtonWithText>
       </Footer>
     </>