Mitra/ Update Dp2p payment method section (#2495)

mitra-deriv · web-flow · commit e2d2be4ee441 · 2022-01-19T15:48:42.000+06:00
* Update Dp2p payment method section

* Put the logic inside BoldText component
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,10 @@ 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 +242,11 @@ 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>
+                            <Header type="subtitle-2">
+                                {is_dp2p ? localize('More info') : 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
@@ -270,9 +270,10 @@ const DisplayAccordianItem = ({ pd, crypto_config, locale }) => {
                                         <BoldText>{localize('Processing time')}</BoldText>
                                     </Th>
                                 )}
-
                                 <Th>
-                                    <BoldText>{localize('Reference')}</BoldText>
+                                    <BoldText>
+                                        {pd.is_dp2p ? localize('More info') : localize('Reference')}
+                                    </BoldText>
                                 </Th>
                                 <Th />
                             </Tr>
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)`,
