diff --git a/src/segments/Feedbox.tsx b/src/segments/Feedbox.tsx index 20a58f5ed4..a990718a37 100644 --- 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 ( @@ -364,16 +365,19 @@ const Feedbox = ({ showFilter, setShowFilter, search, setSearch }) => { {showSnapInfo && ( - - - - Get Notifications directly in MetaMask using Push Snap. - Install Push Snap - - { - setShowSnapInfo(false); - }} width={12} height={12} /> - + <> + + + + Get Notifications directly in MetaMask using Push Snap. + Install Push Snap + + { + setShowSnapInfo(false); + }}/> + + + )} {((!run && !notifications.length) || @@ -532,10 +536,11 @@ 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; } ` @@ -543,8 +548,19 @@ 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 index cbc65775c6..a8f80384ca 100644 --- 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 ( + + + + Get Notifications directly in MetaMask + + Install Push Snap + + + + ) + } + return ( @@ -155,10 +170,12 @@ function Header({ isDarkMode, darkModeToggle }) { {navigationSetup && showNavBar && isActive && !error && ( + {showSnapMobile && } + @@ -180,15 +197,7 @@ function Header({ isDarkMode, darkModeToggle }) { )} - - - - Get Notifications directly in MetaMask - - Install Push Snap - - - + {!showSnapMobile && } {isActive && !showLoginControls && !error && (