diff options
Diffstat (limited to 'extension/react-app/src/components')
6 files changed, 87 insertions, 24 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..df3f970c 100644 --- a/extension/react-app/src/components/ComboBox.tsx +++ b/extension/react-app/src/components/ComboBox.tsx @@ -32,7 +32,9 @@ const SEARCH_INDEX_NAME = "continue_context_items"; const mainInputFontSize = 13; const EmptyPillDiv = styled.div` - padding: 8px; + padding: 4px; + padding-left: 8px; + padding-right: 8px; border-radius: ${defaultBorderRadius}; border: 1px dashed ${lightGray}; color: ${lightGray}; @@ -273,6 +275,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 +304,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> @@ -378,6 +381,14 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { Math.min(prev + 1, history.length) ); setCurrentlyInContextQuery(false); + } else if (event.key === "Escape") { + setCurrentlyInContextQuery(false); + if (downshiftProps.isOpen) { + downshiftProps.closeMenu(); + } else { + // Move cursor back over to the editor + postVscMessage("focusEditor", {}); + } } }, onClick: () => { diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx index 8e5f896e..edef808e 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) => { @@ -100,8 +103,8 @@ const PillButton = (props: PillButtonProps) => { <pre> <code style={{ - fontSize: "11px", - backgroundColor: vscBackground, + fontSize: "12px", + backgroundColor: "transparent", color: vscForeground, whiteSpace: "pre-wrap", wordWrap: "break-word", @@ -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/RingLoader.tsx b/extension/react-app/src/components/RingLoader.tsx new file mode 100644 index 00000000..5eb8a60f --- /dev/null +++ b/extension/react-app/src/components/RingLoader.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import styled, { keyframes } from "styled-components"; +import { buttonColor, vscBackground, vscForeground } from "."; + +const rotate = keyframes` + 0% { + stroke-dashoffset: 100; + } + 100% { + stroke-dashoffset: 12; + } +`; + +const LoaderSvg = styled.svg` + transform: rotate(-90deg); + width: 40px; + height: 40px; + opacity: 50%; + + circle { + fill: none; + stroke: ${vscForeground}; + stroke-width: 2; + stroke-dasharray: 100; + stroke-dashoffset: 0; + animation: ${rotate} 6s ease-out infinite; + stroke-linecap: round; + } +`; + +const RingLoader = () => ( + <div className="m-auto w-full text-center"> + <LoaderSvg viewBox="0 0 32 32"> + <circle cx="16" cy="16" r="14" /> + </LoaderSvg> + </div> +); + +export default RingLoader; diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index 19cdd2e1..1f999892 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -63,6 +63,14 @@ const HeaderDiv = styled.div<{ error: boolean; loading: boolean }>` padding-right: 8px; `; +const LeftHeaderSubDiv = styled.div` + margin: 8px; + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + grid-gap: 2px; +`; + const ContentDiv = styled.div<{ isUserInput: boolean }>` padding: 8px; background-color: ${(props) => @@ -167,16 +175,16 @@ function StepContainer(props: StepContainerProps) { loading={(props.historyNode.active as boolean) || false} error={props.historyNode.observation?.error ? true : false} > - <div className="m-2 flex items-center"> + <LeftHeaderSubDiv> {!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)} - </div> + </LeftHeaderSubDiv> {/* <HeaderButton onClick={(e) => { e.stopPropagation(); @@ -195,7 +203,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 +219,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 +240,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..7e964ad9 100644 --- a/extension/react-app/src/components/UserInputContainer.tsx +++ b/extension/react-app/src/components/UserInputContainer.tsx @@ -21,6 +21,8 @@ const StyledDiv = styled.div` align-items: center; border-bottom: 1px solid ${vscBackground}; padding: 8px; + padding-top: 4px; + padding-bottom: 4px; `; const DeleteButtonDiv = styled.div` @@ -35,7 +37,7 @@ const UserInputContainer = (props: UserInputContainerProps) => { <StyledMarkdownPreview light={true} source={props.children} - className="mr-5" + className="mr-6" /> {/* <ReactMarkdown children={props.children} className="w-fit mr-10" /> */} <DeleteButtonDiv> @@ -46,7 +48,7 @@ const UserInputContainer = (props: UserInputContainerProps) => { }} text="Delete" > - <XMarkIcon width="1.5em" height="1.5em" /> + <XMarkIcon width="1.4em" height="1.4em" /> </HeaderButtonWithText> </DeleteButtonDiv> </StyledDiv> |