get smaller setting

src/pages/editor/components/SettingsPanel.tsx

@@ -6,6 +6,7 @@ import UploadBoxDraggble from '@/components/UploadBoxDraggble'
 import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
 import ColorsImage from '@/assets/images/colors.png'
 import ColorPicker from '@/components/ColorPicker'
+import Select from '@/components/Select'
 
 const PRESET_COLORS = [
   '#a8edcf',
@@ -95,32 +96,19 @@ const SettingsPanel = () => {
       {/* ─── تنظیمات نمایش ─── */}
       <section className="p-4 border-b border-border">
         <div className="flex items-center gap-2 mb-4">
-          <h3 className="text-sm font-semibold text-gray-800">تنظیمات نمایش</h3>
+          <h3 className="text-sm text-gray-800">تنظیمات نمایش</h3>
         </div>
 
         {/* استایل نمایش */}
         <div className="mb-4">
           <label className="block text-xs text-gray-500 mb-2">استایل نمایش</label>
-          <div className="relative">
+          <Select
-            <select
             value={displayStyle}
+            items={DISPLAY_STYLE_OPTIONS}
             onChange={(e) =>
               updateDocumentSettings({ displayStyle: e.target.value as DisplayStyle })
             }
-              className="w-full appearance-none border border-border rounded-xl px-3 py-2.5 text-sm bg-white text-right pr-3 pl-8 cursor-pointer focus:outline-none focus:ring-2 focus:ring-gray-200"
+          />
-            >
-              {DISPLAY_STYLE_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-            <span className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400">
-              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
-            </span>
-          </div>
         </div>
 
         {/* چک‌باکس‌ها */}
@@ -145,7 +133,7 @@ const SettingsPanel = () => {
 
       <section className="p-4 border-b border-border">
         <div className="flex items-center gap-2 mb-4">
-          <h3 className="text-sm font-semibold text-gray-800">تنظیمات ویرایشگر</h3>
+          <h3 className="text-sm">تنظیمات ویرایشگر</h3>
         </div>
         <div className="flex flex-col gap-3">
           <CheckboxRow
@@ -158,7 +146,7 @@ const SettingsPanel = () => {
 
       {/* ─── پس زمینه ─── */}
       <section className="p-4">
-        <h3 className="text-sm font-semibold text-gray-800 mb-4">پس زمینه</h3>
+        <h3 className="text-sm  mb-4">پس زمینه</h3>
 
         {/* نوع پس‌زمینه */}
         <div className="flex items-center gap-5 mb-4">
@@ -205,7 +193,7 @@ const SettingsPanel = () => {
                   key={color}
                   onClick={() => updateCurrentPageBackground({ backgroundColor: color })}
                   className={clx(
-                    'w-9 h-9 rounded-xl border-2 transition-all',
+                    'size-7 rounded-lg border-2 transition-all',
                     backgroundColor === color
                       ? 'border-gray-800 scale-110'
                       : 'border-transparent hover:scale-105'
@@ -342,11 +330,11 @@ type CheckboxRowProps = {
 
 const CheckboxRow = ({ label, checked, onChange }: CheckboxRowProps) => (
   <label className="flex items-center justify-between cursor-pointer select-none group">
-    <span className="text-sm text-gray-700">{label}</span>
+    <span className="text-xs text-gray-700">{label}</span>
     <div
       onClick={() => onChange(!checked)}
       className={clx(
-        'w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all',
+        'size-[18px] rounded-md border-2 flex items-center justify-center transition-all',
         checked
           ? 'border-gray-800 bg-gray-800'
           : 'border-gray-300 bg-white group-hover:border-gray-400'