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 <[email protected]>
push-protocol · Oct 3, 2023 · 0213508 · 0213508
1 parent eeeec67
commit 0213508
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 24 deletions.
diff --git 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
       </SpanV2>
@@ -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
@@ -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
@@ -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
@@ -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 = ({
             <ItemVV2 gap='24px'>
 
                 <ItemVV2>
-                    <H2V2 fontSize='22px' fontWeight='500' letterSpacing='-0.44px'>Installing Push Snap</H2V2>
+                    <H2V2 fontSize='22px' fontWeight='500' letterSpacing='-0.44px' color={theme.snapPrimaryText}>Installing Push Snap</H2V2>
                 </ItemVV2>
 
                 {InfoDetails.map((detail) => (
                     <ItemVV2 alignItems='baseline'>
-                        <H2V2 fontSize='18px' fontWeight='500' >{detail.title}</H2V2>
-                        <SpanV2 textAlign='left' fontSize='16px' fontWeight='400' color='#62626A'>{detail.info}</SpanV2>
+                        <H2V2 fontSize='18px' fontWeight='500' color={theme.snapPrimaryText}>{detail.title}</H2V2>
+                        <SpanV2 textAlign='left' fontSize='16px' fontWeight='400'  color={theme.snapSecondaryText}>{detail.info}</SpanV2>
                     </ItemVV2>
                 ))}
 
@@ -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};
 `
diff --git 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 (
     <Container>
       <AboutPushSnapModalComponent
@@ -171,15 +172,15 @@ const SnapModule = () => {
               <H2V2
                 fontSize="34px"
                 fontWeight="500"
-                color="#1E1E1E"
+                color={theme.snapPrimaryText}
                 letterSpacing="-1.02px"
               >
                 Push Snap
               </H2V2>
               <SpanV2
                 fontSize="12px"
                 fontWeight="400"
-                color="#657795"
+                color={theme.modalIconColor}
               >
                 powered by MetaMask
               </SpanV2>
@@ -191,14 +192,14 @@ const SnapModule = () => {
                   <SpanV2
                     fontSize="14px"
                     fontWeight="400"
-                    color="#000"
+                    color={theme.snapSecondaryText}
                   >
                     Get started by opting in to channels on Push.{' '}
                   </SpanV2>
                   <SpanV2
                     fontSize="14px"
                     fontWeight="400"
-                    color="#000"
+                    color={theme.snapSecondaryText}
                   >
                     Once you opt-in you will receive notifications on MetaMask.
                   </SpanV2>
@@ -207,7 +208,7 @@ const SnapModule = () => {
                 <SpanV2
                   fontSize="14px"
                   fontWeight="400"
-                  color="#000"
+                  color={theme.snapSecondaryText}
                 >
                   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 ? (
-            <ItemHV2 gap="12px">
+            <ButtonContainer gap="12px" >
+
               <SettingsButton onClick={handleSettingsClick}>
                 <Gear
                   height="20px"
@@ -256,7 +258,7 @@ const SnapModule = () => {
                 Settings
               </SettingsButton>
               <FilledButton onClick={() => (window.location.href = '/channels')}>Get Started</FilledButton>
-            </ItemHV2>
+            </ButtonContainer>
           ) : (
             <InfoDiv
               gap="7px"
@@ -267,7 +269,7 @@ const SnapModule = () => {
                 width={16}
               />
               <SpanV2
-                color="#657795"
+                color={theme.modalIconColor}
                 fontSize="14px"
                 fontWeight="400"
               >
@@ -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,13 +345,19 @@ const SnapButton = styled(ButtonV2)`
   @media (max-width: 600px) {
     font-size: 14px;
   }
+
+  
+
+
 `;
 
 const ConnectButton = styled(SnapButton)`
   min-width: 230px;
   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;
+}
+`;