feature/IO-3499-React-19 Checkpoint

client/src/components/chat-popup/chat-popup.component.jsx

@@ -15,17 +15,19 @@ import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 import "./chat-popup.styles.scss";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import { selectDarkMode } from "../../redux/application/application.selectors.js";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
-  chatVisible: selectChatVisible
+  chatVisible: selectChatVisible,
+  isDarkMode: selectDarkMode
 });
 
 const mapDispatchToProps = (dispatch) => ({
   toggleChatVisible: () => dispatch(toggleChatVisible())
 });
 
-export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
+export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible, isDarkMode }) {
   const { t } = useTranslation();
   const { socket } = useSocket();
   const client = useApolloClient();
@@ -113,7 +115,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
   const handleManualRefresh = async () => {
     try {
       if (called && typeof refetch === "function") {
-        await refetch({ variables: { offset: 0 } });
+        await refetch({ offset: 0 });
       } else {
         await getConversations({ variables: { offset: 0 } });
       }
@@ -154,7 +156,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     <Badge count={unreadCount}>
       <Card size="small">
         {chatVisible ? (
-          <div className="chat-popup">
+          <div className={`chat-popup ${isDarkMode ? "chat-popup--dark" : "chat-popup--light"}`}>
             <Space align="center">
               <Typography.Title level={4}>{t("messaging.labels.messaging")}</Typography.Title>
               <ChatNewConversation />

client/src/components/chat-popup/chat-popup.styles.scss

@@ -26,3 +26,11 @@
     flex-direction: column;
   }
 }
+
+.chat-popup--dark {
+  color-scheme: dark;
+}
+
+.chat-popup--light {
+  color-scheme: light;
+}