6 files changed, 20 insertions, 20 deletions
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index af673b42..b825dc2a 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -22,7 +22,7 @@ import {
 import { HighlightedRangeContext } from "../../../schema/FullState";
 
 // #region styled components
-const mainInputFontSize = 16;
+const mainInputFontSize = 13;
 
 const EmptyPillDiv = styled.div`
   padding: 8px;
@@ -64,7 +64,6 @@ const MainTextInput = styled.textarea`
   padding: 8px;
   font-size: ${mainInputFontSize}px;
   font-family: inherit;
-  border: 1px solid transparent;
   border-radius: ${defaultBorderRadius};
   margin: 8px auto;
   height: auto;
@@ -74,8 +73,7 @@ const MainTextInput = styled.textarea`
   z-index: 1;
 
   &:focus {
-    outline: 1px solid #ff000066;
-    border: 1px solid transparent;
+    outline: 1px solid ${lightGray};
   }
 `;
 
@@ -191,7 +189,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
   return (
     <>
       <div className="px-2 flex gap-2 items-center flex-wrap mt-2">
-        {highlightedCodeSections.length > 1 && (
+        {/* {highlightedCodeSections.length > 1 && (
           <>
             <HeaderButtonWithText
               text="Clear Context"
@@ -204,7 +202,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
               <Trash size="1.6em" />
             </HeaderButtonWithText>
           </>
-        )}
+        )} */}
         {highlightedCodeSections.map((section, idx) => (
           <PillButton
             editing={section.editing}
diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx
index 462f2b46..72f6dcd2 100644
--- a/extension/react-app/src/components/ContinueButton.tsx
+++ b/extension/react-app/src/components/ContinueButton.tsx
@@ -10,20 +10,12 @@ let StyledButton = styled(Button)`
   display: grid;
   grid-template-columns: 30px 1fr;
   align-items: center;
-  background: linear-gradient(
-    95.23deg,
-    #be1a55 14.44%,
-    rgba(203, 27, 90, 0.4) 82.21%
-  );
+  background: #be1b55;
 
   &:hover {
     transition-delay: 0.5s;
     transition-property: "background";
-    background: linear-gradient(
-      45deg,
-      #be1a55 14.44%,
-      rgba(203, 27, 90, 0.4) 82.21%
-    );
+    opacity: 0.8;
   }
 `;
 
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index a384832e..31d98c0f 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -127,7 +127,9 @@ const PillButton = (props: PillButtonProps) => {
         {props.title}
       </Button>
       <StyledTooltip id={`edit-${props.index}`}>
-        {props.editing ? "Editing this range" : "Edit this range"}
+        {props.editing
+          ? "Editing this range (with rest of file as context)"
+          : "Edit this range"}
       </StyledTooltip>
       <StyledTooltip id={`delete-${props.index}`}>Delete</StyledTooltip>
     </>
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index f51f0cb5..0ff3e74f 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import styled from "styled-components";
-import { buttonColor, secondaryDark } from ".";
+import { buttonColor, secondaryDark, vscBackground } from ".";
 import HeaderButtonWithText from "./HeaderButtonWithText";
 import { Play, XMark } from "@styled-icons/heroicons-outline";
 import { RootStore } from "../redux/store";
@@ -22,6 +22,7 @@ const StyledDiv = styled.div`
   font-size: 13px;
   display: flex;
   align-items: center;
+  border-bottom: 1px solid ${vscBackground};
 `;
 
 const UserInputContainer = (props: UserInputContainerProps) => {
diff --git a/extension/react-app/src/index.css b/extension/react-app/src/index.css
index 682551f8..6e33c89c 100644
--- a/extension/react-app/src/index.css
+++ b/extension/react-app/src/index.css
@@ -21,7 +21,6 @@ body,
 body {
   padding: 0;
   color: white;
-  font-family: "Mona Sans", "Arial", sans-serif;
   padding: 0px;
   margin: 0px;
   height: 100%;
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index ca369547..c8a42d9a 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -165,7 +165,15 @@ function GUI(props: GUIProps) {
       const shouldScrollToBottom =
         topGuiDivRef.current &&
         topGuiDivRef.current?.offsetHeight - window.scrollY < 100;
-      setWaitingForSteps(state.active);
+
+      const waitingForSteps =
+        state.active &&
+        state.history.current_index < state.history.timeline.length &&
+        state.history.timeline[
+          state.history.current_index
+        ].step.description?.trim() === "";
+
+      setWaitingForSteps(waitingForSteps);
       setHistory(state.history);
       setHighlightedRanges(state.highlighted_ranges);
       setUserInputQueue(state.user_input_queue);