From a85c4f96b98e0a8bcf0af9b01a051dae7e57d1c8 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Tue, 18 Feb 2025 18:41:12 +0800
Subject: [PATCH] fix: position page and account switcher

---
 .../AccountSwitcher/AccountSwitcher.tsx        |  8 ++++----
 src/components/ui/account-popover.tsx          |  8 ++++----
 src/screens/PositionsPage/PositionsPage.tsx    | 18 +++++++++++++-----
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/AccountSwitcher/AccountSwitcher.tsx b/src/components/AccountSwitcher/AccountSwitcher.tsx
index e2dc6be..a743881 100644
--- a/src/components/AccountSwitcher/AccountSwitcher.tsx
+++ b/src/components/AccountSwitcher/AccountSwitcher.tsx
@@ -4,12 +4,12 @@ import { useClientStore } from '@/stores/clientStore';
 import { useAccount } from '@/hooks/useAccount';
 import { AccountPopover, AccountPopoverContent, AccountPopoverTrigger } from '@/components/ui/account-popover';
 import { AccountInfo } from './AccountInfo';
-import { useDeviceDetection } from '@/hooks/useDeviceDetection';
+import { useOrientationStore } from '@/stores/orientationStore';
 
 export const AccountSwitcher: React.FC = () => {
   const { balance } = useClientStore();
   const { accountType, selectedAccount } = useAccount();
-  const { isDesktop } = useDeviceDetection();
+  const { isLandscape } = useOrientationStore();
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -18,7 +18,7 @@ export const AccountSwitcher: React.FC = () => {
         <button
           data-testid="balance-display"
           className={`flex flex-col relative ${
-            isDesktop ? 'items-end' : 'items-start'
+            isLandscape ? 'items-end' : 'items-start'
           }`}
         >
           <div className="flex items-center gap-1">
@@ -37,7 +37,7 @@ export const AccountSwitcher: React.FC = () => {
         </button>
       </AccountPopoverTrigger>
       <AccountPopoverContent
-        align={isDesktop ? "end" : "start"}
+        align={isLandscape ? "end" : "start"}
       >
         <AccountInfo />
       </AccountPopoverContent>
diff --git a/src/components/ui/account-popover.tsx b/src/components/ui/account-popover.tsx
index 2709c48..7b95a8c 100644
--- a/src/components/ui/account-popover.tsx
+++ b/src/components/ui/account-popover.tsx
@@ -1,6 +1,6 @@
 import * as Popover from "@radix-ui/react-popover"
 import { cn } from "@/lib/utils"
-import { useDeviceDetection } from "@/hooks/useDeviceDetection"
+import { useOrientationStore } from "@/stores/orientationStore"
 
 export const AccountPopover = Popover.Root
 export const AccountPopoverTrigger = Popover.Trigger
@@ -11,12 +11,12 @@ export const AccountPopoverContent = ({
   sideOffset = 4,
   ...props
 }: Popover.PopoverContentProps) => {
-  const { isDesktop } = useDeviceDetection()
+  const { isLandscape } = useOrientationStore()
 
   return (
   <Popover.Portal>
     <>
-      {!isDesktop && (
+      {!isLandscape && (
         <div 
           className="fixed inset-0 z-50 bg-black/60 animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
         />
@@ -26,7 +26,7 @@ export const AccountPopoverContent = ({
       sideOffset={sideOffset}
       className={cn(
         "z-50 rounded-md border bg-white p-0 shadow-md outline-none",
-        isDesktop ? "w-80" : "w-[90vw]",
+        isLandscape ? "w-80" : "w-[90vw]",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
diff --git a/src/screens/PositionsPage/PositionsPage.tsx b/src/screens/PositionsPage/PositionsPage.tsx
index 9b2912f..552da2f 100644
--- a/src/screens/PositionsPage/PositionsPage.tsx
+++ b/src/screens/PositionsPage/PositionsPage.tsx
@@ -56,17 +56,25 @@ const PositionsPage: React.FC = () => {
   }, [swipedCard]);
 
   return (
-    <div className="p-4 w-full lg:w-1/4 h-full fixed left-15 top-0 bg-white shadow-md overflow-y-auto"> 
+    <div className="flex flex-col flex-1 h-full bg-white"> 
       {/* Tabs */}
-      <div className="flex border-b mt-4">
+      <div className="flex sticky top-0 z-10 px-4 bg-white border-b border-border">
         <button
-          className={`mt-7 flex-1 p-2 text-center ${activeTab === "open" ? "border-b-2 border-black font-bold" : "text-gray-500"}`}
+          className={`flex-1 py-3 border-b-2 transition-colors ${
+            activeTab === "open" 
+              ? "border-primary text-primary" 
+              : "border-transparent text-muted-foreground"
+          }`}
           onClick={() => setActiveTab("open")}
         >
           Open
         </button>
         <button
-          className={`mt-7 flex-1 p-2 text-center ${activeTab === "closed" ? "border-b-2 border-black font-bold" : "text-gray-500"}`}
+          className={`flex-1 py-3 border-b-2 transition-colors ${
+            activeTab === "closed" 
+              ? "border-primary text-primary" 
+              : "border-transparent text-muted-foreground"
+          }`}
           onClick={() => setActiveTab("closed")}
         >
           Closed
@@ -74,7 +82,7 @@ const PositionsPage: React.FC = () => {
       </div>
 
       {/* Positions List */}
-      <div className="mt-4">
+      <div className="flex-1 overflow-y-auto px-2 pb-4 pt-2 space-y-2 bg-gray-100">
         {positions
           .filter((position) => (activeTab === "open" ? position.isOpen : !position.isOpen))
           .map((position) => {