Update Dp2p payment method section

mitra-deriv · mitra-deriv · commit 4ff80a2bb18e · 2022-01-11T15:00:42.000+03:30
diff --git a/src/pages/payment-methods/_mobile-expanded-list.js b/src/pages/payment-methods/_mobile-expanded-list.js
@@ -45,6 +45,8 @@ const StyledItemDiv = styled.div`
 `
 const StyledKeyDiv = styled.div`
     width: 50%;
+    display: flex;
+    justify-content: flex-end;
 
     @media ${device.mobileL} {
         max-width: 120px;
@@ -84,6 +86,9 @@ const StyledRefLink = styled(Flex)`
     @media ${device.mobileL} {
         justify-content: flex-start;
     }
+    @media ${device.tabletM} {
+        width: 65%;
+    }
 `
 
 const MobileExpandedList = ({ is_crypto, is_fiat_onramp, is_dp2p, locale, payment_data }) => {
@@ -236,8 +241,13 @@ const MobileExpandedList = ({ is_crypto, is_fiat_onramp, is_dp2p, locale, paymen
                     {/* reference row */}
                     <StyledRow jc="space-between" ai="center">
                         <StyledItemDiv>
-                            <Header type="subtitle-2">{localize('Reference')}</Header>
+                            {is_dp2p ? (
+                                <Header type="subtitle-2">{localize('More info')}</Header>
+                            ) : (
+                                <Header type="subtitle-2">{localize('Reference')}</Header>
+                            )}
                         </StyledItemDiv>
+
                         <StyledKeyDiv>
                             <>
                                 {payment_data.reference ? (
diff --git a/src/pages/payment-methods/_payment-data.js b/src/pages/payment-methods/_payment-data.js
@@ -61,7 +61,7 @@ const StyledIcon = styled.img`
 const StyledRefLink = styled(LocalizedLink)`
     font-size: 16px;
     line-height: 24px;
-    color: var(--color-blue-9);
+    color: var(--color-red);
 `
 /* commented for now unless there is an item that has no icon */
 // const NoIconText = styled.div`
@@ -849,12 +849,8 @@ const payment_data = [
                 deposit_time: <Localize translate_text="500 USD" />,
                 withdrawal_time: <Localize translate_text="Max 2 hours" />,
                 reference_link: (
-                    <StyledRefLink
-                        to="/help-centre/deriv-p2p/#what-is-deriv-p2p"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        Deriv P2P FAQ
+                    <StyledRefLink to="/p2p" target="_blank" rel="noopener noreferrer">
+                        Learn more about Deriv P2P
                     </StyledRefLink>
                 ),
                 name: 'DP2P',
diff --git a/src/pages/payment-methods/index.js b/src/pages/payment-methods/index.js
@@ -271,9 +271,15 @@ const DisplayAccordianItem = ({ pd, crypto_config, locale }) => {
                                     </Th>
                                 )}
 
-                                <Th>
-                                    <BoldText>{localize('Reference')}</BoldText>
-                                </Th>
+                                {pd.is_dp2p ? (
+                                    <Th>
+                                        <BoldText>{localize('More info')}</BoldText>
+                                    </Th>
+                                ) : (
+                                    <Th>
+                                        <BoldText>{localize('Reference')}</BoldText>
+                                    </Th>
+                                )}
                                 <Th />
                             </Tr>
                         </Thead>
diff --git a/src/themes/device.js b/src/themes/device.js
@@ -20,6 +20,7 @@ const device = {
     mobileS: `(max-width: ${size.mobileS}px)`,
     mobileM: `(max-width: ${size.mobileM}px)`,
     mobileL: `(max-width: ${size.mobileL}px)`,
+    tabletM: `(min-width: ${size.mobileL}px) and (max-width: ${size.tabletL}px) `,
     tabletS: `(max-width: ${size.tabletS}px)`,
     tablet: `(max-width: ${size.tablet}px)`,
     tabletL: `(max-width: ${size.tabletL}px)`,
