Fixing setting listen for theme change

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
+    // const themeModule = verticalIconsPlugin.registry.get('themeModule').api
-    themeModule.events.on('themeChanged', (theme: any) => {
+    // themeModule.events.on('themeChanged', (theme: any) => {
-      onThemeChanged(theme.quality)
+    //   onThemeChanged(theme.quality)
-    })
+    // })
-  }, [onThemeChanged])
+    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

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}