From 95c1649fb673392ce28beac78236c695559c8588 Mon Sep 17 00:00:00 2001
From: Jadessu <junioradessu@gmail.com>
Date: Thu, 7 Nov 2024 17:03:44 -0600
Subject: [PATCH 1/2] refactor page header

---
 .../NetworkSelector/NetworkSelector.tsx         | 14 +++++++++++++-
 .../components/PageHeader/PageHeader.module.css | 17 +++++++++++++++++
 src/App/components/PageHeader/PageHeader.tsx    | 17 ++++++++++++-----
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx b/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx
index 27265ddc1c..f49a2dfde6 100644
--- a/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx
+++ b/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx
@@ -257,6 +257,18 @@ export default function NetworkSelector(props: propsIF) {
             </motion.li>
         ) : null,
     );
+    function truncate(str: string, maxLength: number): string {
+        if (str.length <= maxLength) {
+          return str;
+        } else {
+          const suffix = '...';
+          return maxLength > suffix.length
+            ? str.slice(0, maxLength - suffix.length) + suffix
+            : str.slice(0, maxLength);
+        }
+      }
+      
+      
 
     return (
         <div
@@ -270,7 +282,7 @@ export default function NetworkSelector(props: propsIF) {
                     marginTop={'50px'}
                     marginRight={smallScreen ? '70px' : ''}
                     titleWidth={'80px'}
-                    title={lookupChain(chainId).displayName}
+                    title={truncate(lookupChain(chainId).displayName, 2)}
                     expandable={networks.length > 1}
                     logo={
                         lookupChain(chainId)
diff --git a/src/App/components/PageHeader/PageHeader.module.css b/src/App/components/PageHeader/PageHeader.module.css
index 09803c27a0..a715703e5f 100644
--- a/src/App/components/PageHeader/PageHeader.module.css
+++ b/src/App/components/PageHeader/PageHeader.module.css
@@ -133,6 +133,23 @@
     .logoContainer img:nth-of-type(1) {
         margin: 0 4px;
     }
+
+    .primaryHeader{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        
+    }
+
+    .left_side{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    
 }
 
 @media (max-width: 1200px) {
diff --git a/src/App/components/PageHeader/PageHeader.tsx b/src/App/components/PageHeader/PageHeader.tsx
index 7f300d6953..66d9412e5f 100644
--- a/src/App/components/PageHeader/PageHeader.tsx
+++ b/src/App/components/PageHeader/PageHeader.tsx
@@ -36,7 +36,7 @@ import { GraphDataContext } from '../../../contexts/GraphDataContext';
 import { TokenBalanceContext } from '../../../contexts/TokenBalanceContext';
 import { TradeDataContext } from '../../../contexts/TradeDataContext';
 import { ReceiptContext } from '../../../contexts/ReceiptContext';
-import { BrandContext, BrandContextIF } from '../../../contexts/BrandContext';
+// import { BrandContext, BrandContextIF } from '../../../contexts/BrandContext';
 import styles from './PageHeader.module.css';
 import { useBottomSheet } from '../../../contexts/BottomSheetContext';
 
@@ -46,7 +46,7 @@ const PageHeader = function () {
         setCrocEnv,
         chainData: { chainId, poolIndex: poolId },
     } = useContext(CrocEnvContext);
-    const { headerImage } = useContext<BrandContextIF>(BrandContext);
+    // const { headerImage } = useContext<BrandContextIF>(BrandContext);
 
     const {
         walletModal: { open: openWalletModal },
@@ -424,13 +424,14 @@ const PageHeader = function () {
                             appHeaderDropdown.setIsActive(false);
                         }
                     }}
+                    className={styles.left_side}
                 >
                     <Link
                         to='/'
                         className={styles.logoContainer}
                         aria-label='Home'
                     >
-                        {desktopScreen ? (
+                        {/* {desktopScreen ? (
                             <img src={headerImage} alt='ambient' />
                         ) : (
                             <img
@@ -439,10 +440,16 @@ const PageHeader = function () {
                                     alt='ambient'
                                     width='70px'
                             />
-                        )}
+                        )} */}
+                         <img
+                                className={styles.logoText}
+                                src={logo}
+                                    alt='ambient'
+                                    width='60px'
+                            />
                     </Link>
-                </div>
                 {routeDisplay}
+                </div>
                 <div className={styles.rightSide}>
                     {show ? (
                         <div className={styles.tradeNowDiv}>

From ffa03424f01da92d9598d803a04854f2e991a933 Mon Sep 17 00:00:00 2001
From: Ben Wolski <570819+benwolski@users.noreply.github.com>
Date: Mon, 11 Nov 2024 15:59:31 -0500
Subject: [PATCH 2/2] remove commented code

---
 src/App/components/PageHeader/PageHeader.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/App/components/PageHeader/PageHeader.tsx b/src/App/components/PageHeader/PageHeader.tsx
index 0c29a44911..e792e1ba00 100644
--- a/src/App/components/PageHeader/PageHeader.tsx
+++ b/src/App/components/PageHeader/PageHeader.tsx
@@ -452,16 +452,6 @@ const PageHeader = function () {
                         className={styles.logoContainer}
                         aria-label='Home'
                     >
-                        {/* {desktopScreen ? (
-                            <img src={headerImage} alt='ambient' />
-                        ) : (
-                            <img
-                                className={styles.logoText}
-                                src={logo}
-                                alt='ambient'
-                                width='70px'
-                            />
-                        )} */}
                         <img
                             className={styles.logoText}
                             src={logo}