fix: :lipstick: fix UI problems in vscode light themes

3 files changed, 12 insertions, 4 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 14e04a84..472e1b14 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -71,6 +71,10 @@ const MainTextInput = styled.textarea`
     outline: 1px solid ${lightGray};
     border: 1px solid transparent;
   }
+
+  &::placeholder {
+    color: ${lightGray}80;
+  }
 `;
 
 const UlMaxHeight = 300;
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 8eb132cd..fe81e9e1 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -158,7 +158,7 @@ function StepContainer(props: StepContainerProps) {
           isLast={props.isLast}
           borderColor={
             props.historyNode.observation?.error
-              ? "#f00"
+              ? "#f005"
               : props.historyNode.active
               ? undefined
               : "transparent"
@@ -176,7 +176,11 @@ function StepContainer(props: StepContainerProps) {
             loading={(props.historyNode.active as boolean) || false}
             error={props.historyNode.observation?.error ? true : false}
           >
-            <LeftHeaderSubDiv>
+            <LeftHeaderSubDiv
+              style={
+                props.historyNode.observation?.error ? { color: "white" } : {}
+              }
+            >
               {!isUserInput &&
                 (props.open ? (
                   <ChevronDownIcon width="1.4em" height="1.4em" />
diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index cb5e7915..6705ceb2 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -2,14 +2,14 @@ import { Tooltip } from "react-tooltip";
 import styled, { keyframes } from "styled-components";
 
 export const defaultBorderRadius = "5px";
-export const lightGray = "rgb(100 100 100)";
+export const lightGray = "#646464";
 // 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 secondaryDark = "var(--vscode-list-hoverBackground)";
 export const vscBackground = "var(--vscode-editor-background)";
 export const vscForeground = "var(--vscode-editor-foreground)";