diff options
Diffstat (limited to 'extension/react-app/src/components/StepContainer.tsx')
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 19 |
1 files changed, 10 insertions, 9 deletions
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index 93bdbc89..9ab7430c 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -6,6 +6,7 @@ import { secondaryDark, vscBackground, vscBackgroundTransparent, + vscForeground, } from "."; import { ChevronDown, @@ -52,12 +53,7 @@ const StepContainerDiv = styled.div<{ open: boolean }>` `; const HeaderDiv = styled.div<{ error: boolean; loading: boolean }>` - background-color: ${(props) => - props.error - ? "#522" - : props.loading - ? vscBackgroundTransparent - : vscBackground}; + background-color: ${(props) => (props.error ? "#522" : vscBackground)}; display: grid; grid-template-columns: 1fr auto auto; grid-gap: 8px; @@ -120,20 +116,22 @@ const StyledMarkdownPreview = styled(MarkdownPreview)` } code { - color: #f69292; + color: #f78383; word-wrap: break-word; + border-radius: ${defaultBorderRadius}; + background-color: ${secondaryDark}; } pre > code { background-color: ${secondaryDark}; - color: white; + color: ${vscForeground}; } background-color: ${vscBackground}; font-family: "Lexend", sans-serif; font-size: 13px; padding: 8px; - color: white; + color: ${vscForeground}; `; // #endregion @@ -267,6 +265,9 @@ function StepContainer(props: StepContainerProps) { ) : ( <StyledMarkdownPreview source={props.historyNode.step.description || ""} + wrapperElement={{ + "data-color-mode": "dark", + }} /> )} </ContentDiv> |