fix: resolve conflicts

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>

src/components/MarketInfo/MarketInfo.tsx

@@ -21,11 +21,11 @@ export const MarketInfo: React.FC<MarketInfoProps> = ({
   if (isMobile) {
     return (
       <div
-        className="w-full cursor-pointer"
+        className="inline-flex cursor-pointer mx-4 my-2"
         data-id="market-info"
         onClick={onClick}
       >
-        <div className="flex items-center gap-4 px-4 py-3 bg-black/[0.04]">
+        <div className="flex items-center gap-4 px-4 py-3 bg-black/[0.04] rounded-lg">
           {selectedMarket && (
             <div className="w-8 h-8 flex items-center justify-center">
               <MarketIcon
@@ -49,7 +49,7 @@ export const MarketInfo: React.FC<MarketInfoProps> = ({
 
   return (
     <div
-      className="inline-flex cursor-pointer bg-white hover:bg-gray-100 active:bg-gray-200 rounded-lg transition-colors"
+      className="inline-flex cursor-pointer bg-gray-100 hover:bg-gray-100 active:bg-gray-200 rounded-lg transition-colors"
       data-id="market-info"
       onClick={onClick}
     >
@@ -65,12 +65,12 @@ export const MarketInfo: React.FC<MarketInfoProps> = ({
         )}
         <div className="min-w-0">
           <div className="flex items-center gap-2">
-            <div className="text-base font-bold text-black/[0.72] leading-6 font-ibm-plex-sans truncate">{title}</div>
-            <ChevronDown className="w-5  text-black/[0.72] flex-shrink-0 stroke-[1.5]" />
+            <div className="text-base font-bold text-[#4C4C4C] leading-6 font-ibm-plex-sans truncate">{title}</div>
+            <ChevronDown className="w-5 text-[#4C4C4C] flex-shrink-0 stroke-[1.5]" />
           </div>
-          <div className="text-sm text-black/[0.48] leading-5 font-ibm-plex-sans truncate">{subtitle}</div>
+          <div className="text-sm text-[#808080] leading-5 font-ibm-plex-sans truncate">{subtitle}</div>
         </div>
       </div>
     </div>
   )
-}
+} 

src/components/MarketSelector/MarketIcon.tsx

@@ -1,16 +1,16 @@
 import React from "react"
 import { marketIcons } from "./marketIcons"
-import type { IconTypes } from '@deriv/quill-icons'
+import type { IconTypes } from "@deriv/quill-icons"
 
 interface MarketIconProps {
   symbol: string
   isOneSecond?: boolean
-  size?: "default" | "large" | "xlarge"
+  size?: "default" | "large" | "xlarge" | "small"
   showBadge?: boolean
 }
 
-export const MarketIcon: React.FC<MarketIconProps> = ({ 
-  symbol, 
+export const MarketIcon: React.FC<MarketIconProps> = ({
+  symbol,
   size = "default",
 }) => {
   const Icon = marketIcons[symbol] as IconTypes
@@ -22,16 +22,26 @@ export const MarketIcon: React.FC<MarketIconProps> = ({
 
   return (
     <div className="relative">
-      <div className={`flex items-center justify-center ${
-        size === "xlarge" ? "w-[64px] h-[64px]" : 
-        size === "large" ? "w-[52px] h-[52px]" : 
-        "w-[40px] h-[40px]"
-      }`}>
-        <Icon className={
-          size === "xlarge" ? "w-10 h-10" :
-          size === "large" ? "w-8 h-8" : 
-          "w-6 h-6"
-        } />
+      <div
+        className={`flex items-center justify-center ${
+          size === "xlarge"
+            ? "w-[64px] h-[64px]"
+            : size === "large"
+            ? "w-[52px] h-[52px]"
+            : size === "small"
+            ? "w-[24px] h-[24px]"
+            : "w-[40px] h-[40px]"
+        }`}
+      >
+        <Icon
+          className={
+            size === "xlarge"
+              ? "w-10 h-10"
+              : size === "large"
+              ? "w-8 h-8"
+              : "w-6 h-6"
+          }
+        />
       </div>
     </div>
   )

src/components/PositionsSidebar/PositionsSidebar.tsx

@@ -146,4 +146,4 @@ export const PositionsSidebar: FC<PositionsSidebarProps> = ({ isOpen, onClose })
   );
 };
 
-export default PositionsSidebar;
+export default PositionsSidebar;

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",

src/layouts/MainLayout/Header.tsx

@@ -22,7 +22,7 @@ export const Header: React.FC<HeaderProps> = ({
 
   return (
     <header
-      className={`flex items-center gap-4 px-4 py-2 border-b border-opacity-10 bg-white ${className}`}
+      className={`flex items-center gap-4 px-4 py-3 border-b border-opacity-10 bg-white ${className}`}
       id="header"
     >
       {showLogo && (

src/layouts/MainLayout/MainLayout.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect } from "react";
 import { useDeviceDetection } from "@/hooks/useDeviceDetection";
 import { useOrientationStore } from "@/stores/orientationStore";
+import { useHeaderStore } from "@/stores/headerStore";
+import { useBottomNavStore } from "@/stores/bottomNavStore";
 import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { SideNav } from "@/components/SideNav";
@@ -16,6 +18,8 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
   const { isLandscape, setIsLandscape } = useOrientationStore();
   const [isSidebarOpen, setSidebarOpen] = React.useState(false);
   const [isMenuOpen, setMenuOpen] = React.useState(false);
+  const isHeaderVisible = useHeaderStore(state => state.isVisible);
+  const isBottomNavVisible = useBottomNavStore(state => state.isVisible);
 
   useEffect(() => {
     const handleOrientationChange = () => {
@@ -37,7 +41,9 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
 
   return (
     <div className="min-h-[100dvh] h-[100dvh] flex flex-col">
-      <Header className="sticky top-0 z-50 w-full" />
+      {isHeaderVisible && (
+        <Header className="sticky top-0 z-50 w-full" />
+      )}
       <div className={`flex flex-1 relative ${isDesktop ? "overflow-hidden" : "" }`}>
         {isLandscape && (
           <SideNav isSidebarOpen={isSidebarOpen} setSidebarOpen={setSidebarOpen} setMenuOpen={setMenuOpen} isMenuOpen={isMenuOpen} />
@@ -54,7 +60,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
         <main className={`flex-1 ${isLandscape ? 'flex flex-row' : 'flex flex-col'}`}>
           {children}
         </main>
-        {!isLandscape && <Footer className="sticky bottom-0 z-50" />}
+        {!isLandscape && isBottomNavVisible && <Footer className="sticky bottom-0 z-50" />}
       </div>
       </div>
     </div>

src/layouts/MainLayout/__tests__/MainLayout.test.tsx

@@ -17,6 +17,14 @@ const renderWithRouter = (ui: React.ReactElement, initialRoute = '/') => {
   );
 };
 
+jest.mock('../../../stores/headerStore', () => ({
+  useHeaderStore: jest.fn().mockImplementation((selector) => selector({ isVisible: true, setIsVisible: jest.fn() }))
+}));
+
+jest.mock('../../../stores/bottomNavStore', () => ({
+  useBottomNavStore: jest.fn().mockImplementation((selector) => selector({ isVisible: true, setIsVisible: jest.fn() }))
+}));
+
 beforeAll(() => {
   global.fetch = jest.fn().mockImplementation(() =>
     Promise.resolve({
@@ -52,7 +60,7 @@ describe('MainLayout', () => {
       </MainLayout>
     );
     // Check for base layout classes.
-    expect(container.firstChild).toHaveClass('flex');
+    expect(container.firstChild).toHaveClass('min-h-[100dvh]');
   });
 
   it('does not render footer when user is logged out', () => {