From a266066d25b03aac0b5ef650500a93ac2bf9602d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Dye?= <agusni.12@gmail.com>
Date: Fri, 24 May 2024 10:27:47 +0200
Subject: [PATCH] fix(frontend): using dark mode in tiptap (#2616)

# Description

Applying dark mode to icons in tiptap.

## Checklist before requesting a review

Please delete options that are not relevant.

- [X] My code follows the style guidelines of this project
- [X] I have performed a self-review of my code

## Screenshots:
<img width="906" alt="image"
src="https://github.com/QuivrHQ/quivr/assets/33584382/c8d86fa2-0f58-4c44-82d2-5162a5e025cd">
---
 .../MentionsList/MentionItem/MentionItem.module.scss  |  6 +++++-
 .../Editor/MentionsList/MentionItem/MentionItem.tsx   | 11 +++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.module.scss b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.module.scss
index b9a76da8d..9b47e3665 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.module.scss
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.module.scss
@@ -21,4 +21,8 @@
   .brain_name {
     @include Typography.EllipsisOverflow;
   }
-}
+
+  .dark_image {
+    filter: invert(100%);
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.tsx
index db90ff883..78869e3f2 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 
 import Icon from "@/lib/components/ui/Icon/Icon";
+import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
 
 import styles from "./MentionItem.module.scss";
 
@@ -18,16 +19,18 @@ export const MentionItem = ({
   onClick,
   isSelected,
 }: MentionItemProps): JSX.Element => {
+
+  const { isDarkMode } = useUserSettingsContext();
+
   return (
     <span
-      className={`${styles.mention_item_wrapper} ${
-        isSelected ? styles.selected : ""
-      }`}
+      className={`${styles.mention_item_wrapper} ${isSelected ? styles.selected : ""
+        }`}
       key={item.id}
       onClick={onClick}
     >
       {item.iconUrl ? (
-        <Image src={item.iconUrl} width={18} height={18} alt="logo_url" />
+        <Image src={item.iconUrl} width={18} height={18} alt="logo_url" className={isDarkMode ? styles.dark_image : ""} />
       ) : (
         <Icon color="primary" size="normal" name="brain" />
       )}