From 81184048955441d799c3fee0e7f0e344922bf2ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= <sedat.ozturk@sozsoft.com>
Date: Sat, 4 Jul 2026 21:35:41 +0300
Subject: [PATCH] =?UTF-8?q?ThemeConfigurator=20d=C3=BCzenlemesi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ThemeConfigurator/StyleSwitcher.tsx       | 33 +++++++++++--------
 .../ThemeConfigurator/ThemeConfigurator.tsx   |  9 +++--
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/template/ThemeConfigurator/StyleSwitcher.tsx b/ui/src/components/template/ThemeConfigurator/StyleSwitcher.tsx
index 75d7ec2..22dcbce 100644
--- a/ui/src/components/template/ThemeConfigurator/StyleSwitcher.tsx
+++ b/ui/src/components/template/ThemeConfigurator/StyleSwitcher.tsx
@@ -1,16 +1,16 @@
 import { HiCheck } from 'react-icons/hi'
 import { components } from 'react-select'
+import classNames from 'classnames'
 
 import { Select, toast } from '@/components/ui'
 import { styleMapOptions } from '@/views/admin/listForm/edit/options'
 import Notification from '@/components/ui/Notification'
-import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreActions, useStoreState } from '@/store'
 import { updateSettingValues } from '@/services/setting-ui.service'
 import React from 'react'
 
 const StyleSwitcher = ({ onStyleChange }: { onStyleChange?: () => void }) => {
-  const { translate } = useLocalization()
+  const menuItemHeight = 36
   const { setMode, setStyle, setThemeColor, setThemeColorLevel, abpConfig } = useStoreActions(
     (actions) => ({
       setMode: actions.theme.setMode,
@@ -20,7 +20,7 @@ const StyleSwitcher = ({ onStyleChange }: { onStyleChange?: () => void }) => {
       abpConfig: actions.abpConfig.getConfig,
     }),
   )
-  const { style, themeColor, primaryColorLevel } = useStoreState((state) => state.theme)
+  const { style } = useStoreState((state) => state.theme)
 
   const onSetStyle = React.useCallback(
     async (val: any) => {
@@ -44,17 +44,20 @@ const StyleSwitcher = ({ onStyleChange }: { onStyleChange?: () => void }) => {
       abpConfig(false)
       if (onStyleChange) onStyleChange()
     },
-    [setStyle, setMode, abpConfig, translate, onStyleChange],
+    [setStyle, setMode, setThemeColor, setThemeColorLevel, abpConfig, onStyleChange],
   )
 
   // Custom Option
-  const CustomSelectOption = ({ innerProps, label, data, isSelected }: any) => {
+  const CustomSelectOption = ({ innerProps, label, data, isSelected, isFocused }: any) => {
     const { border, fill } = data.color
     return (
       <div
-        className={`flex items-center justify-between p-2 cursor-pointer ${
-          isSelected ? 'bg-gray-100 dark:bg-gray-500' : 'hover:bg-gray-50 dark:hover:bg-gray-600'
-        }`}
+        className={classNames(
+          'select-option cursor-pointer',
+          isSelected && 'selected',
+          isFocused && 'focused',
+        )}
+        style={{ minHeight: menuItemHeight }}
         {...innerProps}
       >
         <div className="flex items-center">
@@ -81,7 +84,7 @@ const StyleSwitcher = ({ onStyleChange }: { onStyleChange?: () => void }) => {
   // Custom Control
   const CustomControl = ({ children, ...props }: any) => {
     const selected = props.getValue()[0]
-    const { border, fill } = selected?.color
+    const { border, fill } = selected?.color || { border: '#ccc', fill: '#fff' }
     return (
       <components.Control {...props}>
         {selected ? (
@@ -108,15 +111,17 @@ const StyleSwitcher = ({ onStyleChange }: { onStyleChange?: () => void }) => {
 
   return (
     <Select
-      value={styleMapOptions.find((o) => o.value === style)}
-      options={styleMapOptions}
-      onChange={(option: any) => {
-        onSetStyle(option)
-      }}
       components={{
         Option: CustomSelectOption,
         Control: CustomControl,
       }}
+      isSearchable={true}
+      maxMenuHeight={menuItemHeight * 7}
+      options={styleMapOptions}
+      value={styleMapOptions.find((o) => o.value === style)}
+      onChange={(option: any) => {
+        onSetStyle(option)
+      }}
     />
   )
 }
diff --git a/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx b/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
index 16e5788..46eb793 100644
--- a/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
+++ b/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
@@ -11,7 +11,6 @@ export type ThemeConfiguratorProps = {
   callBackClose?: () => void
 }
 
-
 const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
   const { translate } = useLocalization()
   const [modeKey, setModeKey] = useState(0)
@@ -24,6 +23,10 @@ const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
   return (
     <div className="flex flex-col h-full justify-between">
       <div className="flex flex-col gap-y-3 mb-2 ml-1">
+        <div>
+          <h6 className="mb-3">{translate('::SidePanel.Layout')}</h6>
+          <LayoutSwitcher />
+        </div>
         <div>
           <h6 className="mb-3">{translate('::App.SiteManagement.Theme.Style')}</h6>
           <StyleSwitcher onStyleChange={handleStyleChange} />
@@ -50,10 +53,6 @@ const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
           </div>
           <DirectionSwitcher callBackClose={callBackClose} />
         </div>
-        <div>
-          <h6 className="mb-3">{translate('::SidePanel.Layout')}</h6>
-          <LayoutSwitcher />
-        </div>
       </div>
     </div>
   )