From 02135085794ff15fbf8bc39c0133135cd41382bb Mon Sep 17 00:00:00 2001 From: Abhishek <77395788+abhishek-01k@users.noreply.github.com> Date: Tue, 3 Oct 2023 17:43:33 +0530 Subject: [PATCH] Push snap qa fixes (#1261) * Snap UI fixes from QA-1 * fix: connected snap address detection * fix: snooze toggle * fix: address detection bug * fix: spacing in signature * update: route bug * Snap Dark mode fix and responsiveness added * Added dark mode to Snap QA --------- Co-authored-by: Arch0125 --- .../MetamaskSnap/SnapInformationModal.tsx | 4 +- src/config/Themization.js | 8 ++- .../receiveNotifs/MetamaskPushSnapModal.tsx | 2 +- src/modules/snap/AboutSnapModal.tsx | 12 ++-- src/modules/snap/SnapModule.tsx | 61 +++++++++++++++---- 5 files changed, 63 insertions(+), 24 deletions(-) diff --git a/src/components/MetamaskSnap/SnapInformationModal.tsx b/src/components/MetamaskSnap/SnapInformationModal.tsx index ad50e755e2..80cff0041b 100644 --- a/src/components/MetamaskSnap/SnapInformationModal.tsx +++ b/src/components/MetamaskSnap/SnapInformationModal.tsx @@ -58,7 +58,7 @@ const SnapInformationModal = () => { fontSize="22px" fontWeight="500" letterSpacing="-0.44px" - color={theme.modalMessageColor} + color={theme.snapPrimaryText} > Connect to Metamask Push Snap @@ -136,7 +136,7 @@ const PrimaryText = styled.p` font-size: 18px; font-weight: 500; align-self: baseline; - color:${(props)=>props.theme.modalMessageColor}; + color:${(props)=>props.theme.snapPrimaryText}; `; const SecondaryText = styled.p` diff --git a/src/config/Themization.js b/src/config/Themization.js index b4aa0f7d6d..ca54836545 100644 --- a/src/config/Themization.js +++ b/src/config/Themization.js @@ -263,9 +263,10 @@ const themeLight = { snapUIBackground:'#F9F9F9', snapButtonBackground:'#1E1E1E', - snapPrimaryText:'', + snapPrimaryText:'#000', snapSecondaryText:'#62626a', snapBackground:'#F2F2F2', + snapBorderColor:'#BAC4D6', }; @@ -538,9 +539,10 @@ const themeDark = { snapUIBackground:'transparent', snapButtonBackground:'#404650', - snapPrimaryText:'', - snapSecondaryText:'#787E99', + snapPrimaryText:'#fff', + snapSecondaryText:'#B6BCD6', snapBackground:'#404650', + snapBorderColor:'#787E99' }; diff --git a/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx b/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx index aadf61c932..2b4f044bb8 100644 --- a/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx +++ b/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx @@ -13,7 +13,7 @@ import InstallMetamaskSnapModal from 'components/MetamaskSnap/InstallMetamaskSna import SnapInformationModal from 'components/MetamaskSnap/SnapInformationModal'; import MetamaskSnapConfigureModal from 'components/MetamaskSnap/MetamaskSnapConfigureModal'; import { AppContext } from 'contexts/AppContext'; - +import GLOBALS, { device, globalsMargin } from "config/Globals"; const MetamaskPushSnapModal = ({ onClose diff --git a/src/modules/snap/AboutSnapModal.tsx b/src/modules/snap/AboutSnapModal.tsx index aa0ff4abf4..dd973ad8db 100644 --- a/src/modules/snap/AboutSnapModal.tsx +++ b/src/modules/snap/AboutSnapModal.tsx @@ -1,13 +1,15 @@ import React from 'react'; import { ReactComponent as Close } from 'assets/chat/group-chat/close.svg'; import { H2V2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; const AboutSnapModal = ({ onClose }) => { + const theme = useTheme(); + const InfoDetails = [ { title: 'Step 1', @@ -40,13 +42,13 @@ const AboutSnapModal = ({ - Installing Push Snap + Installing Push Snap {InfoDetails.map((detail) => ( - {detail.title} - {detail.info} + {detail.title} + {detail.info} ))} @@ -64,6 +66,6 @@ const Container = styled(ItemVV2)` width: 375px; padding: 32px 24px; border-radius: 16px; - background: #FFF; align-items: end; + background: ${(props) => props.theme.default.bg}; ` \ No newline at end of file diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx index 8c712b17bd..1318ab98c6 100644 --- a/src/modules/snap/SnapModule.tsx +++ b/src/modules/snap/SnapModule.tsx @@ -38,7 +38,7 @@ const SnapModule = () => { useEffect(() => { getInstalledSnaps(); getWalletAddresses(); - },[account,walletConnected]); + }, [account, walletConnected]); async function getInstalledSnaps() { const installedSnaps = await window.ethereum.request({ @@ -66,7 +66,7 @@ const SnapModule = () => { console.log(walletConnected); if (result.includes(account)) { setAddedAddress(true); - }else{ + } else { setAddedAddress(false); } } @@ -85,7 +85,6 @@ const SnapModule = () => { async function connectToMetaMask() { setLoading(true); - try { if (!snapInstalled) { await connectSnap(); @@ -141,6 +140,8 @@ const SnapModule = () => { showMetamaskPushSnap(); }; + const theme = useTheme(); + return ( { Push Snap @@ -179,7 +180,7 @@ const SnapModule = () => { powered by MetaMask @@ -191,14 +192,14 @@ const SnapModule = () => { Get started by opting in to channels on Push.{' '} Once you opt-in you will receive notifications on MetaMask. @@ -207,7 +208,7 @@ const SnapModule = () => { You’re about to install Push Snap which allows you to receive notifications from Push directly on MetaMask! @@ -247,7 +248,8 @@ const SnapModule = () => { )} {walletConnected || addedAddress ? ( - + + { Settings (window.location.href = '/channels')}>Get Started - + ) : ( { width={16} /> @@ -298,6 +300,17 @@ const Container = styled(Section)` padding: ${GLOBALS.ADJUSTMENTS.PADDING.BIG}; position: relative; margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.DESKTOP}; + @media ${device.laptop} { + margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.TABLET}; + padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}; + width: calc(100% - ${globalsMargin.MINI_MODULES.TABLET.RIGHT} - ${globalsMargin.MINI_MODULES.TABLET.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}); + } + + @media ${device.mobileL} { + margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.MOBILE}; + padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}; + width: calc(100% - ${globalsMargin.MINI_MODULES.MOBILE.RIGHT} - ${globalsMargin.MINI_MODULES.MOBILE.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}); + } `; const SubContainer = styled(Section)` @@ -306,8 +319,12 @@ const SubContainer = styled(Section)` padding: 48px 24px; border-radius: 32px; background: #fff; + background: ${(props) => props.theme.default.bg}; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05); margin: 24px auto; + @media ${device.mobileL} { + width: 330px; + } `; const SnapButton = styled(ButtonV2)` @@ -328,6 +345,10 @@ const SnapButton = styled(ButtonV2)` @media (max-width: 600px) { font-size: 14px; } + + + + `; const ConnectButton = styled(SnapButton)` @@ -335,6 +356,8 @@ const ConnectButton = styled(SnapButton)` padding: 16px 24px; background: #d53a94; border: 1px solid #d53a94; + + `; const SettingsButton = styled(SnapButton)` @@ -343,19 +366,31 @@ const SettingsButton = styled(SnapButton)` text-align: center; width: 135px; padding: 16px 24px; - border: 1px solid #bac4d6; + border: 1px solid ${(props)=>props.theme.snapBorderColor}; background: ${(props) => props.theme.default.bg}; gap: 4px; + + @media ${device.mobileL} { + min-width: 246px; + } `; const FilledButton = styled(SnapButton)` width: 135px; padding: 16px 24px; background: #d53a94; + + @media ${device.mobileL} { + min-width: 246px; + } `; const InfoDiv = styled(ItemHV2)` cursor: pointer; `; -const ButtonContainer = styled(ItemHV2)``; +const ButtonContainer = styled(ItemHV2)` +@media ${device.mobileL} { + flex-direction:column; +} +`;