diff options
Diffstat (limited to 'extension/react-app/src/components')
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> |