🐛 Map vscode theme colors to pf variables for improved light mode sup…

…port (#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 <[email protected]>
konveyor · Feb 6, 2025 · 7954009 · 7954009
1 parent d742eef
commit 7954009
Show file tree

Hide file tree

Showing 16 changed files with 183 additions and 131 deletions.
diff --git 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
diff --git 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
@@ -161,7 +161,7 @@ const AnalysisPage: React.FC = () => {
 
                 {!isAnalyzing && !hasViolations && (
                   <EmptyState variant="sm">
-                    <Title headingLevel="h2" size="md">
+                    <Title className="empty-state-analysis-results" headingLevel="h2" size="md">
                       {hasAnalysisResults ? "No Violations Found" : "No Analysis Results"}
                     </Title>
                     <EmptyStateBody>

diff --git 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
@@ -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 → ...omponents/ResolutionsPage/FileChanges.tsx b/webview-ui/src/components/FileChanges.tsx → ...omponents/ResolutionsPage/FileChanges.tsx
diff --git a/webview-ui/src/components/ResolutionsPage/ReceivedMessage.tsx 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<ReceivedMessageProps> = ({ children, className = "" }) => {
+  return (
+    <FlexItem className={`response-wrapper ${className}`}>
+      <Label color="blue">{children}</Label>
+    </FlexItem>
+  );
+};
diff --git a/...iew-ui/src/components/ResolutionsPage.tsx → ...nents/ResolutionsPage/ResolutionsPage.tsx b/...iew-ui/src/components/ResolutionsPage.tsx → ...nents/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 = () => {
       </PageSection>
 
       <PageSection>
-        <Flex
-          direction={{
-            default: "column",
-          }}
-        >
+        <Flex direction={{ default: "column" }} className="chat-container">
           {isTriggeredByUser && (
             <Flex
-              direction={{
-                default: "column",
-              }}
+              direction={{ default: "column" }}
               grow={{ default: "grow" }}
               alignItems={{ default: "alignItemsFlexEnd" }}
-              justifyContent={{ default: "justifyContentFlexEnd" }}
             >
-              <FlexItem>
-                <YellowLabel>Here is the scope of what I would like you to fix:</YellowLabel>
-              </FlexItem>
+              <SentMessage>Here is the scope of what I would like you to fix:</SentMessage>
               <FlexItem className="chat-card-container">
                 <ChatCard color="yellow">
                   <IncidentTableGroup
@@ -104,73 +93,50 @@ const ResolutionPage: React.FC = () => {
                   />
                 </ChatCard>
               </FlexItem>
-              <FlexItem>
-                <YellowLabel>Please provide resolution for this issue.</YellowLabel>
-              </FlexItem>
+              <SentMessage>Please provide resolution for this issue.</SentMessage>
             </Flex>
           )}
+
           <Flex
-            direction={{
-              default: "column",
-            }}
+            direction={{ default: "column" }}
             grow={{ default: "grow" }}
             alignItems={{ default: "alignItemsFlexStart" }}
           >
-            {hasNothingToView && (
-              <FlexItem>
-                <Label color="blue">No resolutions available.</Label>
-              </FlexItem>
-            )}
-            {isHistorySolution && (
-              <FlexItem>
-                <Label color="blue">Loaded last known resolution.</Label>
-              </FlexItem>
-            )}
+            {hasNothingToView && <ReceivedMessage>No resolutions available.</ReceivedMessage>}
+            {isHistorySolution && <ReceivedMessage>Loaded last known resolution.</ReceivedMessage>}
             {solutionMessages.map((msg) => (
-              <FlexItem key={msg}>
-                <Label color="blue">{msg}</Label>
-              </FlexItem>
+              <ReceivedMessage key={msg}>{msg}</ReceivedMessage>
             ))}
             {isFetchingSolution && <Spinner />}
 
             {hasResponse && (
-              <FlexItem>
-                <ChatCard color="blue">
-                  <FileChanges
-                    changes={getRemainingFiles()}
-                    onFileClick={handleFileClick}
-                    onApplyFix={handleAcceptClick}
-                    onRejectChanges={handleRejectClick}
-                  />
-                </ChatCard>
-              </FlexItem>
+              <ReceivedMessage>
+                <FileChanges
+                  changes={getRemainingFiles()}
+                  onFileClick={handleFileClick}
+                  onApplyFix={handleAcceptClick}
+                  onRejectChanges={handleRejectClick}
+                />
+              </ReceivedMessage>
             )}
             {hasEmptyResponse && !hasResponseWithErrors && (
-              <FlexItem>
-                <Label color="blue">Received response contains no resolutions.</Label>
-              </FlexItem>
+              <ReceivedMessage>Received response contains no resolutions.</ReceivedMessage>
             )}
 
             {hasResponseWithErrors && (
               <>
-                <FlexItem>
-                  <Label color="blue">Response contains errors:</Label>
-                </FlexItem>
-                <FlexItem>
-                  <ChatCard color="blue">
-                    <ul>
-                      {resolution.encountered_errors.map((error, index) => (
-                        <li key={index}>{error}</li>
-                      ))}
-                    </ul>
-                  </ChatCard>
-                </FlexItem>
+                <ReceivedMessage>Response contains errors:</ReceivedMessage>
+                <ReceivedMessage>
+                  <ul>
+                    {resolution.encountered_errors.map((error, index) => (
+                      <li key={index}>{error}</li>
+                    ))}
+                  </ul>
+                </ReceivedMessage>
               </>
             )}
             {isResolved && !isFetchingSolution && (
-              <FlexItem>
-                <Label color="blue">All resolutions have been applied.</Label>
-              </FlexItem>
+              <ReceivedMessage>All resolutions have been applied.</ReceivedMessage>
             )}
           </Flex>
         </Flex>
@@ -180,20 +146,9 @@ const ResolutionPage: React.FC = () => {
 };
 
 const ChatCard: FC<{ color: "blue" | "yellow"; children: JSX.Element }> = ({ children, color }) => (
-  <Card className={color === "blue" ? "pf-m-blue" : "pf-m-yellow"}>
+  <Card className={`chat-bubble pf-m-${color}`}>
     <CardBody>{children}</CardBody>
   </Card>
 );
 
-const YellowLabel: FC<{ children: JSX.Element | string }> = ({ children }) => (
-  <>
-    <Label className="resolutions-show-in-light" color="yellow">
-      {children}
-    </Label>
-    <Label className="resolutions-show-in-dark" variant="outline">
-      {children}
-    </Label>
-  </>
-);
-
 export default ResolutionPage;
diff --git a/webview-ui/src/components/ResolutionsPage/SentMessage.tsx 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<SentMessageProps> = ({ children, className = "" }) => {
+  return (
+    <FlexItem className={`response-wrapper ${className}`}>
+      <Label className="resolutions-show-in-light" color="yellow">
+        {children}
+      </Label>
+      <Label className="resolutions-show-in-dark" variant="outline">
+        {children}
+      </Label>
+    </FlexItem>
+  );
+};
diff --git a/webview-ui/src/components/fileChanges.css → ...omponents/ResolutionsPage/fileChanges.css b/webview-ui/src/components/fileChanges.css → ...omponents/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
@@ -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
@@ -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 {
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ test_out @@
     .vscode-test/
     *.vsix
     org.eclipse*
+    *.log