🐛 Use vscode theme for color and bg color where possible to prevent l…

…egibility issues
konveyor · Feb 4, 2025 · e238106 · e238106
1 parent 8449216
commit e238106
Show file tree

Hide file tree

Showing 15 changed files with 184 additions and 127 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/...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,11 @@ 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 { ResponseWrapper } from "./ResponseWrapper";
 import "./resolutionsPage.css";
+import { IncidentTableGroup } from "../IncidentTable/IncidentTableGroup";
 
 const ResolutionPage: React.FC = () => {
   const [state, dispatch] = useExtensionState();
@@ -50,11 +50,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 +75,16 @@ 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>
+              <ResponseWrapper type="sent">
+                Here is the scope of what I would like you to fix:
+              </ResponseWrapper>
               <FlexItem className="chat-card-container">
                 <ChatCard color="yellow">
                   <IncidentTableGroup
@@ -104,73 +94,60 @@ const ResolutionPage: React.FC = () => {
                   />
                 </ChatCard>
               </FlexItem>
-              <FlexItem>
-                <YellowLabel>Please provide resolution for this issue.</YellowLabel>
-              </FlexItem>
+              <ResponseWrapper type="sent">
+                Please provide resolution for this issue.
+              </ResponseWrapper>
             </Flex>
           )}
+
           <Flex
-            direction={{
-              default: "column",
-            }}
+            direction={{ default: "column" }}
             grow={{ default: "grow" }}
             alignItems={{ default: "alignItemsFlexStart" }}
           >
             {hasNothingToView && (
-              <FlexItem>
-                <Label color="blue">No resolutions available.</Label>
-              </FlexItem>
+              <ResponseWrapper type="received">No resolutions available.</ResponseWrapper>
             )}
             {isHistorySolution && (
-              <FlexItem>
-                <Label color="blue">Loaded last known resolution.</Label>
-              </FlexItem>
+              <ResponseWrapper type="received">Loaded last known resolution.</ResponseWrapper>
             )}
             {solutionMessages.map((msg) => (
-              <FlexItem key={msg}>
-                <Label color="blue">{msg}</Label>
-              </FlexItem>
+              <ResponseWrapper key={msg} type="received">
+                {msg}
+              </ResponseWrapper>
             ))}
             {isFetchingSolution && <Spinner />}
 
             {hasResponse && (
-              <FlexItem>
-                <ChatCard color="blue">
-                  <FileChanges
-                    changes={getRemainingFiles()}
-                    onFileClick={handleFileClick}
-                    onApplyFix={handleAcceptClick}
-                    onRejectChanges={handleRejectClick}
-                  />
-                </ChatCard>
-              </FlexItem>
+              <ResponseWrapper type="received">
+                <FileChanges
+                  changes={getRemainingFiles()}
+                  onFileClick={handleFileClick}
+                  onApplyFix={handleAcceptClick}
+                  onRejectChanges={handleRejectClick}
+                />
+              </ResponseWrapper>
             )}
             {hasEmptyResponse && !hasResponseWithErrors && (
-              <FlexItem>
-                <Label color="blue">Received response contains no resolutions.</Label>
-              </FlexItem>
+              <ResponseWrapper type="received">
+                Received response contains no resolutions.
+              </ResponseWrapper>
             )}
 
             {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>
+                <ResponseWrapper type="received">Response contains errors:</ResponseWrapper>
+                <ResponseWrapper type="received">
+                  <ul>
+                    {resolution.encountered_errors.map((error, index) => (
+                      <li key={index}>{error}</li>
+                    ))}
+                  </ul>
+                </ResponseWrapper>
               </>
             )}
             {isResolved && !isFetchingSolution && (
-              <FlexItem>
-                <Label color="blue">All resolutions have been applied.</Label>
-              </FlexItem>
+              <ResponseWrapper type="received">All resolutions have been applied.</ResponseWrapper>
             )}
           </Flex>
         </Flex>
@@ -180,20 +157,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/ResponseWrapper.tsx b/webview-ui/src/components/ResolutionsPage/ResponseWrapper.tsx
@@ -0,0 +1,29 @@
+import React, { FC } from "react";
+import { Label, FlexItem } from "@patternfly/react-core";
+
+interface ResponseWrapperProps {
+  type: "sent" | "received";
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const ResponseWrapper: FC<ResponseWrapperProps> = ({ type, children, className = "" }) => {
+  if (type === "sent") {
+    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>
+    );
+  }
+
+  return (
+    <FlexItem className={`response-wrapper ${className}`}>
+      <Label color="blue">{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