diff options
| -rw-r--r-- | extension/react-app/src/components/CodeBlock.tsx | 6 | ||||
| -rw-r--r-- | extension/react-app/src/components/ComboBox.tsx | 3 | ||||
| -rw-r--r-- | extension/react-app/src/components/PillButton.tsx | 11 | ||||
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 18 | ||||
| -rw-r--r-- | extension/react-app/src/components/UserInputContainer.tsx | 2 | ||||
| -rw-r--r-- | extension/react-app/src/pages/gui.tsx | 6 |
6 files changed, 25 insertions, 21 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> diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx index 3ae8e14e..d3a8f566 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 width="1.5em" height="1.5em" /> + <TrashIcon width="1.4em" height="1.4em" /> </HeaderButtonWithText> <a href="https://continue.dev/docs/how-to-use-continue" className="no-underline" > <HeaderButtonWithText text="Docs"> - <BookOpenIcon width="1.5em" height="1.5em" /> + <BookOpenIcon width="1.4em" height="1.4em" /> </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 width="1.5em" height="1.5em" /> + <ChatBubbleOvalLeftEllipsisIcon width="1.4em" height="1.4em" /> </HeaderButtonWithText> </Footer> </> |