From 7954009f22bdb3d08826eb868075e15fa50c6086 Mon Sep 17 00:00:00 2001 From: Ian Bolton Date: Thu, 6 Feb 2025 13:54:26 -0500 Subject: [PATCH] :bug: Map vscode theme colors to pf variables for improved light mode support (#303) Resolves: #221 - Maps theme background / foreground colors to pf. - Creates a wrapper component for sent/received messages in Resolution for easier tracking of styles applied for each message type - Moves resolution page components to a new sub dir --------- Signed-off-by: Ian Bolton --- vscode/.gitignore | 1 + vscode/src/styles.css | 3 - webview-ui/src/App.tsx | 2 +- .../components/AnalysisPage/AnalysisPage.tsx | 2 +- .../src/components/AnalysisPage/styles.css | 6 +- .../src/components/IncidentTable/styles.css | 13 ++ .../{ => ResolutionsPage}/FileChanges.tsx | 0 .../ResolutionsPage/ReceivedMessage.tsx | 15 +++ .../{ => ResolutionsPage}/ResolutionsPage.tsx | 111 ++++++------------ .../ResolutionsPage/SentMessage.tsx | 20 ++++ .../{ => ResolutionsPage}/fileChanges.css | 1 + .../ResolutionsPage/resolutionsPage.css | 72 ++++++++++++ .../components/ServerStatusToggle/styles.css | 10 +- .../src/components/ViolationsCount/styles.css | 3 - webview-ui/src/components/resolutionsPage.css | 31 ----- webview-ui/src/index.css | 24 ++-- 16 files changed, 183 insertions(+), 131 deletions(-) delete mode 100644 vscode/src/styles.css create mode 100644 webview-ui/src/components/IncidentTable/styles.css rename webview-ui/src/components/{ => ResolutionsPage}/FileChanges.tsx (100%) create mode 100644 webview-ui/src/components/ResolutionsPage/ReceivedMessage.tsx rename webview-ui/src/components/{ => ResolutionsPage}/ResolutionsPage.tsx (56%) create mode 100644 webview-ui/src/components/ResolutionsPage/SentMessage.tsx rename webview-ui/src/components/{ => ResolutionsPage}/fileChanges.css (96%) create mode 100644 webview-ui/src/components/ResolutionsPage/resolutionsPage.css delete mode 100644 webview-ui/src/components/resolutionsPage.css diff --git a/vscode/.gitignore b/vscode/.gitignore index c10b9492..577441ae 100644 --- a/vscode/.gitignore +++ b/vscode/.gitignore @@ -5,3 +5,4 @@ test_out .vscode-test/ *.vsix org.eclipse* +*.log diff --git a/vscode/src/styles.css b/vscode/src/styles.css deleted file mode 100644 index 1c3712a3..00000000 --- a/vscode/src/styles.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - background-color: aliceblue; -} diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx index 1bf95096..9ba56f7c 100644 --- a/webview-ui/src/App.tsx +++ b/webview-ui/src/App.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { viewType } from "./utils/vscode"; import AnalysisPage from "./components/AnalysisPage/AnalysisPage"; -import ResolutionPage from "./components/ResolutionsPage"; +import ResolutionPage from "./components/ResolutionsPage/ResolutionsPage"; import { WebviewType } from "@editor-extensions/shared"; const App: React.FC = () => { diff --git a/webview-ui/src/components/AnalysisPage/AnalysisPage.tsx b/webview-ui/src/components/AnalysisPage/AnalysisPage.tsx index 373aff48..a801fce1 100644 --- a/webview-ui/src/components/AnalysisPage/AnalysisPage.tsx +++ b/webview-ui/src/components/AnalysisPage/AnalysisPage.tsx @@ -161,7 +161,7 @@ const AnalysisPage: React.FC = () => { {!isAnalyzing && !hasViolations && ( - + <Title className="empty-state-analysis-results" headingLevel="h2" size="md"> {hasAnalysisResults ? "No Violations Found" : "No Analysis Results"} diff --git a/webview-ui/src/components/AnalysisPage/styles.css b/webview-ui/src/components/AnalysisPage/styles.css index bbdfa683..658cf02a 100644 --- a/webview-ui/src/components/AnalysisPage/styles.css +++ b/webview-ui/src/components/AnalysisPage/styles.css @@ -8,7 +8,11 @@ .vertical-divider { width: 1px; height: 24px; - background-color: #d2d2d2; + background-color: var(--vscode-editor-background); margin: 0 8px; align-self: center; } + +.empty-state-analysis-results { + color: var(--vscode-foreground); +} diff --git a/webview-ui/src/components/IncidentTable/styles.css b/webview-ui/src/components/IncidentTable/styles.css new file mode 100644 index 00000000..23795b86 --- /dev/null +++ b/webview-ui/src/components/IncidentTable/styles.css @@ -0,0 +1,13 @@ +.message { + color: var(--vscode-foreground); +} +.incident-table-card { + background-color: var(--vscode-editor-background); + color: var(--vscode-foreground); +} +.incident-table { + color: var(--vscode-foreground) !important; +} +.line-number { + color: var(--vscode-foreground); +} diff --git a/webview-ui/src/components/FileChanges.tsx b/webview-ui/src/components/ResolutionsPage/FileChanges.tsx similarity index 100% rename from webview-ui/src/components/FileChanges.tsx rename to webview-ui/src/components/ResolutionsPage/FileChanges.tsx diff --git a/webview-ui/src/components/ResolutionsPage/ReceivedMessage.tsx b/webview-ui/src/components/ResolutionsPage/ReceivedMessage.tsx new file mode 100644 index 00000000..8eefd150 --- /dev/null +++ b/webview-ui/src/components/ResolutionsPage/ReceivedMessage.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { FlexItem, Label } from "@patternfly/react-core"; + +interface ReceivedMessageProps { + children: React.ReactNode; + className?: string; +} + +export const ReceivedMessage: React.FC = ({ children, className = "" }) => { + return ( + + + + ); +}; diff --git a/webview-ui/src/components/ResolutionsPage.tsx b/webview-ui/src/components/ResolutionsPage/ResolutionsPage.tsx similarity index 56% rename from webview-ui/src/components/ResolutionsPage.tsx rename to webview-ui/src/components/ResolutionsPage/ResolutionsPage.tsx index 85db98fd..95feb0c5 100644 --- a/webview-ui/src/components/ResolutionsPage.tsx +++ b/webview-ui/src/components/ResolutionsPage/ResolutionsPage.tsx @@ -4,7 +4,6 @@ import { CardBody, Flex, FlexItem, - Label, Page, PageSection, PageSidebar, @@ -14,10 +13,12 @@ import { } from "@patternfly/react-core"; import { FileChanges } from "./FileChanges"; import { Incident, LocalChange } from "@editor-extensions/shared"; -import { useExtensionState } from "../hooks/useExtensionState"; -import { applyFile, discardFile, openFile, viewFix } from "../hooks/actions"; -import { IncidentTableGroup } from "./IncidentTable"; +import { useExtensionState } from "../../hooks/useExtensionState"; +import { applyFile, discardFile, openFile, viewFix } from "../../hooks/actions"; import "./resolutionsPage.css"; +import { IncidentTableGroup } from "../IncidentTable/IncidentTableGroup"; +import { SentMessage } from "./SentMessage"; +import { ReceivedMessage } from "./ReceivedMessage"; const ResolutionPage: React.FC = () => { const [state, dispatch] = useExtensionState(); @@ -50,11 +51,8 @@ const ResolutionPage: React.FC = () => { const hasNothingToView = solutionState === "none" && localChanges.length === 0; const handleFileClick = (change: LocalChange) => dispatch(viewFix(change)); - const handleAcceptClick = (change: LocalChange) => dispatch(applyFile(change)); - const handleRejectClick = (change: LocalChange) => dispatch(discardFile(change)); - const handleIncidentClick = (incident: Incident) => { dispatch(openFile(incident.uri, incident.lineNumber ?? 0)); }; @@ -78,23 +76,14 @@ const ResolutionPage: React.FC = () => { - + {isTriggeredByUser && ( - - Here is the scope of what I would like you to fix: - + Here is the scope of what I would like you to fix: { /> - - Please provide resolution for this issue. - + Please provide resolution for this issue. )} + - {hasNothingToView && ( - - - - )} - {isHistorySolution && ( - - - - )} + {hasNothingToView && No resolutions available.} + {isHistorySolution && Loaded last known resolution.} {solutionMessages.map((msg) => ( - - - + {msg} ))} {isFetchingSolution && } {hasResponse && ( - - - - - + + + )} {hasEmptyResponse && !hasResponseWithErrors && ( - - - + Received response contains no resolutions. )} {hasResponseWithErrors && ( <> - - - - - -
    - {resolution.encountered_errors.map((error, index) => ( -
  • {error}
    • - ))} -
- - + Response contains errors: + +
    + {resolution.encountered_errors.map((error, index) => ( +
  • {error}
    • + ))} +
+ )} {isResolved && !isFetchingSolution && ( - - - + All resolutions have been applied. )} @@ -180,20 +146,9 @@ const ResolutionPage: React.FC = () => { }; const ChatCard: FC<{ color: "blue" | "yellow"; children: JSX.Element }> = ({ children, color }) => ( - + {children} ); -const YellowLabel: FC<{ children: JSX.Element | string }> = ({ children }) => ( - <> - - - -); - export default ResolutionPage; diff --git a/webview-ui/src/components/ResolutionsPage/SentMessage.tsx b/webview-ui/src/components/ResolutionsPage/SentMessage.tsx new file mode 100644 index 00000000..61e4caa7 --- /dev/null +++ b/webview-ui/src/components/ResolutionsPage/SentMessage.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { FlexItem, Label } from "@patternfly/react-core"; + +interface SentMessageProps { + children: React.ReactNode; + className?: string; +} + +export const SentMessage: React.FC = ({ children, className = "" }) => { + return ( + + + + + ); +}; diff --git a/webview-ui/src/components/fileChanges.css b/webview-ui/src/components/ResolutionsPage/fileChanges.css similarity index 96% rename from webview-ui/src/components/fileChanges.css rename to webview-ui/src/components/ResolutionsPage/fileChanges.css index f649a6e0..4bcc3971 100644 --- a/webview-ui/src/components/fileChanges.css +++ b/webview-ui/src/components/ResolutionsPage/fileChanges.css @@ -30,4 +30,5 @@ display: flex; align-items: center; padding: 6px; + color: black; } diff --git a/webview-ui/src/components/ResolutionsPage/resolutionsPage.css b/webview-ui/src/components/ResolutionsPage/resolutionsPage.css new file mode 100644 index 00000000..1d438d45 --- /dev/null +++ b/webview-ui/src/components/ResolutionsPage/resolutionsPage.css @@ -0,0 +1,72 @@ +/* Base chat container styles */ +.chat-card-container { + width: 80%; + min-width: 400px; + display: flex; + flex-direction: row-reverse; + margin: 8px 0; +} + +/* Message bubble base styles */ +.pf-v6-c-card.chat-bubble { + max-width: 80%; + border-radius: 20px; + padding: 12px; + margin: 4px 0; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +/* Sent message (yellow) */ +.pf-v6-c-card.pf-m-yellow { + border-top-right-radius: 4px; + background-color: var(--pf-v6-global--primary-color--100); + color: var(--pf-v6-global--Color--light-100); +} + +/* VSCode dark theme adjustment for sent messages */ +.vscode-dark .pf-v6-c-card.pf-m-yellow { + background-color: var(--vscode-textLink-foreground); +} + +/* High contrast theme adjustment for sent messages */ +.vscode-high-contrast .pf-v6-c-card.pf-m-yellow { + background-color: var(--vscode-textLink-activeForeground); + border: 1px solid var(--vscode-contrastBorder); +} + +/* Received message (blue) */ +.pf-v6-c-card.pf-m-blue { + border-top-left-radius: 4px; + background-color: var(--pf-v6-global--BackgroundColor--200); +} + +/* VSCode dark theme adjustment for received messages */ +.vscode-dark .pf-v6-c-card.pf-m-blue { + background-color: var(--vscode-editor-inactiveSelectionBackground); +} + +/* High contrast theme adjustment for received messages */ +.vscode-high-contrast .pf-v6-c-card.pf-m-blue { + background-color: var(--vscode-editor-background); + border: 1px solid var(--vscode-contrastBorder); +} + +/* Label visibility control */ +.resolutions-show-in-dark, +.pf-v6-theme-dark .resolutions-show-in-light { + display: none; +} + +.pf-v6-theme-dark .resolutions-show-in-dark { + display: revert; +} + +/* Ensure text remains readable in all themes */ +.chat-bubble .pf-v6-c-card__body { + color: var(--vscode-editor-foreground); +} + +/* High contrast specific text adjustments */ +.vscode-high-contrast .chat-bubble .pf-v6-c-card__body { + color: var(--vscode-editor-foreground); +} diff --git a/webview-ui/src/components/ServerStatusToggle/styles.css b/webview-ui/src/components/ServerStatusToggle/styles.css index 7655d145..bf0a6786 100644 --- a/webview-ui/src/components/ServerStatusToggle/styles.css +++ b/webview-ui/src/components/ServerStatusToggle/styles.css @@ -12,8 +12,8 @@ padding: 8px 16px; } -.pf-v6-theme-dark .server-status-label { - color: #d2d4d8; +.server-status-label { + color: var(--vscode-foreground); } .server-status-label { @@ -26,7 +26,7 @@ } .pf-v6-theme-dark .vertical-divider { - background-color: #4f5255; + background-color: var(--vscode-editor-background); } .vertical-divider { @@ -36,7 +36,7 @@ } .pf-v6-theme-dark .server-action-button { - color: #d2d4d8 !important; + color: var(--vscode-foreground); } .server-action-button { @@ -47,7 +47,7 @@ } .pf-v6-theme-dark .server-action-button:hover { - color: #ffffff !important; + color: var(--vscode-foreground); } .server-action-button svg { diff --git a/webview-ui/src/components/ViolationsCount/styles.css b/webview-ui/src/components/ViolationsCount/styles.css index 5ead8384..42cf11d1 100644 --- a/webview-ui/src/components/ViolationsCount/styles.css +++ b/webview-ui/src/components/ViolationsCount/styles.css @@ -5,7 +5,6 @@ } .violations-title { - color: #d2d2d2 !important; font-size: 14px !important; line-height: 20px !important; margin: 0 !important; @@ -16,13 +15,11 @@ .violations-subtitle { font-style: italic; - color: #d2d2d2; font-size: 14px; line-height: 20px; } .violations-compact { - color: #d2d2d2 !important; font-size: 14px !important; line-height: 20px !important; margin: 0 !important; diff --git a/webview-ui/src/components/resolutionsPage.css b/webview-ui/src/components/resolutionsPage.css deleted file mode 100644 index c0bf92cf..00000000 --- a/webview-ui/src/components/resolutionsPage.css +++ /dev/null @@ -1,31 +0,0 @@ -.pf-v6-c-card.pf-m-blue { - background-color: var(--pf-t--global--color--nonstatus--blue--default); -} - -.pf-v6-theme-dark .pf-v6-c-card.pf-m-yellow { - background-color: var(--pf-t--global--color--nonstatus--default); -} - -.pf-v6-c-card.pf-m-yellow { - background-color: var(--pf-t--global--color--nonstatus--yellow--default); -} - -.chat-card-container { - width: 80%; - min-width: 400px; - display: flex; - flex-direction: row-reverse; -} - -/* .chat-card-container table * { - color: black; -} */ - -.resolutions-show-in-dark, -.pf-v6-theme-dark .resolutions-show-in-light { - display: none; -} - -.pf-v6-theme-dark .resolutions-show-in-dark { - display: revert; -} diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index 570bbb09..4a72546f 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -1,4 +1,20 @@ @import "@patternfly/react-core/dist/styles/base.css"; +.pf-v6-c-masthead, +.pf-v6-c-page, +.pf-v6-c-page__main-container, +.pf-v6-c-card { + background-color: var(--vscode-editor-background) !important; +} + +:root { + --pf-v6-c-card--BackgroundColor: var(--vscode-editor-background) !important; + --pf-t--global--background--color--primary--default: var(--vscode-editor-background) !important; + --pf-v6-c-content--Color: var(--vscode-editor-foreground) !important; + --pf-v6-c-page--BackgroundColor: var(--vscode-editor-background) !important; + --pf-v6-c-page__main-container--BackgroundColor: var(--vscode-editor-background) !important; + --pf-t--global--text--color--link--100: #3794ff; /* VS Code textLink.foreground */ + --pf-t--global--color--status--danger--100: #f48771; /* VS Code errorForeground */ +} #root { height: 100vh; @@ -10,14 +26,6 @@ overflow-y: auto; } -.truncate-text { - /* white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; */ - /* max-width: 100%; - display: inline-block; */ -} - .pf-c-expandable-section__toggle-text { width: 100%; }