ProBottomSheet: enhance UI

src/components/ProBottomSheet/ProBottomSheet.tsx

@@ -2,6 +2,7 @@ import { CloseOutlined } from "@ant-design/icons";
 import { Button } from "antd";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useAppSelector } from "redux/hooks";
+import { darkColors, lightColors } from "ThemeConstants";
 
 interface ProBottomSheetProps {
   isOpen: boolean;
@@ -112,24 +113,43 @@ export function ProBottomSheet({
     [isDragging, currentSnap, snapPoints.length, onClose],
   );
 
+  // Track if drag started from handle/header area
+  const dragStartElementRef = useRef<HTMLElement | null>(null);
+
   // Touch event handlers
   const handleTouchStart = useCallback(
     (e: React.TouchEvent) => {
-      startDrag(e.touches[0].clientY);
+      // Only allow drag if starting from handle or header area
+      const target = e.target as HTMLElement;
+      const isHandle = target.closest('[style*="cursor: grab"]') !== null;
+      const isHeader = target.closest('[style*="borderBottom"]') !== null;
+
+      if (isHandle || isHeader) {
+        dragStartElementRef.current = target;
+        startDrag(e.touches[0].clientY);
+      }
     },
     [startDrag],
   );
 
   const handleTouchMove = useCallback(
     (e: React.TouchEvent) => {
+      // Only handle drag if it started from handle/header
+      if (!isDragging || !dragStartElementRef.current) return;
+
+      // Prevent scroll from affecting the bottom sheet
+      e.preventDefault();
       handleDrag(e.touches[0].clientY);
     },
-    [handleDrag],
+    [handleDrag, isDragging],
   );
 
   const handleTouchEnd = useCallback(
     (e: React.TouchEvent) => {
-      endDrag(e.changedTouches[0].clientY);
+      if (dragStartElementRef.current) {
+        endDrag(e.changedTouches[0].clientY);
+        dragStartElementRef.current = null;
+      }
     },
     [endDrag],
   );
@@ -192,7 +212,8 @@ export function ProBottomSheet({
     right: 0,
     bottom: 0,
     height: snapPoints[currentSnap] || height,
-    backgroundColor: themeName === "dark" ? "#0a0a0a" : "#ffffff",
+    backgroundColor:
+      themeName === "dark" ? darkColors.bgColor : lightColors.bgColor,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     boxShadow:
@@ -237,7 +258,8 @@ export function ProBottomSheet({
     flex: 1,
     overflow: "auto",
     padding: "0 20px",
-    backgroundColor: themeName === "dark" ? "#0a0a0a" : "#ffffff",
+    backgroundColor:
+      themeName === "dark" ? darkColors.bgColor : lightColors.bgColor,
     color: themeName === "dark" ? "#ffffff" : "#000000",
     ...contentStyle,
   };
@@ -320,7 +342,19 @@ export function ProBottomSheet({
           </div>
         )}
 
-        <div style={contentWrapperStyle}>{children}</div>
+        <div
+          style={contentWrapperStyle}
+          onTouchStart={(e) => {
+            // Prevent touch events in content from triggering sheet drag
+            e.stopPropagation();
+          }}
+          onTouchMove={(e) => {
+            // Allow normal scrolling in content
+            e.stopPropagation();
+          }}
+        >
+          {children}
+        </div>
       </div>
     </>
   );