Merge pull request #4304 from CrocSwap/fix-ambient-logo-page-headre

fix ambient logo in page header
CrocSwap · Nov 11, 2024 · cc3ec4d · cc3ec4d
2 parents dd648c9 + 8adcf3d
commit cc3ec4d
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/src/App/components/PageHeader/PageHeader.tsx b/src/App/components/PageHeader/PageHeader.tsx
@@ -59,13 +59,15 @@ import {
 } from '../../../contexts/ReceiptContext';
 import styles from './PageHeader.module.css';
 import { useBottomSheet } from '../../../contexts/BottomSheetContext';
+import { BrandContext } from '../../../contexts';
 
 const PageHeader = function () {
     const {
         activeNetwork: { chainId, poolIndex: poolId },
         walletModal: { open: openWalletModal },
         appHeaderDropdown,
     } = useContext<AppStateContextIF>(AppStateContext);
+    const { headerImage } = useContext(BrandContext);
     const { crocEnv, setCrocEnv } =
         useContext<CrocEnvContextIF>(CrocEnvContext);
     const { resetTokenBalances } =
@@ -452,12 +454,20 @@ const PageHeader = function () {
                         className={styles.logoContainer}
                         aria-label='Home'
                     >
-                        <img
-                            className={styles.logoText}
-                            src={logo}
-                            alt='ambient'
-                            width='60px'
-                        />
+                        {desktopScreen ? (
+                            <img
+                                src={headerImage}
+                                alt='ambient'
+                                style={{ marginRight: '20px' }}
+                            />
+                        ) : (
+                            <img
+                                className={styles.logoText}
+                                src={logo}
+                                alt='ambient'
+                                width='60px'
+                            />
+                        )}
                     </Link>
                     {routeDisplay}
                 </div>