summaryrefslogtreecommitdiff
path: root/extension/react-app/src
diff options
context:
space:
mode:
Diffstat (limited to 'extension/react-app/src')
-rw-r--r--extension/react-app/src/components/CodeBlock.tsx10
-rw-r--r--extension/react-app/src/components/ComboBox.tsx4
-rw-r--r--extension/react-app/src/components/ContinueButton.tsx4
-rw-r--r--extension/react-app/src/components/Loader.tsx6
-rw-r--r--extension/react-app/src/components/Onboarding.tsx6
-rw-r--r--extension/react-app/src/components/PillButton.tsx17
-rw-r--r--extension/react-app/src/components/StepContainer.tsx40
-rw-r--r--extension/react-app/src/components/UserInputContainer.tsx4
-rw-r--r--extension/react-app/src/pages/gui.tsx14
9 files changed, 59 insertions, 46 deletions
diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index fe9b3a95..f51b7d9f 100644
--- a/extension/react-app/src/components/CodeBlock.tsx
+++ b/extension/react-app/src/components/CodeBlock.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
import styled from "styled-components";
import { defaultBorderRadius, secondaryDark, vscBackground } from ".";
-import { Clipboard, CheckCircle } from "@styled-icons/heroicons-outline";
+import { ClipboardIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
import StyledCode from "./StyledCode";
@@ -52,9 +52,13 @@ function CopyButton(props: { textToCopy: string; visible: boolean }) {
}}
>
{clicked ? (
- <CheckCircle color="#00ff00" size="1.5em" />
+ <CheckCircleIcon color="#00ff00" width="1.5em" height="1.5em" />
) : (
- <Clipboard color={hovered ? "#00ff00" : "white"} size="1.5em" />
+ <ClipboardIcon
+ color={hovered ? "#00ff00" : "white"}
+ width="1.5em"
+ height="1.5em"
+ />
)}
</StyledCopyButton>
</>
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 31c3ddef..9017f19c 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -15,7 +15,7 @@ import {
} from ".";
import PillButton from "./PillButton";
import HeaderButtonWithText from "./HeaderButtonWithText";
-import { DocumentPlus } from "@styled-icons/heroicons-outline";
+import { DocumentPlusIcon } from "@heroicons/react/24/outline";
import { ContextItem } from "../../../schema/FullState";
import { postVscMessage } from "../vscode";
import { GUIClientContext } from "../App";
@@ -301,7 +301,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
props.onToggleAddContext();
}}
>
- <DocumentPlus width="1.6em"></DocumentPlus>
+ <DocumentPlusIcon width="1.5em" height="1.5em" />
</HeaderButtonWithText>
))}
</div>
diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx
index 6d753988..6d03c820 100644
--- a/extension/react-app/src/components/ContinueButton.tsx
+++ b/extension/react-app/src/components/ContinueButton.tsx
@@ -1,6 +1,6 @@
import styled, { keyframes } from "styled-components";
import { Button } from ".";
-import { Play } from "@styled-icons/heroicons-outline";
+import { PlayIcon } from "@heroicons/react/24/outline";
import { useSelector } from "react-redux";
import { RootStore } from "../redux/store";
@@ -33,7 +33,7 @@ function ContinueButton(props: { onClick?: () => void; hidden?: boolean }) {
{vscMediaUrl ? (
<img src={`${vscMediaUrl}/play_button.png`} width="22px" />
) : (
- <Play />
+ <PlayIcon />
)}
CONTINUE
</StyledButton>
diff --git a/extension/react-app/src/components/Loader.tsx b/extension/react-app/src/components/Loader.tsx
index 90eff793..3bf10b1e 100644
--- a/extension/react-app/src/components/Loader.tsx
+++ b/extension/react-app/src/components/Loader.tsx
@@ -1,7 +1,7 @@
-import { Play } from "@styled-icons/heroicons-outline";
import { useSelector } from "react-redux";
-import styled from "styled-components";
import { RootStore } from "../redux/store";
+import styled from "styled-components";
+import { PlayIcon } from "@heroicons/react/24/outline";
const DEFAULT_SIZE = "28px";
@@ -31,7 +31,7 @@ function Loader(props: { size?: string }) {
{vscMediaUrl ? (
<img src={`${vscMediaUrl}/play_button.png`} width="22px" />
) : (
- <Play width={props.size || DEFAULT_SIZE} />
+ <PlayIcon width={props.size || DEFAULT_SIZE} />
)}
</FlashingDiv>
);
diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx
index b7c80416..dd93df26 100644
--- a/extension/react-app/src/components/Onboarding.tsx
+++ b/extension/react-app/src/components/Onboarding.tsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import styled from "styled-components";
-import { ArrowLeft, ArrowRight } from "@styled-icons/heroicons-outline";
+import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import { defaultBorderRadius } from ".";
import Loader from "./Loader";
@@ -109,7 +109,7 @@ const Onboarding = () => {
hidden={counter === 0}
onClick={() => setCounter((prev) => Math.max(prev - 1, 0))}
>
- <ArrowLeft width="18px" strokeWidth="2px" /> Previous
+ <ArrowLeftIcon width="18px" strokeWidth="2px" /> Previous
</StyledSpan>
<span hidden={counter === 0}>{" | "}</span>
<StyledSpan onClick={() => setCounter((prev) => prev + 1)}>
@@ -118,7 +118,7 @@ const Onboarding = () => {
: counter === 3
? "Get Started"
: "Next"}{" "}
- <ArrowRight width="18px" strokeWidth="2px" />
+ <ArrowRightIcon width="18px" strokeWidth="2px" />
</StyledSpan>
</p>
</div>
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 0b1aa23d..8e5f896e 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -9,10 +9,10 @@ import {
vscForeground,
} from ".";
import {
- Trash,
- PaintBrush,
- ExclamationTriangle,
-} from "@styled-icons/heroicons-outline";
+ TrashIcon,
+ PaintBrushIcon,
+ ExclamationTriangleIcon,
+} from "@heroicons/react/24/outline";
import { GUIClientContext } from "../App";
import { useDispatch } from "react-redux";
import {
@@ -173,10 +173,7 @@ const PillButton = (props: PillButtonProps) => {
]);
}}
>
- <PaintBrush
- style={{ margin: "auto" }}
- width="1.6em"
- ></PaintBrush>
+ <PaintBrushIcon style={{ margin: "auto" }} width="1.6em" />
</ButtonDiv>
)}
@@ -191,7 +188,7 @@ const PillButton = (props: PillButtonProps) => {
dispatch(setBottomMessage(undefined));
}}
>
- <Trash style={{ margin: "auto" }} width="1.6em"></Trash>
+ <TrashIcon style={{ margin: "auto" }} width="1.6em" />
</ButtonDiv>
</GridDiv>
)}
@@ -208,7 +205,7 @@ const PillButton = (props: PillButtonProps) => {
<CircleDiv
data-tooltip-id={`circle-div-${props.item.description.name}`}
>
- <ExclamationTriangle
+ <ExclamationTriangleIcon
style={{ margin: "auto" }}
width="1.0em"
strokeWidth={2}
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 2cfe7ecd..19cdd2e1 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -9,13 +9,13 @@ import {
vscForeground,
} from ".";
import {
- ChevronDown,
- ChevronRight,
- ArrowPath,
- XMark,
- MagnifyingGlass,
-} from "@styled-icons/heroicons-outline";
-import { StopCircle } from "@styled-icons/heroicons-solid";
+ ChevronDownIcon,
+ ChevronRightIcon,
+ ArrowPathIcon,
+ XMarkIcon,
+ MagnifyingGlassIcon,
+ StopCircleIcon,
+} from "@heroicons/react/24/outline";
import { HistoryNode } from "../../../schema/HistoryNode";
import HeaderButtonWithText from "./HeaderButtonWithText";
import { getMetaKeyLabel, isMetaEquivalentKeyPressed } from "../util";
@@ -167,12 +167,12 @@ function StepContainer(props: StepContainerProps) {
loading={(props.historyNode.active as boolean) || false}
error={props.historyNode.observation?.error ? true : false}
>
- <div className="m-2">
+ <div className="m-2 flex items-center">
{!isUserInput &&
(props.open ? (
- <ChevronDown size="1.4em" />
+ <ChevronDownIcon width="1.5em" height="1.5em" />
) : (
- <ChevronRight size="1.4em" />
+ <ChevronRightIcon width="1.5em" height="1.5em" />
))}
{props.historyNode.observation?.title ||
(props.historyNode.step.name as any)}
@@ -195,7 +195,7 @@ function StepContainer(props: StepContainerProps) {
client?.showLogsAtIndex(props.index);
}}
>
- <MagnifyingGlass size="1.4em" />
+ <MagnifyingGlassIcon width="1.5em" height="1.5em" />
</HeaderButtonWithText>
)}
<HeaderButtonWithText
@@ -210,9 +210,17 @@ function StepContainer(props: StepContainerProps) {
}
>
{props.historyNode.active ? (
- <StopCircle size="1.6em" onClick={props.onDelete} />
+ <StopCircleIcon
+ width="1.5em"
+ height="1.5em"
+ onClick={props.onDelete}
+ />
) : (
- <XMark size="1.6em" onClick={props.onDelete} />
+ <XMarkIcon
+ width="1.5em"
+ height="1.5em"
+ onClick={props.onDelete}
+ />
)}
</HeaderButtonWithText>
{props.historyNode.observation?.error ? (
@@ -223,7 +231,11 @@ function StepContainer(props: StepContainerProps) {
props.onRetry();
}}
>
- <ArrowPath size="1.6em" onClick={props.onRetry} />
+ <ArrowPathIcon
+ width="1.5em"
+ height="1.5em"
+ onClick={props.onRetry}
+ />
</HeaderButtonWithText>
) : (
<></>
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 0ff3e74f..d44be38e 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown";
import styled from "styled-components";
import { buttonColor, secondaryDark, vscBackground } from ".";
import HeaderButtonWithText from "./HeaderButtonWithText";
-import { Play, XMark } from "@styled-icons/heroicons-outline";
+import { XMarkIcon } from "@heroicons/react/24/outline";
import { RootStore } from "../redux/store";
import { useSelector } from "react-redux";
import { HistoryNode } from "../../../schema/HistoryNode";
@@ -37,7 +37,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
}}
text="Delete"
>
- <XMark size="1.6em" />
+ <XMarkIcon width="1.5em" height="1.5em" />
</HeaderButtonWithText>
</div>
</StyledDiv>
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index bf8d8281..3ae8e14e 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -13,10 +13,10 @@ import { HistoryNode } from "../../../schema/HistoryNode";
import StepContainer from "../components/StepContainer";
import { GUIClientContext } from "../App";
import {
- BookOpen,
- ChatBubbleOvalLeftEllipsis,
- Trash,
-} from "@styled-icons/heroicons-outline";
+ BookOpenIcon,
+ ChatBubbleOvalLeftEllipsisIcon,
+ TrashIcon,
+} from "@heroicons/react/24/outline";
import ComboBox from "../components/ComboBox";
import TextDialog from "../components/TextDialog";
import HeaderButtonWithText from "../components/HeaderButtonWithText";
@@ -536,14 +536,14 @@ If you already have an LLM deployed on your own infrastructure, or would like to
}}
text="Clear"
>
- <Trash size="1.6em" />
+ <TrashIcon width="1.5em" height="1.5em" />
</HeaderButtonWithText>
<a
href="https://continue.dev/docs/how-to-use-continue"
className="no-underline"
>
<HeaderButtonWithText text="Docs">
- <BookOpen size="1.6em" />
+ <BookOpenIcon width="1.5em" height="1.5em" />
</HeaderButtonWithText>
</a>
<HeaderButtonWithText
@@ -557,7 +557,7 @@ If you already have an LLM deployed on your own infrastructure, or would like to
}}
text="Feedback"
>
- <ChatBubbleOvalLeftEllipsis size="1.6em" />
+ <ChatBubbleOvalLeftEllipsisIcon width="1.5em" height="1.5em" />
</HeaderButtonWithText>
</Footer>
</>
generated by cgit v1.2.3-70-g09d2 (git 2.48.1) at 2025-02-02 23:02:17 +0000