From 5e1f61d000223e38d76e1d4c771edcf8a0ea82e8 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 28 Oct 2021 18:56:02 +0100
Subject: [PATCH] add more fixes to review comments

---
 .../src/lib/components/Settings.tsx                   | 11 +++++++++--
 .../src/lib/remix-ui-vertical-icons-panel.tsx         |  5 +++--
 2 files changed, 12 insertions(+), 4 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 1a4e706abc..81f2d88279 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
@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Chevron } from './Chevron'
 import Icon from './Icon'
 
@@ -11,9 +11,16 @@ interface SettingsProps {
   addActive: (name: string) => void
   removeActive: () => void
   scrollableRef: React.MutableRefObject<any>
+  onThemeChanged: (themeType: any) => void
 }
 
-function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive }: SettingsProps) {
+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])
   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 d813a69c4f..6b78d40205 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 > scrollableRef.current.clientHeight
+        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > 500
           ? '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 > scrollableRef.current.clientHeight
+          className={scrollableRef.current && scrollableRef.current.scrollHeight > 500
             ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
             : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}
@@ -130,6 +130,7 @@ export function RemixUiVerticalIconsPanel ({
                 removeActive={removeActive}
                 itemContextAction={itemContextAction}
                 scrollableRef={scrollableRef}
+                onThemeChanged={onThemeChanged}
               />
             </Fragment>
           ) : null}