refactor: :lipstick: smaller icons

5 files changed, 22 insertions, 18 deletions

diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index f51b7d9f..9909db0f 100644
--- a/extension/react-app/src/components/CodeBlock.tsx
+++ b/extension/react-app/src/components/CodeBlock.tsx
@@ -52,12 +52,12 @@ function CopyButton(props: { textToCopy: string; visible: boolean }) {
         }}
       >
         {clicked ? (
-          <CheckCircleIcon color="#00ff00" width="1.5em" height="1.5em" />
+          <CheckCircleIcon color="#00ff00" width="1.4em" height="1.4em" />
         ) : (
           <ClipboardIcon
             color={hovered ? "#00ff00" : "white"}
-            width="1.5em"
-            height="1.5em"
+            width="1.4em"
+            height="1.4em"
           />
         )}
       </StyledCopyButton>
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 9017f19c..982c42d1 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -273,6 +273,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
         {props.selectedContextItems.map((item, idx) => {
           return (
             <PillButton
+              areMultipleItems={props.selectedContextItems.length > 1}
               key={`${item.description.id.item_id}${idx}`}
               item={item}
               warning={
@@ -301,7 +302,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 props.onToggleAddContext();
               }}
             >
-              <DocumentPlusIcon width="1.5em" height="1.5em" />
+              <DocumentPlusIcon width="1.4em" height="1.4em" />
             </HeaderButtonWithText>
           ))}
       </div>
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 8e5f896e..586c49f0 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -28,8 +28,11 @@ const Button = styled.button`
   color: ${vscForeground};
   background-color: ${secondaryDark};
   border-radius: ${defaultBorderRadius};
-  padding: 8px;
+  padding: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
   overflow: hidden;
+  font-size: 13px;
 
   cursor: pointer;
 `;
@@ -50,7 +53,6 @@ const GridDiv = styled.div`
 
 const ButtonDiv = styled.div<{ backgroundColor: string }>`
   background-color: ${secondaryDark};
-  padding: 3px;
   height: 100%;
   display: flex;
   align-items: center;
@@ -81,6 +83,7 @@ interface PillButtonProps {
   warning?: string;
   index: number;
   addingHighlightedCode?: boolean;
+  areMultipleItems?: boolean;
 }
 
 const PillButton = (props: PillButtonProps) => {
@@ -134,8 +137,8 @@ const PillButton = (props: PillButtonProps) => {
             position: "relative",
             borderColor: props.warning
               ? "red"
-              : props.item.editing
-              ? "#8800aa"
+              : props.item.editing && props.areMultipleItems
+              ? vscForeground
               : "transparent",
             borderWidth: "1px",
             borderStyle: "solid",
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 19cdd2e1..d9280c75 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -170,9 +170,9 @@ function StepContainer(props: StepContainerProps) {
             <div className="m-2 flex items-center">
               {!isUserInput &&
                 (props.open ? (
-                  <ChevronDownIcon width="1.5em" height="1.5em" />
+                  <ChevronDownIcon width="1.4em" height="1.4em" />
                 ) : (
-                  <ChevronRightIcon width="1.5em" height="1.5em" />
+                  <ChevronRightIcon width="1.4em" height="1.4em" />
                 ))}
               {props.historyNode.observation?.title ||
                 (props.historyNode.step.name as any)}
@@ -195,7 +195,7 @@ function StepContainer(props: StepContainerProps) {
                     client?.showLogsAtIndex(props.index);
                   }}
                 >
-                  <MagnifyingGlassIcon width="1.5em" height="1.5em" />
+                  <MagnifyingGlassIcon width="1.4em" height="1.4em" />
                 </HeaderButtonWithText>
               )}
               <HeaderButtonWithText
@@ -211,14 +211,14 @@ function StepContainer(props: StepContainerProps) {
               >
                 {props.historyNode.active ? (
                   <StopCircleIcon
-                    width="1.5em"
-                    height="1.5em"
+                    width="1.4em"
+                    height="1.4em"
                     onClick={props.onDelete}
                   />
                 ) : (
                   <XMarkIcon
-                    width="1.5em"
-                    height="1.5em"
+                    width="1.4em"
+                    height="1.4em"
                     onClick={props.onDelete}
                   />
                 )}
@@ -232,8 +232,8 @@ function StepContainer(props: StepContainerProps) {
                   }}
                 >
                   <ArrowPathIcon
-                    width="1.5em"
-                    height="1.5em"
+                    width="1.4em"
+                    height="1.4em"
                     onClick={props.onRetry}
                   />
                 </HeaderButtonWithText>
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 25f836de..ae054947 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -46,7 +46,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
           }}
           text="Delete"
         >
-          <XMarkIcon width="1.5em" height="1.5em" />
+          <XMarkIcon width="1.4em" height="1.4em" />
         </HeaderButtonWithText>
       </DeleteButtonDiv>
     </StyledDiv>