From 08221a0879b4a163eab6860524f255dbcb4743ae Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Mon, 17 Jul 2023 12:05:03 -0700 Subject: match vscode color theme --- extension/react-app/src/components/ComboBox.tsx | 10 +++++++--- .../react-app/src/components/InputAndButton.tsx | 10 +++++----- extension/react-app/src/components/PillButton.tsx | 9 +++++++-- .../react-app/src/components/StepContainer.tsx | 12 ++++++++--- extension/react-app/src/components/TextDialog.tsx | 14 +++++++------ extension/react-app/src/components/index.ts | 23 ++++++++++++++-------- extension/react-app/src/index.css | 4 ++-- extension/react-app/src/pages/gui.tsx | 11 ++++++++--- 8 files changed, 61 insertions(+), 32 deletions(-) (limited to 'extension/react-app/src') diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx index dbebd534..0ea8a3e1 100644 --- a/extension/react-app/src/components/ComboBox.tsx +++ b/extension/react-app/src/components/ComboBox.tsx @@ -6,6 +6,7 @@ import { lightGray, secondaryDark, vscBackground, + vscForeground, } from "."; import CodeBlock from "./CodeBlock"; import PillButton from "./PillButton"; @@ -48,7 +49,7 @@ const MainTextInput = styled.textarea` height: auto; width: 100%; background-color: ${secondaryDark}; - color: white; + color: ${vscForeground}; z-index: 1; border: 1px solid transparent; @@ -71,7 +72,7 @@ const Ul = styled.ul<{ position: absolute; background: ${vscBackground}; background-color: ${secondaryDark}; - color: white; + color: ${vscForeground}; max-height: ${UlMaxHeight}px; width: calc(100% - 16px); overflow-y: scroll; @@ -95,6 +96,7 @@ const Li = styled.li<{ selected: boolean; isLastItem: boolean; }>` + background-color: ${secondaryDark}; ${({ highlighted }) => highlighted && "background: #ff000066;"} ${({ selected }) => selected && "font-weight: bold;"} padding: 0.5rem 0.75rem; @@ -218,7 +220,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { ? "Editing such a large range may be slow" : undefined } - onlyShowDelete={highlightedCodeSections.length <= 1} + onlyShowDelete={ + highlightedCodeSections.length <= 1 || section.editing + } editing={section.editing} pinned={section.pinned} index={idx} diff --git a/extension/react-app/src/components/InputAndButton.tsx b/extension/react-app/src/components/InputAndButton.tsx index 0a8592f2..8019d014 100644 --- a/extension/react-app/src/components/InputAndButton.tsx +++ b/extension/react-app/src/components/InputAndButton.tsx @@ -1,6 +1,6 @@ import React, { useRef } from "react"; import styled from "styled-components"; -import { vscBackground } from "."; +import { vscBackground, vscForeground } from "."; interface InputAndButtonProps { onUserInput: (input: string) => void; @@ -16,7 +16,7 @@ const Input = styled.input` padding: 0.5rem; border: 1px solid white; background-color: ${vscBackground}; - color: white; + color: ${vscForeground}; border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -27,7 +27,7 @@ const Button = styled.button` padding: 0.5rem; border: 1px solid white; background-color: ${vscBackground}; - color: white; + color: ${vscForeground}; border-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -35,8 +35,8 @@ const Button = styled.button` cursor: pointer; &:hover { - background-color: white; - color: black; + background-color: ${vscForeground}; + color: ${vscBackground}; } `; diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx index 5a16516e..eba5cf8f 100644 --- a/extension/react-app/src/components/PillButton.tsx +++ b/extension/react-app/src/components/PillButton.tsx @@ -1,6 +1,11 @@ import { useContext, useState } from "react"; import styled from "styled-components"; -import { StyledTooltip, defaultBorderRadius, secondaryDark } from "."; +import { + StyledTooltip, + defaultBorderRadius, + secondaryDark, + vscForeground, +} from "."; import { Trash, PaintBrush, @@ -10,7 +15,7 @@ import { GUIClientContext } from "../App"; const Button = styled.button` border: none; - color: white; + color: ${vscForeground}; background-color: ${secondaryDark}; border-radius: ${defaultBorderRadius}; padding: 8px; diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index 93bdbc89..26bc8e33 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -6,6 +6,7 @@ import { secondaryDark, vscBackground, vscBackgroundTransparent, + vscForeground, } from "."; import { ChevronDown, @@ -120,20 +121,22 @@ const StyledMarkdownPreview = styled(MarkdownPreview)` } code { - color: #f69292; + color: #f78383; word-wrap: break-word; + border-radius: ${defaultBorderRadius}; + background-color: ${secondaryDark}; } pre > code { background-color: ${secondaryDark}; - color: white; + color: ${vscForeground}; } background-color: ${vscBackground}; font-family: "Lexend", sans-serif; font-size: 13px; padding: 8px; - color: white; + color: ${vscForeground}; `; // #endregion @@ -267,6 +270,9 @@ function StepContainer(props: StepContainerProps) { ) : ( )} diff --git a/extension/react-app/src/components/TextDialog.tsx b/extension/react-app/src/components/TextDialog.tsx index 646d6846..cba3852d 100644 --- a/extension/react-app/src/components/TextDialog.tsx +++ b/extension/react-app/src/components/TextDialog.tsx @@ -1,7 +1,7 @@ // Write a component that displays a dialog box with a text field and a button. import React, { useEffect, useState } from "react"; import styled from "styled-components"; -import { Button, buttonColor, secondaryDark, vscBackground } from "."; +import { Button, secondaryDark, vscBackground, vscForeground } from "."; import { isMetaEquivalentKeyPressed } from "../util"; const ScreenCover = styled.div` @@ -21,13 +21,13 @@ const DialogContainer = styled.div` `; const Dialog = styled.div` - background-color: white; + color: ${vscForeground}; + background-color: ${vscBackground}; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; - /* box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5); */ - border: 2px solid ${buttonColor}; + box-shadow: 0 0 10px 0 ${vscForeground}; width: fit-content; margin: auto; `; @@ -38,14 +38,16 @@ const TextArea = styled.textarea` padding: 8px; outline: 1px solid black; resize: none; + background-color: ${secondaryDark}; + color: ${vscForeground}; &:focus { - outline: 1px solid ${buttonColor}; + outline: 1px solid ${vscForeground}; } `; const P = styled.p` - color: black; + color: ${vscForeground}; margin: 8px auto; `; diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts index 9ae0f097..cb5e7915 100644 --- a/extension/react-app/src/components/index.ts +++ b/extension/react-app/src/components/index.ts @@ -3,12 +3,16 @@ import styled, { keyframes } from "styled-components"; export const defaultBorderRadius = "5px"; export const lightGray = "rgb(100 100 100)"; -export const secondaryDark = "rgb(45 45 45)"; -export const vscBackground = "rgb(30 30 30)"; +// export const secondaryDark = "rgb(45 45 45)"; +// export const vscBackground = "rgb(30 30 30)"; export const vscBackgroundTransparent = "#1e1e1ede"; export const buttonColor = "rgb(113 28 59)"; export const buttonColorHover = "rgb(113 28 59 0.67)"; +export const secondaryDark = "var(--vscode-textBlockQuote-background)"; +export const vscBackground = "var(--vscode-editor-background)"; +export const vscForeground = "var(--vscode-editor-foreground)"; + export const Button = styled.button` padding: 10px 12px; margin: 8px 0; @@ -46,8 +50,8 @@ export const TextArea = styled.textarea` resize: vertical; padding: 4px; - caret-color: white; - color: white; + caret-color: ${vscForeground}; + color: #{vscForeground}; &:focus { outline: 1px solid ${buttonColor}; @@ -120,7 +124,7 @@ export const MainTextInput = styled.textarea` border: 1px solid #ccc; margin: 8px 8px; background-color: ${vscBackground}; - color: white; + color: ${vscForeground}; outline: 1px solid orange; resize: none; `; @@ -137,8 +141,9 @@ export const appear = keyframes` `; export const HeaderButton = styled.button<{ inverted: boolean | undefined }>` - background-color: ${({ inverted }) => (inverted ? "white" : "transparent")}; - color: ${({ inverted }) => (inverted ? "black" : "white")}; + background-color: ${({ inverted }) => + inverted ? vscForeground : "transparent"}; + color: ${({ inverted }) => (inverted ? vscBackground : vscForeground)}; border: none; border-radius: ${defaultBorderRadius}; @@ -146,7 +151,9 @@ export const HeaderButton = styled.button<{ inverted: boolean | undefined }>` &:hover { background-color: ${({ inverted }) => - typeof inverted === "undefined" || inverted ? lightGray : "transparent"}; + typeof inverted === "undefined" || inverted + ? secondaryDark + : "transparent"}; } display: flex; align-items: center; diff --git a/extension/react-app/src/index.css b/extension/react-app/src/index.css index 6e33c89c..bac7fe97 100644 --- a/extension/react-app/src/index.css +++ b/extension/react-app/src/index.css @@ -14,13 +14,13 @@ html, body, #root { height: 100%; - background-color: var(--vsc-background); + background-color: var(--vscode-editor-background); font-family: "Lexend", sans-serif; } body { padding: 0; - color: white; + color: var(--vscode-editor-foreground); padding: 0px; margin: 0px; height: 100%; diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx index 64207487..c35cf21b 100644 --- a/extension/react-app/src/pages/gui.tsx +++ b/extension/react-app/src/pages/gui.tsx @@ -1,5 +1,9 @@ import styled from "styled-components"; -import { defaultBorderRadius } from "../components"; +import { + defaultBorderRadius, + vscBackground, + vscForeground, +} from "../components"; import Loader from "../components/Loader"; import ContinueButton from "../components/ContinueButton"; import { FullState, HighlightedRangeContext } from "../../../schema/FullState"; @@ -371,12 +375,13 @@ function GUI(props: GUIProps) { style={{ position: "fixed", bottom: "50px", - backgroundColor: "white", - color: "black", + backgroundColor: vscBackground, + color: vscForeground, borderRadius: defaultBorderRadius, padding: "16px", margin: "16px", zIndex: 100, + boxShadow: `0px 0px 10px 0px ${vscForeground}`, }} hidden={!showDataSharingInfo} > -- cgit v1.2.3-70-g09d2 From 436225436ef8379687a80e0b9595ddd4b488d946 Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Mon, 17 Jul 2023 12:24:22 -0700 Subject: disambiguate highlighted ranges with dirname --- continuedev/src/continuedev/core/autopilot.py | 17 +++++++++++++++++ extension/react-app/src/components/StepContainer.tsx | 7 +------ 2 files changed, 18 insertions(+), 6 deletions(-) (limited to 'extension/react-app/src') diff --git a/continuedev/src/continuedev/core/autopilot.py b/continuedev/src/continuedev/core/autopilot.py index 0696c360..fb8da2e8 100644 --- a/continuedev/src/continuedev/core/autopilot.py +++ b/continuedev/src/continuedev/core/autopilot.py @@ -166,6 +166,22 @@ class Autopilot(ContinueBaseModel): if not any(map(lambda x: x.editing, self._highlighted_ranges)): self._highlighted_ranges[0].editing = True + def _disambiguate_highlighted_ranges(self): + """If any files have the same name, also display their folder name""" + name_counts = {} + for rif in self._highlighted_ranges: + if rif.display_name in name_counts: + name_counts[rif.display_name] += 1 + else: + name_counts[rif.display_name] = 1 + + for rif in self._highlighted_ranges: + if name_counts[rif.display_name] > 1: + rif.display_name = os.path.join( + os.path.basename(os.path.dirname(rif.range.filepath)), rif.display_name) + else: + rif.display_name = os.path.basename(rif.range.filepath) + async def handle_highlighted_code(self, range_in_files: List[RangeInFileWithContents]): # Filter out rifs from ~/.continue/diffs folder range_in_files = [ @@ -211,6 +227,7 @@ class Autopilot(ContinueBaseModel): ) for rif in range_in_files] self._make_sure_is_editing_range() + self._disambiguate_highlighted_ranges() await self.update_subscribers() diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index 26bc8e33..9ab7430c 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -53,12 +53,7 @@ const StepContainerDiv = styled.div<{ open: boolean }>` `; const HeaderDiv = styled.div<{ error: boolean; loading: boolean }>` - background-color: ${(props) => - props.error - ? "#522" - : props.loading - ? vscBackgroundTransparent - : vscBackground}; + background-color: ${(props) => (props.error ? "#522" : vscBackground)}; display: grid; grid-template-columns: 1fr auto auto; grid-gap: 8px; -- cgit v1.2.3-70-g09d2