Merge pull request #4098 from CrocSwap/merged-mobile-refactors

Merge all mobile refactors PR
CrocSwap · Sep 11, 2024 · 598898b · 598898b
2 parents 7616a91 + 4aee5eb
commit 598898b
Show file tree

Hide file tree

Showing 59 changed files with 3,740 additions and 1,359 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
         <link
             rel="apple-touch-icon"
             sizes="180x180"

diff --git a/src/App/App.css b/src/App/App.css
@@ -359,10 +359,13 @@ input[type='number'] {
         overflow-y: auto;
         overflow-x: hidden;
         height: calc(100vh - 56px);
-
+        
         background: var(--dark1);
+
     }
     .content-container-trade {
         background: var(--dark1);
     }
 }
+
+
diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -96,6 +96,11 @@ export default function App() {
             }
         }
     }, [isEscapePressed]);
+
+    useEffect(() => {
+        appHeaderDropdown.setIsActive(false);
+    }, [location]);
+
     const showMobileVersion = useMediaQuery('(max-width: 800px)');
     // const showChatPanel =
     //     currentLocation !== '/' &&
@@ -133,7 +138,7 @@ export default function App() {
                     height:
                         location.pathname == '/'
                             ? 'calc(100vh - 56px)'
-                            : '100vh',
+                            : '100dvh',
                 }}
             >
                 {showPoints && showPointSystemPopup && (

diff --git a/src/App/components/PageHeader/Account/Account.tsx b/src/App/components/PageHeader/Account/Account.tsx
@@ -24,6 +24,7 @@ import { UserDataContext } from '../../../../contexts/UserDataContext';
 import LevelDropdown from './LevelDropdown/LevelDropdown';
 import { ChainDataContext } from '../../../../contexts/ChainDataContext';
 import NotificationCenter from '../../../../components/Global/NotificationCenter/NotificationCenter';
+import useMediaQuery from '../../../../utils/hooks/useMediaQuery';
 // TODO: use user context instead of UseAccount
 interface propsIF {
     accountAddress: string;
@@ -43,6 +44,8 @@ export default function Account(props: propsIF) {
     const { isUserConnected } = useContext(UserDataContext);
 
     const { connectedUserXp } = useContext(ChainDataContext);
+    const smallScreen = useMediaQuery('(max-width: 500px)');
+
 
     const [_, copy] = useCopyToClipboard();
 
@@ -194,8 +197,8 @@ export default function Account(props: propsIF) {
             overflow='visible'
             alignItems='center'
         >
-            {isUserConnected && walletDisplay}
-            {isUserConnected && levelDisplay}
+            {isUserConnected && !smallScreen && walletDisplay}
+            {isUserConnected && !smallScreen && levelDisplay}
             {isUserConnected && <ExchangeBalanceDropdown />}
             <NotificationCenter />
 

diff --git a/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx b/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx
@@ -29,6 +29,7 @@ import { lookupChain } from '@crocswap-libs/sdk/dist/context';
 import { BrandContext } from '../../../../contexts/BrandContext';
 import { lookupChainId } from '../../../../ambient-utils/dataLayer';
 import { useSwitchNetwork, useWeb3ModalAccount } from '@web3modal/ethers/react';
+import useMediaQuery from '../../../../utils/hooks/useMediaQuery';
 
 interface propsIF {
     customBR?: string;
@@ -42,6 +43,8 @@ export default function NetworkSelector(props: propsIF) {
     } = useContext(CrocEnvContext);
     const { networks, platformName, includeCanto } = useContext(BrandContext);
     const { switchNetwork } = useSwitchNetwork();
+    const smallScreen = useMediaQuery('(max-width: 600px)');
+
 
     const linkGenIndex: linkGenMethodsIF = useLinkGen('index');
     const [searchParams, setSearchParams] = useSearchParams();
@@ -332,6 +335,7 @@ export default function NetworkSelector(props: propsIF) {
             >
                 <DropdownMenu2
                     marginTop={'50px'}
+                    marginRight={smallScreen ? '70px' : ''}
                     titleWidth={'80px'}
                     title={lookupChain(chainId).displayName}
                     expandable={networks.length > 1}

diff --git a/src/App/components/PageHeader/PageHeader.tsx b/src/App/components/PageHeader/PageHeader.tsx
@@ -450,21 +450,7 @@ const PageHeader = function () {
                             gap={8}
                             overflow='visible'
                         >
-                            {/* {desktopScreen && (
-                                <FlexContainer fontSize='body' color={'orange'}>
-                                    {APP_ENVIRONMENT !== 'production' ? (
-                                        <FlexContainer
-                                            alignItems='center'
-                                            gap={4}
-                                        >
-                                            {`${BRANCH_NAME} - v${appVersion}`}
-                                            {APP_ENVIRONMENT !== 'testnet' && (
-                                                <BiGitBranch color='yellow' />
-                                            )}
-                                        </FlexContainer>
-                                    ) : null}
-                                </FlexContainer>
-                            )} */}
+
                             <NetworkSelector />
                             {!isUserConnected && connectWagmiButton}
                             <Account {...accountProps} />

diff --git a/src/components/Form/Form.styles.ts b/src/components/Form/Form.styles.ts
@@ -9,7 +9,6 @@ export const ButtonBase = styled.button<{
     isFuta?: boolean;
 }>`
     width: ${({ width }) => width || '100%'};
-    max-width: 500px;
     height: ${({ height }) => height || 'auto'};
     outline: none;
     padding: 12px 16px;

diff --git a/src/components/Global/ContentContainer/ContentContainer.module.css b/src/components/Global/ContentContainer/ContentContainer.module.css
@@ -1,11 +1,18 @@
-.window {
-    position: relative;
+.trade_route {
+    background: transparent;
+    margin-top: 0;
+    border-radius: var(--border-radius);
+}
 
-    color: var(--text2);
+.swap_route {
+    border: 0.5px solid var(--accent-accent1, #7371fc);
     border-radius: var(--border-radius);
+    box-shadow: var(--swap-box-shadow);
+    box-shadow: inset 0px 0px 20px 0px rgba(115, 113, 252, 0.25);
+}
 
-    background-color: var(--accent1);
-    background: var(--accent1);
+.container {
+    width: 100%;
 }
 
 .main_content {
@@ -14,7 +21,7 @@
 
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 1rem;
 }
 
 .swap_main_content {
@@ -40,97 +47,20 @@
     transition: var(--transition);
 }
 
-.swap_route {
-    background: var(--accent1);
-    padding: 1px;
-    border-radius: var(--border-radius);
-    box-shadow: var(--swap-box-shadow);
-}
-
-/* media queries */
-
-@media (min-width: 1200px) {
-    .container {
-        max-width: 1140px;
-    }
-
-    .customWidthAuto {
-        max-width: 1240px;
-    }
-}
-
-@media (min-width: 992px) {
-    .container {
-        max-width: 960px;
-    }
-    .customWidthAuto {
-        max-width: auto;
+@media (max-width: 768px) {
+    .trade_route {
+        /* max-width: 500px; */
+        width: 100%;
     }
 }
 
 @media (min-width: 768px) {
-    .container {
-        max-width: 720px;
-    }
-
-    .customWidthAuto {
-        max-width: auto;
-    }
-    .no_background:hover,
-    .no_background:focus-within {
-        box-shadow: none;
-    }
-
-    .swap_main_content {
-        padding: 24px;
-    }
-}
-@media (min-width: 1200px) {
-    .container {
-        max-width: 420px;
-    }
     .swap_route {
-        min-width: 430px;
         max-width: 440px;
     }
-    .customWidth_container {
-        max-width: 640px;
-    }
 
-    .customWidthAuto {
-        max-width: auto;
-    }
-}
-
-@media only screen and (max-width: 1200px) {
     .main_content {
-        background-color: var(--dark1);
-    }
-
-    .swap_route,
-    .no_background {
-        margin: 0 auto;
-    }
-}
-
-@media only screen and (max-width: 600px) {
-    .main_content {
-        /* overflow-y: scroll;
-        min-height: 50svh;
-        max-height: 80svh; */
-        padding: 8px !important;
-        box-shadow: none;
-    }
-
-    .swap_route {
-        background: transparent;
-    }
-
-    .swap_route,
-    .no_background {
-        width: 95%;
-
-
-        /* overflow-y: scroll; */
+        padding: 8px 16px 16px 16px;
+        gap: 8px;
     }
 }
diff --git a/src/components/Global/ContentContainer/ContentContainer.tsx b/src/components/Global/ContentContainer/ContentContainer.tsx
@@ -1,52 +1,31 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import styles from './ContentContainer.module.css';
 
 interface ContentContainerPropsIF {
     children: ReactNode;
-    customWidth?: boolean;
-    customWidthAuto?: boolean;
     isOnTradeRoute?: boolean;
-    noPadding?: boolean;
-    noStyle?: boolean;
+    style?: CSSProperties; // Allow custom inline styles
 }
 
 export default function ContentContainer(props: ContentContainerPropsIF) {
     const {
         children,
         isOnTradeRoute,
-        customWidth,
-        customWidthAuto,
-        noPadding,
-        noStyle,
+        style
     } = props;
 
-    const customWidthStyle = customWidth ? styles.customWidth_container : null;
     const tradeRouteStyle = isOnTradeRoute
-        ? styles.no_background
-        : styles.swap_bg;
-    const swapRouteStyle = isOnTradeRoute ? null : styles.swap_route;
-    const customWidthAutoStyle = customWidthAuto
-        ? styles.customWidthAuto
-        : styles.container;
-
-    if (noStyle) return <>{children}</>;
-
-
+        ? styles.trade_route
+        : styles.swap_route
+
 
     return (
-        <section
-            className={`$ ${customWidthStyle} ${customWidthAutoStyle} ${tradeRouteStyle} ${swapRouteStyle}`}
-        >
-            <section className={`${styles.window} ${tradeRouteStyle}`}>
-                <div
-                    className={`${styles.main_content} ${
-                        !isOnTradeRoute && styles.swap_main_content
-                    }`}
-                    style={{ padding: noPadding ? '' : '8px 16px 16px 16px' }}
-                >
+        <section className={tradeRouteStyle} style={style}>
+            <div className={styles.container} >
+                <div className={styles.main_content}>
                     {children}
                 </div>
-            </section>
+            </div>
         </section>
     );
 }
diff --git a/src/components/Global/DropdownMenu2/DropdownMenu2.tsx b/src/components/Global/DropdownMenu2/DropdownMenu2.tsx
@@ -13,6 +13,8 @@ interface propsIF {
     title: string;
     children: ReactNode;
     marginTop?: string;
+    marginRight?: string;
+    marginLeft?: string;
     titleWidth?: string;
     logo?: string;
     left?: string;
@@ -30,6 +32,8 @@ export default function DropdownMenu2(props: propsIF) {
         left,
         right,
         expandable,
+        marginRight,
+        marginLeft
     } = props;
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const { appHeaderDropdown } = useContext(AppStateContext);
@@ -67,8 +71,8 @@ export default function DropdownMenu2(props: propsIF) {
             exit='hidden'
             style={{
                 top: marginTop ? marginTop : '30px',
-                left: left,
-                right: right,
+                left: marginLeft ?? left,
+                right: marginRight ?? right,
             }}
         >
             {children}