refactor special request & time estimate components

src/components/ProBottomSheet/ProBottomSheet.tsx

@@ -63,7 +63,7 @@ export function ProBottomSheet({
       const deltaY = clientY - startPosRef.current;
       sheetRef.current.style.transform = `translateY(${Math.max(0, deltaY)}px)`;
     },
-    [isDragging]
+    [isDragging],
   );
 
   const endDrag = useCallback(
@@ -91,7 +91,7 @@ export function ProBottomSheet({
         sheetRef.current.style.transform = "translateY(0)";
       }
     },
-    [isDragging, currentSnap, snapPoints.length, onClose]
+    [isDragging, currentSnap, snapPoints.length, onClose],
   );
 
   // Touch event handlers
@@ -99,21 +99,21 @@ export function ProBottomSheet({
     (e: React.TouchEvent) => {
       startDrag(e.touches[0].clientY);
     },
-    [startDrag]
+    [startDrag],
   );
 
   const handleTouchMove = useCallback(
     (e: React.TouchEvent) => {
       handleDrag(e.touches[0].clientY);
     },
-    [handleDrag]
+    [handleDrag],
   );
 
   const handleTouchEnd = useCallback(
     (e: React.TouchEvent) => {
       endDrag(e.changedTouches[0].clientY);
     },
-    [endDrag]
+    [endDrag],
   );
 
   // Mouse event handlers
@@ -121,21 +121,21 @@ export function ProBottomSheet({
     (e: React.MouseEvent) => {
       startDrag(e.clientY);
     },
-    [startDrag]
+    [startDrag],
   );
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
       handleDrag(e.clientY);
     },
-    [handleDrag]
+    [handleDrag],
   );
 
   const handleMouseUp = useCallback(
     (e: MouseEvent) => {
       endDrag(e.clientY);
     },
-    [endDrag]
+    [endDrag],
   );
 
   // Mouse event listeners
@@ -212,8 +212,6 @@ export function ProBottomSheet({
     alignItems: "center",
     justifyContent: "space-between",
     minHeight: 60,
-    backgroundColor:
-      themeName === "dark" ? "rgba(42, 42, 42, 0.8)" : "transparent",
     backdropFilter: themeName === "dark" ? "blur(8px)" : "none",
   };