Mobile view Header issue fixed (#1317)

* Mobile view Header issue fixed * Adjusted padding --------- Co-authored-by: Nilesh Gupta <[email protected]>
push-protocol · Nov 23, 2023 · 87594d0 · 87594d0
1 parent 49623ea
commit 87594d0
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 22 deletions.
diff --git a/src/segments/Feedbox.tsx b/src/segments/Feedbox.tsx
@@ -25,7 +25,7 @@ import {
 import DisplayNotice from "../primaries/DisplayNotice";
 import NotificationToast from "../primaries/NotificationToast";
 import { ScrollItem } from "./ViewChannels";
-import { useAccount } from "hooks";
+import { useAccount, useDeviceWidthCheck } from "hooks";
 import { ReactComponent as MetamaskLogo } from 'assets/PushSnaps/metamasksnap.svg';
 import { ReactComponent as Close } from 'assets/chat/group-chat/close.svg';
 import { ReactComponent as OpenLink } from 'assets/PushSnaps/GoToImage.svg'
@@ -344,6 +344,7 @@ const Feedbox = ({ showFilter, setShowFilter, search, setSearch }) => {
       }
     }
   };
+
   // Render
   return (
     <ThemeProvider theme={themes}>
@@ -364,16 +365,19 @@ const Feedbox = ({ showFilter, setShowFilter, search, setSearch }) => {
 
         <ScrollItem>
           {showSnapInfo && (
-            <SnapSection>
-              <MetamaskLogo />
-              <InstallText justifyContent='space-between'>
-                <SpanV2 fontSize='14px' fontWeight='400'>Get Notifications directly in MetaMask using Push Snap.</SpanV2>
-                <InstallPushSnap onClick={navigateToSnaps} >Install Push Snap <OpenLink /> </InstallPushSnap>
-              </InstallText>
-              <Close style={{ cursor: 'pointer' }} onClick={() => {
-                setShowSnapInfo(false);
-              }} width={12} height={12} />
-            </SnapSection>
+            <>
+              <SnapSection flexWrap='nowrap'>
+                <MetamaskLogo />
+                <InstallText  justifyContent='space-between'>
+                  <SpanV2 fontSize='14px' fontWeight='400'>Get Notifications directly in MetaMask using Push Snap.</SpanV2>
+                  <InstallPushSnap onClick={navigateToSnaps} >Install Push Snap <OpenLink /> </InstallPushSnap>
+                </InstallText>
+                <CloseButton onClick={() => {
+                  setShowSnapInfo(false);
+                }}/>
+              </SnapSection>
+
+            </>
           )}
 
           {((!run && !notifications.length) ||
@@ -532,19 +536,31 @@ const SnapSection = styled(ItemHV2)`
 
   @media ${device.tablet} {
     gap: 9px;  
+    margin-right:10px;
   }
 
-  @media ${device.mobileL} {
-    max-height:28px;  
+  @media (max-width:525px) {
+    max-height:50px;
   }
 `
 
 const InstallText = styled(ItemHV2)`
   @media ${device.tablet} {
     flex-direction:column;  
     align-items: baseline;
+    display: block;
+    align-self: auto;
   }
   
+`
+
+const CloseButton = styled(Close)`
+  cursor:pointer;
+  height:20px;
+  width:20px;
+  
+
+
 `
 
 const InstallPushSnap = styled(SpanV2)`

diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx
@@ -134,8 +134,23 @@ function Header({ isDarkMode, darkModeToggle }) {
   };
 
   const isMobile = useDeviceWidthCheck(600);
+  const showSnapMobile = useDeviceWidthCheck(600);
   const isSnapPage = location?.pathname === '/snap';
 
+  const SnapHeader = () => {
+    return (
+      <SnapSection>
+        <MetamaskLogo width={24} height={22} />
+        <InstallText>
+          <SpanV2 fontSize='12px' fontWeight='400'>Get Notifications directly in MetaMask</SpanV2>
+          <Link href='https://app.push.org/snap' target='_blank'>
+            Install Push Snap <OpenLink />
+          </Link>
+        </InstallText>
+      </SnapSection>
+    )
+  }
+
   return (
     <Container direction="row" padding="0px 15px">
       <ItemH justify="flex-start" flex="0">
@@ -155,10 +170,12 @@ function Header({ isDarkMode, darkModeToggle }) {
         {navigationSetup && showNavBar && isActive && !error && (
           <NavMenuContainer ref={navRef} tabletAlign="flex-start">
             <NavMenu>
+           {showSnapMobile && <SnapHeader/>}
               <ChainIndicator isDarkMode={isDarkMode} />
               <Profile isDarkMode={isDarkMode} />
 
               <NavMenuInner tabletAlign="flex-start">
+
                 <MobileNavigation showNavBar={showNavBar} setShowNavBar={setShowNavBar} />
               </NavMenuInner>
             </NavMenu>
@@ -180,15 +197,7 @@ function Header({ isDarkMode, darkModeToggle }) {
             </Span>
           </HeaderTag>
         )}
-        <SnapSection>
-          <MetamaskLogo width={24} height={22} />
-          <InstallText>
-            <SpanV2 fontSize='12px' fontWeight='400'>Get Notifications directly in MetaMask</SpanV2>
-            <Link href='https://app.push.org/snap' target='_blank'>
-              Install Push Snap <OpenLink />
-            </Link>
-          </InstallText>
-        </SnapSection>
+      {!showSnapMobile && <SnapHeader/>}
 
         {isActive && !showLoginControls && !error && (
           <DarkModeSwitch
@@ -368,11 +377,21 @@ const SnapSection = styled.div`
   padding: 12px 16px;
   align-items: center;
   gap: 9px;
+  @media (max-width:600px){
+    width:auto;
+    padding: 12px 14px;
+  }
 `;
 
 const InstallText = styled.div`
   display:flex;
   flex-direction:column;
+
+  @media (max-width:600px){
+    display:block;
+    width:auto;
+  }
+  
 `
 
 const Link = styled.a`
@@ -382,6 +401,11 @@ const Link = styled.a`
   color:#D53A94;
   text-align: start;
   text-decoration:none;
+  
+  @media (max-width:600px){
+    margin-left:5px;
+  }
+
    &:hover{
     text-decoration:underline;
     text-underline-position: under;