Merge pull request #14 from deriv-com/shafin/ChampionTrader/feat-mino…

…r-ui-update chore: update minor UI elements
deriv-com · Feb 4, 2025 · 5ee6b42 · 5ee6b42
2 parents a5df84f + 8109754
commit 5ee6b42
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 46 deletions.
diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
@@ -3,8 +3,9 @@ import { useBottomSheetStore } from "@/stores/bottomSheetStore";
 import { bottomSheetConfig } from "@/config/bottomSheetConfig";
 
 export const BottomSheet = () => {
-  const { showBottomSheet, key, height, onDragDown, setBottomSheet } = useBottomSheetStore();
-
+  const { showBottomSheet, key, height, onDragDown, setBottomSheet } =
+    useBottomSheetStore();
+
   const sheetRef = useRef<HTMLDivElement>(null);
   const dragStartY = useRef<number>(0);
   const currentY = useRef<number>(0);
@@ -17,18 +18,21 @@ export const BottomSheet = () => {
     isDragging.current = true;
   }, []);
 
-  const handleTouchMove = useCallback((e: TouchEvent) => {
-    if (!sheetRef.current || !isDragging.current) return;
+  const handleTouchMove = useCallback(
+    (e: TouchEvent) => {
+      if (!sheetRef.current || !isDragging.current) return;
 
-    const touch = e.touches[0];
-    const deltaY = touch.clientY - dragStartY.current;
-    currentY.current = deltaY;
+      const touch = e.touches[0];
+      const deltaY = touch.clientY - dragStartY.current;
+      currentY.current = deltaY;
 
-    if (deltaY > 0) {
-      sheetRef.current.style.transform = `translateY(${deltaY}px)`;
-      onDragDown?.();
-    }
-  }, [onDragDown]);
+      if (deltaY > 0) {
+        sheetRef.current.style.transform = `translateY(${deltaY}px)`;
+        onDragDown?.();
+      }
+    },
+    [onDragDown]
+  );
 
   const handleTouchEnd = useCallback(() => {
     if (!sheetRef.current) return;
@@ -58,15 +62,20 @@ export const BottomSheet = () => {
   if (!showBottomSheet || !body) return null;
 
   // Convert percentage to vh for height if needed
-  const processedHeight = height.endsWith('%') 
-    ? `${parseFloat(height)}vh` 
+  const processedHeight = height.endsWith("%")
+    ? `${parseFloat(height)}vh`
     : height;
 
   return (
     <>
       {/* Overlay */}
-      <div 
+      <div
         className="fixed inset-0 bg-black/80 z-50 animate-in fade-in-0"
+        onClick={() => {
+          // Only close if clicking the overlay itself, not its children
+          onDragDown?.();
+          setBottomSheet(false);
+        }}
       />
 
       {/* Sheet */}
@@ -89,19 +98,15 @@ export const BottomSheet = () => {
         `}
       >
         {/* Handle Bar */}
-        <div 
+        <div
           className="flex flex-col items-center justify-center px-0 py-2 w-full"
           onTouchStart={handleTouchStart}
         >
-          <div 
-            className="w-32 h-1 bg-muted hover:bg-muted-foreground transition-colors cursor-grab active:cursor-grabbing" 
-          />
+          <div className="w-32 h-1 bg-muted hover:bg-muted-foreground transition-colors cursor-grab active:cursor-grabbing" />
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4">
-          {body}
-        </div>
+        <div className="flex-1 overflow-y-auto p-4">{body}</div>
       </div>
     </>
   );

diff --git a/src/components/BottomSheet/__tests__/BottomSheet.test.tsx b/src/components/BottomSheet/__tests__/BottomSheet.test.tsx
@@ -86,7 +86,7 @@ describe("BottomSheet", () => {
     expect(mockSetBottomSheet).toHaveBeenCalledWith(false);
   });
 
-  it("does not close when clicking overlay", () => {
+  it("should close when clicking overlay", () => {
     mockUseBottomSheetStore.mockReturnValue({
       showBottomSheet: true,
       key: 'test-key',
@@ -100,6 +100,6 @@ describe("BottomSheet", () => {
     expect(overlay).toBeInTheDocument();
     fireEvent.click(overlay!);
 
-    expect(mockSetBottomSheet).not.toHaveBeenCalled();
+    expect(mockSetBottomSheet).toHaveBeenCalled();
   });
 });
diff --git a/src/screens/TradePage/TradePage.tsx b/src/screens/TradePage/TradePage.tsx
@@ -76,40 +76,40 @@ export const TradePage: React.FC = () => {
         </Suspense>
       </div>
 
-      <div id="trade-section" className="landscape:w-[40%] landscape:min-w-[260px] landscape:max-w-[360px] landscape:flex landscape:flex-col landscape:justify-center landscape:mt-[78px]">
+      <div id="trade-section" className="landscape:w-[40%] landscape:min-w-[260px] landscape:max-w-[360px] landscape:flex landscape:flex-col landscape:justify-center landscape:mt-[78px] landscape:border-l landscape:border-gray-300 landscape:border-opacity-20">
         <div className="flex flex-col gap-4 p-4 landscape:pt-4 landscape:pb-2 landscape:px-4" id="trade-fields">
           <div className="flex gap-4 landscape:flex-col landscape:gap-2" id="trade-params">
-            <TradeParam label="Duration" value={duration} className="landscape:w-full" />
-            <TradeParam label="Stake" value={stake} className="landscape:w-full" onClick={handleStakeClick} />
+        <TradeParam label="Duration" value={duration} className="landscape:w-full" />
+        <TradeParam label="Stake" value={stake} className="landscape:w-full" onClick={handleStakeClick} />
           </div>
 
           <div id="trade-toggles" className="landscape:mt-2">
-            <ToggleButton
-              label="Allow equals"
-              value={allowEquals}
-              onChange={toggleAllowEquals}
-            />
+        <ToggleButton
+          label="Allow equals"
+          value={allowEquals}
+          onChange={toggleAllowEquals}
+        />
           </div>
         </div>
 
         <div className="flex landscape:flex-col gap-2 p-4 landscape:py-2" id="trade-buttons">
           <Suspense fallback={<div>Loading...</div>}>
-            <TradeButton
-              className="bg-emerald-500 hover:bg-emerald-600 rounded-full landscape:h-[52px] landscape:py-4 landscape:[&>div]:px-2 landscape:[&_span]:text-sm"
-              title="Rise"
-              label="Payout"
-              value="19.55 USD"
-              title_position="right"
-            />
+        <TradeButton
+          className="bg-emerald-500 hover:bg-emerald-600 rounded-full landscape:h-[52px] landscape:py-4 landscape:[&>div]:px-2 landscape:[&_span]:text-sm"
+          title="Rise"
+          label="Payout"
+          value="19.55 USD"
+          title_position="right"
+        />
           </Suspense>
           <Suspense fallback={<div>Loading...</div>}>
-            <TradeButton
-              className="bg-rose-500 hover:bg-rose-600 rounded-full landscape:h-[52px] landscape:py-4 landscape:[&>div]:px-2 landscape:[&_span]:text-sm"
-              title="Fall"
-              label="Payout"
-              value="19.55 USD"
-              title_position="left"
-            />
+        <TradeButton
+          className="bg-rose-500 hover:bg-rose-600 rounded-full landscape:h-[52px] landscape:py-4 landscape:[&>div]:px-2 landscape:[&_span]:text-sm"
+          title="Fall"
+          label="Payout"
+          value="19.55 USD"
+          title_position="left"
+        />
           </Suspense>
         </div>
       </div>