From 3b5f1efb746ac8881e4789b5e4e19338b447eb63 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 28 Oct 2021 23:22:39 +0100
Subject: [PATCH] Fixing setting listen for theme change

---
 .../src/lib/components/Settings.tsx             | 17 ++++++++++++-----
 .../src/lib/remix-ui-vertical-icons-panel.tsx   |  4 ++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
index 81f2d88279..db15eeaa7e 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -14,13 +14,20 @@ interface SettingsProps {
   onThemeChanged: (themeType: any) => void
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive, onThemeChanged }: SettingsProps) {
   useEffect(() => {
-    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
-    themeModule.events.on('themeChanged', (theme: any) => {
-      onThemeChanged(theme.quality)
-    })
-  }, [onThemeChanged])
+    // const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    // themeModule.events.on('themeChanged', (theme: any) => {
+    //   onThemeChanged(theme.quality)
+    // })
+    return () => {
+      document.addEventListener('themeChanged', (theme: any) => {
+        // onThemeChanged(theme.quality)
+        console.log('this is what theme contains', theme)
+      })
+    }
+  })
   return (
     <div id="settingsIcons" data-id="vertialIconsSettingsIcons">
       <Chevron
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 6b78d40205..a69839ac5f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -96,7 +96,7 @@ export function RemixUiVerticalIconsPanel ({
   return (
     <div id="iconsP" className="h-100">
       <div className="remixui_icons" ref={iconPanelRef}>
-        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > 500
+        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > 600
           ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
           <Home verticalIconPlugin={verticalIconsPlugin} />
           <RequiredSection
@@ -109,7 +109,7 @@ export function RemixUiVerticalIconsPanel ({
         </div>
         <div
           id="remixuiScrollable"
-          className={scrollableRef.current && scrollableRef.current.scrollHeight > 500
+          className={scrollableRef.current && scrollableRef.current.scrollHeight > 600
             ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
             : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}