More UX Signoff enhancements (opendatahub-io#6268)

* Fixed dark mode for header in model comapre

Signed-off-by: Agnieszka Gancarczyk <agagancarczyk@gmail.com>

* Fixed the checkbox behaviour

Signed-off-by: Agnieszka Gancarczyk <agagancarczyk@gmail.com>

---------

Signed-off-by: Agnieszka Gancarczyk <agagancarczyk@gmail.com>

Author: agagancarczyk

packages/gen-ai/frontend/src/app/Chatbot/ChatbotPane.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Card, CardBody } from '@patternfly/react-core';
 import { ResponseMetrics } from '~/app/types';
+import useDarkMode from '~/app/Chatbot/hooks/useDarkMode';
 import ChatbotPaneHeader from './components/ChatbotPaneHeader';
 
 interface ChatbotPaneProps {
@@ -33,38 +34,42 @@ const ChatbotPane: React.FC<ChatbotPaneProps> = ({
   children,
   metrics,
   isLoading,
-}) => (
-  <Card
-    isFullHeight
-    isPlain
-    style={{ boxShadow: 'none', display: 'flex', flexDirection: 'column', height: '100%' }}
-    data-testid={`chatbot-pane-${configId}`}
-    role="region"
-    aria-label={displayLabel}
-  >
-    <ChatbotPaneHeader
-      label={displayLabel}
-      selectedModel={selectedModel}
-      onModelChange={onModelChange}
-      onSettingsClick={onSettingsClick}
-      onCloseClick={onClose}
-      metrics={metrics}
-      isLoading={isLoading}
-      hasDivider
-      testIdPrefix={`chatbot-pane-${configId}`}
-    />
-    <CardBody
-      style={{
-        padding: 0,
-        overflow: 'hidden',
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-      }}
+}) => {
+  const isDarkMode = useDarkMode();
+  return (
+    <Card
+      isFullHeight
+      isPlain
+      style={{ boxShadow: 'none', display: 'flex', flexDirection: 'column', height: '100%' }}
+      data-testid={`chatbot-pane-${configId}`}
+      role="region"
+      aria-label={displayLabel}
     >
-      {children}
-    </CardBody>
-  </Card>
-);
+      <ChatbotPaneHeader
+        label={displayLabel}
+        selectedModel={selectedModel}
+        onModelChange={onModelChange}
+        onSettingsClick={onSettingsClick}
+        onCloseClick={onClose}
+        metrics={metrics}
+        isLoading={isLoading}
+        hasDivider
+        testIdPrefix={`chatbot-pane-${configId}`}
+        isDarkMode={isDarkMode}
+      />
+      <CardBody
+        style={{
+          padding: 0,
+          overflow: 'hidden',
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {children}
+      </CardBody>
+    </Card>
+  );
+};
 
 export default ChatbotPane;

packages/gen-ai/frontend/src/app/Chatbot/mcp/MCPServersPanel.tsx

@@ -184,11 +184,23 @@ const MCPServersPanel: React.FC<MCPServersPanelProps> = ({
   }, [totalActiveTools, onActiveToolsCountChange]);
 
   const handleConfigModalClose = React.useCallback(() => {
+    if (configModal.selectedItem) {
+      const serverToDeselect = transformedServers.find(
+        (server) => server.id === configModal.selectedItem!.id,
+      );
+      if (serverToDeselect && isSelected(serverToDeselect)) {
+        const tokenInfo = tokenManagement.getToken(serverToDeselect.connectionUrl);
+        const isAuthenticated = tokenInfo?.authenticated || tokenInfo?.autoConnected || false;
+        if (!isAuthenticated) {
+          toggleSelection(serverToDeselect);
+        }
+      }
+    }
     configModal.closeModal();
     fireFormTrackingEvent(MCP_AUTH_EVENT_NAME, {
       outcome: TrackingOutcome.cancel,
     });
-  }, [configModal]);
+  }, [configModal, transformedServers, isSelected, toggleSelection, tokenManagement]);
 
   const handleToolsModalClose = React.useCallback(() => {
     toolsModal.closeModal();