From e4f1af1e94ee62faebfdeb0962c8f423455aee00 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 13 Jul 2023 15:45:09 +0530
Subject: [PATCH] chore: fix toolbar image option color

---
 packages/icons/src/Icons/ic-file-image.svg             |  4 ++--
 packages/icons/src/Lexical/file-image.svg              |  1 -
 .../SuperEditor/Plugins/Blocks/RemoteImage.tsx         |  8 +++++++-
 .../MobileToolbarPlugin/MobileToolbarPlugin.tsx        | 10 ++++++++--
 4 files changed, 17 insertions(+), 6 deletions(-)
 delete mode 100644 packages/icons/src/Lexical/file-image.svg

diff --git a/packages/icons/src/Icons/ic-file-image.svg b/packages/icons/src/Icons/ic-file-image.svg
index 8e5ef196a..41a92561f 100644
--- a/packages/icons/src/Icons/ic-file-image.svg
+++ b/packages/icons/src/Icons/ic-file-image.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 5C1 2.79086 2.79086 1 5 1H27C29.2091 1 31 2.79086 31 5V27C31 29.2091 29.2091 31 27 31H5C2.79086 31 1 29.2091 1 27V5Z" fill="#7049CF"/>
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-[#7049CF]">
+<path d="M1 5C1 2.79086 2.79086 1 5 1H27C29.2091 1 31 2.79086 31 5V27C31 29.2091 29.2091 31 27 31H5C2.79086 31 1 29.2091 1 27V5Z" fill="currentColor"/>
 <path d="M24 14.4V24H8L16 16L19.2 19.2L24 14.4ZM12.8 10.4C12.8 11.0365 12.5471 11.647 12.0971 12.0971C11.647 12.5471 11.0365 12.8 10.4 12.8C9.76348 12.8 9.15303 12.5471 8.70294 12.0971C8.25286 11.647 8 11.0365 8 10.4C8 9.76348 8.25286 9.15303 8.70294 8.70294C9.15303 8.25286 9.76348 8 10.4 8C11.0365 8 11.647 8.25286 12.0971 8.70294C12.5471 9.15303 12.8 9.76348 12.8 10.4Z" fill="white"/>
 </svg>
diff --git a/packages/icons/src/Lexical/file-image.svg b/packages/icons/src/Lexical/file-image.svg
deleted file mode 100644
index 0940c182a..000000000
--- a/packages/icons/src/Lexical/file-image.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="bi bi-file-image"><path d="M8.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/><path d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8l-2.083-2.083a.5.5 0 0 0-.76.063L8 11 5.835 9.7a.5.5 0 0 0-.611.076L3 12V2z"/></svg>
\ No newline at end of file
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/RemoteImage.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/RemoteImage.tsx
index f04c18d13..cfee14214 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/RemoteImage.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/RemoteImage.tsx
@@ -1,3 +1,9 @@
 export function GetRemoteImageBlock(onSelect: () => void) {
-  return { name: 'Image from URL', iconName: 'file-image', keywords: ['image', 'url'], onSelect }
+  return {
+    name: 'Image from URL',
+    iconName: 'file-image',
+    iconClassName: '!text-current',
+    keywords: ['image', 'url'],
+    onSelect,
+  }
 }
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx
index a1bcf90a5..714ba00f3 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx
@@ -65,7 +65,13 @@ const MobileToolbarPlugin = () => {
   }, [editor])
 
   const items = useMemo(
-    () => [
+    (): {
+      name: string
+      iconName: string
+      iconClassName?: string
+      keywords?: string[]
+      onSelect: () => void
+    }[] => [
       {
         name: 'Bold',
         iconName: 'bold',
@@ -222,7 +228,7 @@ const MobileToolbarPlugin = () => {
                 onClick={item.onSelect}
                 key={item.name}
               >
-                <Icon type={item.iconName} size="medium" />
+                <Icon type={item.iconName} size="medium" className={item.iconClassName} />
               </button>
             )
           })}