From c5cee3f4c40e7ff00265929b3a593d62b4b50ada Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Wed, 5 Jul 2023 01:51:46 -0700
Subject: details

---
 extension/react-app/src/components/ComboBox.tsx        |  2 +-
 extension/react-app/src/components/StepContainer.tsx   | 12 +++++++-----
 .../react-app/src/components/UserInputContainer.tsx    | 10 ++++------
 extension/react-app/src/tabs/gui.tsx                   | 18 ++++++++++--------
 4 files changed, 22 insertions(+), 20 deletions(-)

(limited to 'extension/react-app')

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 97f5b57e..73b7cc2d 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -324,7 +324,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
           />
         ))}
 
-        <span className="text-trueGray-400 ml-auto mr-4 text-xs">
+        <span className="text-trueGray-400 ml-auto mr-4 text-xs text-right">
           Highlight code to include as context. Currently open file included by
           default. {highlightedCodeSections.length === 0 && ""}
         </span>
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 183ffeef..2aed2e72 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -11,11 +11,9 @@ import {
   ChevronDown,
   ChevronRight,
   ArrowPath,
-  XMark
+  XMark,
 } from "@styled-icons/heroicons-outline";
-import {
-  Stop,
-} from "@styled-icons/heroicons-solid";
+import { Stop } from "@styled-icons/heroicons-solid";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import ReactMarkdown from "react-markdown";
 import HeaderButtonWithText from "./HeaderButtonWithText";
@@ -213,7 +211,11 @@ function StepContainer(props: StepContainerProps) {
                 text={props.historyNode.active ? "Stop" : "Delete"}
                 active={props.historyNode.active}
               >
-                {props.historyNode.active ? <Stop size="1.6em" onClick={props.onDelete} /> :<XMark size="1.6em" onClick={props.onDelete} />}
+                {props.historyNode.active ? (
+                  <Stop size="1.2em" onClick={props.onDelete} />
+                ) : (
+                  <XMark size="1.6em" onClick={props.onDelete} />
+                )}
               </HeaderButtonWithText>
               {props.historyNode.observation?.error ? (
                 <HeaderButtonWithText
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index a72f6098..28437d35 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -14,8 +14,8 @@ interface UserInputContainerProps {
   historyNode: HistoryNode;
 }
 
-const StyledDiv = styled.div<{ hidden: boolean }>`
-  background-color: rgb(50 50 50);
+const StyledDiv = styled.div`
+  background-color: rgb(45 45 45);
   padding: 8px;
   padding-left: 16px;
   padding-right: 16px;
@@ -24,14 +24,12 @@ const StyledDiv = styled.div<{ hidden: boolean }>`
   font-size: 13px;
   display: flex;
   align-items: center;
-  visibility: ${(props) => (props.hidden ? "hidden" : "visible")};
-  height: ${(props) => (props.hidden ? "0px" : "auto")};
 `;
 
 const UserInputContainer = (props: UserInputContainerProps) => {
   return (
-    <StyledDiv hidden={props.historyNode.step.hide as any}>
-      {props.children}
+    <StyledDiv>
+      <b>{props.children}</b>
       <div style={{ marginLeft: "auto" }}>
         <HeaderButtonWithText
           onClick={(e) => {
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 851045d5..e5320c6a 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -295,14 +295,16 @@ function GUI(props: GUIProps) {
         )}
         {history?.timeline.map((node: HistoryNode, index: number) => {
           return node.step.name === "User Input" ? (
-            <UserInputContainer
-              onDelete={() => {
-                client?.deleteAtIndex(index);
-              }}
-              historyNode={node}
-            >
-              {node.step.description as string}
-            </UserInputContainer>
+            node.step.hide || (
+              <UserInputContainer
+                onDelete={() => {
+                  client?.deleteAtIndex(index);
+                }}
+                historyNode={node}
+              >
+                {node.step.description as string}
+              </UserInputContainer>
+            )
           ) : (
             <StepContainer
               isLast={index === history.timeline.length - 1}
-- 
cgit v1.2.3-70-g09d2