From 6a3967838e1d1541404a17f9d684d7efceb28031 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Tue, 1 Aug 2023 18:15:26 -0700
Subject: use hero-icons, instead of styled-icons/heroicons

---
 extension/react-app/src/components/CodeBlock.tsx   |  9 ++++---
 extension/react-app/src/components/ComboBox.tsx    |  4 +--
 .../react-app/src/components/ContinueButton.tsx    |  4 +--
 extension/react-app/src/components/Loader.tsx      |  6 ++---
 extension/react-app/src/components/Onboarding.tsx  |  6 ++---
 extension/react-app/src/components/PillButton.tsx  | 17 ++++++-------
 .../react-app/src/components/StepContainer.tsx     | 29 ++++++++++++----------
 .../src/components/UserInputContainer.tsx          |  4 +--
 extension/react-app/src/pages/gui.tsx              | 14 +++++------
 9 files changed, 48 insertions(+), 45 deletions(-)

(limited to 'extension/react-app/src')

diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index fe9b3a95..97b79ff5 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,12 @@ function CopyButton(props: { textToCopy: string; visible: boolean }) {
         }}
       >
         {clicked ? (
-          <CheckCircle color="#00ff00" size="1.5em" />
+          <CheckCircleIcon color="#00ff00" className="h-6 w-6" />
         ) : (
-          <Clipboard color={hovered ? "#00ff00" : "white"} size="1.5em" />
+          <ClipboardIcon
+            color={hovered ? "#00ff00" : "white"}
+            className="h-6 w-6"
+          />
         )}
       </StyledCopyButton>
     </>
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index ba87cb9f..35c36726 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";
@@ -297,7 +297,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 props.onToggleAddContext();
               }}
             >
-              <DocumentPlus width="1.6em"></DocumentPlus>
+              <DocumentPlusIcon className="h-6 w-6" />
             </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 e3d05711..ae744c44 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 {
@@ -171,10 +171,7 @@ const PillButton = (props: PillButtonProps) => {
                     client?.setEditingAtIndices([props.index]);
                   }}
                 >
-                  <PaintBrush
-                    style={{ margin: "auto" }}
-                    width="1.6em"
-                  ></PaintBrush>
+                  <PaintBrushIcon style={{ margin: "auto" }} width="1.6em" />
                 </ButtonDiv>
               )}
 
@@ -189,7 +186,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>
           )}
@@ -206,7 +203,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..4726b609 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";
@@ -170,9 +170,9 @@ function StepContainer(props: StepContainerProps) {
             <div className="m-2">
               {!isUserInput &&
                 (props.open ? (
-                  <ChevronDown size="1.4em" />
+                  <ChevronDownIcon className="h-6 w-6" />
                 ) : (
-                  <ChevronRight size="1.4em" />
+                  <ChevronRightIcon className="h-6 w-6" />
                 ))}
               {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 className="h-6 w-6" />
                 </HeaderButtonWithText>
               )}
               <HeaderButtonWithText
@@ -210,9 +210,12 @@ function StepContainer(props: StepContainerProps) {
                 }
               >
                 {props.historyNode.active ? (
-                  <StopCircle size="1.6em" onClick={props.onDelete} />
+                  <StopCircleIcon
+                    className="h-6 w-6"
+                    onClick={props.onDelete}
+                  />
                 ) : (
-                  <XMark size="1.6em" onClick={props.onDelete} />
+                  <XMarkIcon className="h-6 w-6" onClick={props.onDelete} />
                 )}
               </HeaderButtonWithText>
               {props.historyNode.observation?.error ? (
@@ -223,7 +226,7 @@ function StepContainer(props: StepContainerProps) {
                     props.onRetry();
                   }}
                 >
-                  <ArrowPath size="1.6em" onClick={props.onRetry} />
+                  <ArrowPathIcon className="h-6 w-6" onClick={props.onRetry} />
                 </HeaderButtonWithText>
               ) : (
                 <></>
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 0ff3e74f..ed11851f 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 className="h-6 w-6" />
         </HeaderButtonWithText>
       </div>
     </StyledDiv>
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index bf8d8281..57185ea0 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 className="h-6 w-6" />
         </HeaderButtonWithText>
         <a
           href="https://continue.dev/docs/how-to-use-continue"
           className="no-underline"
         >
           <HeaderButtonWithText text="Docs">
-            <BookOpen size="1.6em" />
+            <BookOpenIcon className="h-6 w-6" />
           </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 className="h-6 w-6" />
         </HeaderButtonWithText>
       </Footer>
     </>
-- 
cgit v1.2.3-70-g09d2