Enhance ColorPicker component with RGB support and improved styling

- Added RGB value updates on color input changes and preset selections.
- Refactored RGB sliders to always be visible, enhancing user experience across devices.
- Improved range input styles for better accessibility and visual feedback.
- Updated number input fields for RGB values to hide spinners and ensure a cleaner look.

src/components/ColorPicker.tsx

@@ -87,6 +87,7 @@ export function ColorPicker({ value, onChange, label, description, disabled }: C
   const handleColorInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newColor = e.target.value
     setLocalValue(newColor)
+    setRgb(hexToRgb(newColor))
     onChange(newColor)
   }
 
@@ -102,8 +103,9 @@ export function ColorPicker({ value, onChange, label, description, disabled }: C
     if (newValue === '' || newValue.match(/^#[0-9A-Fa-f]{0,6}$/)) {
       setLocalValue(newValue)
 
-      // Only trigger onChange for valid complete hex
+      // Only trigger onChange and update RGB for valid complete hex
       if (newValue.match(/^#[0-9A-Fa-f]{6}$/)) {
+        setRgb(hexToRgb(newValue))
         onChange(newValue)
       }
     }
@@ -111,6 +113,7 @@ export function ColorPicker({ value, onChange, label, description, disabled }: C
 
   const handlePresetClick = (color: string) => {
     setLocalValue(color)
+    setRgb(hexToRgb(color))
     onChange(color)
     setIsOpen(false)
   }
@@ -178,71 +181,90 @@ export function ColorPicker({ value, onChange, label, description, disabled }: C
 
       {/* Dropdown with presets and RGB sliders */}
       {isOpen && (
-        <div className="absolute z-50 mt-2 p-3 bg-dark-800 rounded-xl border border-dark-700 shadow-xl animate-fade-in w-72">
+        <div className="absolute z-50 mt-2 p-3 sm:p-4 bg-dark-800 rounded-xl border border-dark-700 shadow-xl animate-fade-in w-[calc(100vw-2rem)] sm:w-80 max-w-sm left-0 sm:left-auto">
-          {/* RGB Sliders - shown in Telegram instead of native picker */}
+          {/* RGB Sliders - always visible on all devices */}
-          {isTelegram && (
           <div className="mb-3 pb-3 border-b border-dark-700">
-              <div className="text-xs text-dark-400 mb-2">RGB</div>
+            <div className="text-xs text-dark-400 mb-3">RGB</div>
-              <div className="space-y-2">
+            <div className="space-y-3 sm:space-y-2">
               {/* Red */}
-                <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 sm:gap-3">
-                  <span className="text-xs text-red-400 w-4">R</span>
+                <span className="text-xs font-medium text-red-400 w-4 flex-shrink-0">R</span>
                 <input
                   type="range"
                   min="0"
                   max="255"
                   value={rgb.r}
                   onChange={(e) => handleRgbChange('r', parseInt(e.target.value))}
-                    className="flex-1 h-2 rounded-full appearance-none cursor-pointer"
+                  className="flex-1 h-3 sm:h-2 rounded-full appearance-none cursor-pointer touch-pan-x"
                   style={{
                     background: `linear-gradient(to right, rgb(0,${rgb.g},${rgb.b}), rgb(255,${rgb.g},${rgb.b}))`,
                   }}
                 />
-                  <span className="text-xs text-dark-400 w-8 text-right">{rgb.r}</span>
+                <input
+                  type="number"
+                  min="0"
+                  max="255"
+                  value={rgb.r}
+                  onChange={(e) => handleRgbChange('r', Math.min(255, Math.max(0, parseInt(e.target.value) || 0)))}
+                  className="w-14 sm:w-12 text-xs text-center bg-dark-700 border border-dark-600 rounded px-1 py-1 text-dark-200"
+                />
               </div>
               {/* Green */}
-                <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 sm:gap-3">
-                  <span className="text-xs text-green-400 w-4">G</span>
+                <span className="text-xs font-medium text-green-400 w-4 flex-shrink-0">G</span>
                 <input
                   type="range"
                   min="0"
                   max="255"
                   value={rgb.g}
                   onChange={(e) => handleRgbChange('g', parseInt(e.target.value))}
-                    className="flex-1 h-2 rounded-full appearance-none cursor-pointer"
+                  className="flex-1 h-3 sm:h-2 rounded-full appearance-none cursor-pointer touch-pan-x"
                   style={{
                     background: `linear-gradient(to right, rgb(${rgb.r},0,${rgb.b}), rgb(${rgb.r},255,${rgb.b}))`,
                   }}
                 />
-                  <span className="text-xs text-dark-400 w-8 text-right">{rgb.g}</span>
+                <input
+                  type="number"
+                  min="0"
+                  max="255"
+                  value={rgb.g}
+                  onChange={(e) => handleRgbChange('g', Math.min(255, Math.max(0, parseInt(e.target.value) || 0)))}
+                  className="w-14 sm:w-12 text-xs text-center bg-dark-700 border border-dark-600 rounded px-1 py-1 text-dark-200"
+                />
               </div>
               {/* Blue */}
-                <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 sm:gap-3">
-                  <span className="text-xs text-blue-400 w-4">B</span>
+                <span className="text-xs font-medium text-blue-400 w-4 flex-shrink-0">B</span>
                 <input
                   type="range"
                   min="0"
                   max="255"
                   value={rgb.b}
                   onChange={(e) => handleRgbChange('b', parseInt(e.target.value))}
-                    className="flex-1 h-2 rounded-full appearance-none cursor-pointer"
+                  className="flex-1 h-3 sm:h-2 rounded-full appearance-none cursor-pointer touch-pan-x"
                   style={{
                     background: `linear-gradient(to right, rgb(${rgb.r},${rgb.g},0), rgb(${rgb.r},${rgb.g},255))`,
                   }}
                 />
-                  <span className="text-xs text-dark-400 w-8 text-right">{rgb.b}</span>
+                <input
+                  type="number"
+                  min="0"
+                  max="255"
+                  value={rgb.b}
+                  onChange={(e) => handleRgbChange('b', Math.min(255, Math.max(0, parseInt(e.target.value) || 0)))}
+                  className="w-14 sm:w-12 text-xs text-center bg-dark-700 border border-dark-600 rounded px-1 py-1 text-dark-200"
+                />
               </div>
             </div>
           </div>
-          )}
 
           <div className="text-xs text-dark-400 mb-2">Preset colors</div>
-          <div className="grid grid-cols-4 gap-1">
+          <div className="grid grid-cols-4 gap-2 sm:gap-1">
             {PRESET_COLORS.map((preset) => (
               <button
                 key={preset}
                 onClick={() => handlePresetClick(preset)}
-                className={`min-w-[44px] min-h-[44px] w-full aspect-square rounded-lg border-2 transition-all hover:scale-105 ${
+                className={`min-w-[40px] min-h-[40px] sm:min-w-[44px] sm:min-h-[44px] w-full aspect-square rounded-lg border-2 transition-all hover:scale-105 active:scale-95 ${
                   localValue.toLowerCase() === preset.toLowerCase() ? 'border-white ring-2 ring-white/30' : 'border-dark-600 hover:border-dark-500'
                 }`}
                 style={{ backgroundColor: preset }}

src/styles/globals.css

@@ -962,31 +962,83 @@
 input[type="range"] {
   -webkit-appearance: none;
   appearance: none;
+  height: 12px;
+  border-radius: 6px;
+  outline: none;
+  touch-action: pan-x;
+}
+
+/* Desktop: smaller track */
+@media (min-width: 640px) {
+  input[type="range"] {
     height: 8px;
     border-radius: 4px;
-  outline: none;
+  }
 }
 
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 18px;
+  width: 24px;
-  height: 18px;
+  height: 24px;
   border-radius: 50%;
   background: white;
   cursor: pointer;
-  border: 2px solid rgba(0, 0, 0, 0.2);
+  border: 2px solid rgba(0, 0, 0, 0.15);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.2);
+}
+
+input[type="range"]::-webkit-slider-thumb:active {
+  transform: scale(0.95);
+}
+
+/* Desktop: smaller thumb */
+@media (min-width: 640px) {
+  input[type="range"]::-webkit-slider-thumb {
+    width: 18px;
+    height: 18px;
+  }
 }
 
 input[type="range"]::-moz-range-thumb {
-  width: 18px;
+  width: 24px;
-  height: 18px;
+  height: 24px;
   border-radius: 50%;
   background: white;
   cursor: pointer;
-  border: 2px solid rgba(0, 0, 0, 0.2);
+  border: 2px solid rgba(0, 0, 0, 0.15);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+input[type="range"]::-moz-range-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.2);
+}
+
+/* Desktop: smaller thumb */
+@media (min-width: 640px) {
+  input[type="range"]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+/* Hide number input spinners for cleaner look */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
 }
 
 /* Selection color */