From 42c2264f50199a1433010e07098fa3898cc4314c Mon Sep 17 00:00:00 2001
From: Christian Laino <christianmlaino@gmail.com>
Date: Thu, 8 Jul 2021 11:15:53 -0300
Subject: [PATCH 1/2] deposit icp changes

---
 source/Popup/Views/Deposit/Steps/Step2.jsx |  7 +++++++
 source/Popup/Views/Deposit/styles.js       | 16 +++++++++++++++-
 source/locales/en/translation.json         |  8 ++++----
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/source/Popup/Views/Deposit/Steps/Step2.jsx b/source/Popup/Views/Deposit/Steps/Step2.jsx
index a027582d..28e4351b 100644
--- a/source/Popup/Views/Deposit/Steps/Step2.jsx
+++ b/source/Popup/Views/Deposit/Steps/Step2.jsx
@@ -9,6 +9,7 @@ import { Typography } from '@material-ui/core';
 import shortAddress from '@shared/utils/short-address';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import clsx from 'clsx';
 import useStyles from '../styles';
 import { currencyPropTypes } from '../../../../shared/constants/currencies';
 import { sourcePropTypes } from '../../../../shared/constants/sources';
@@ -58,6 +59,9 @@ const Step2 = ({ selectedSource, selectedAsset }) => {
               <InputBase>
                 <div className={classes.addressContainer}>
                   <Typography variant="h4" style={{ marginRight: 'auto' }}>{shortAddress(principalId)}</Typography>
+                  <div className={clsx(classes.badge, classes.principalBadge)}>
+                    {t('send.principalId')}
+                  </div>
                   <IconQrCode
                     onClick={() => setOpenQr(true)}
                     classes={classes}
@@ -93,6 +97,9 @@ const Step2 = ({ selectedSource, selectedAsset }) => {
               <InputBase>
                 <div className={classes.addressContainer}>
                   <Typography variant="h4" style={{ marginRight: 'auto' }}>{shortAddress(accountId)}</Typography>
+                  <div className={clsx(classes.badge, classes.accountBadge)}>
+                    {t('send.accountId')}
+                  </div>
                   <CopyButton text={accountId} placement="top" />
                 </div>
               </InputBase>
diff --git a/source/Popup/Views/Deposit/styles.js b/source/Popup/Views/Deposit/styles.js
index 8d1010b9..7627e778 100644
--- a/source/Popup/Views/Deposit/styles.js
+++ b/source/Popup/Views/Deposit/styles.js
@@ -33,7 +33,7 @@ export default makeStyles((theme) => ({
   iconQrCode: {
     width: 18,
     height: 18,
-    marginRight: 6,
+    marginRight: 12,
     color: '#367FF8',
   },
   orContainer: {
@@ -51,4 +51,18 @@ export default makeStyles((theme) => ({
     borderBottom: '1px solid #D1D5DB',
     flex: 1,
   },
+  badge: {
+    marginRight: 12,
+    borderRadius: 6,
+    width: 'fit-content',
+    padding: '2px 8px',
+  },
+  principalBadge: {
+    background: '#D7FFDC',
+    color: '#009612',
+  },
+  accountBadge: {
+    background: '#D3E1FF',
+    color: '#3574F4',
+  },
 }));
diff --git a/source/locales/en/translation.json b/source/locales/en/translation.json
index 0083e968..ac982e3d 100644
--- a/source/locales/en/translation.json
+++ b/source/locales/en/translation.json
@@ -121,10 +121,10 @@
     "runCommandTitle": "Run the following command",
     "runCommandSubtitle": "To deposit Cycles from a Cycles Wallet you need to run a DFX CLI command.",
     "runCommandButton": "Ok, I ran the command.",
-    "depositIcpTitle1": "1. Deposit Using Principal ID 😎",
-    "depositIcpSubtitle1": "Use when receiving from Plug accounts & users, or other apps that support sending directly to Principal ID's.",
-    "depositIcpTitle2": "2. Deposit Using Account ID 😑",
-    "depositIcpSubtitle2": "Use when receiving from exchanges or other apps that only support sending to Account ID’s.",
+    "depositIcpTitle1": "From another Plug Account",
+    "depositIcpSubtitle1": "Use when receiving from Plug accounts or other apps that support sending directly to Principal ID's",
+    "depositIcpTitle2": "From Exchange, DFX, or Account ID",
+    "depositIcpSubtitle2": "Use when receiving from exchanges or other apps that only support sending to Account ID's.",
     "scanQrCode": "Scan QR Code"
   },
   "swap": {

From 8287b0b81a82dea710b860c91ae5454285e79fd6 Mon Sep 17 00:00:00 2001
From: Christian Laino <christianmlaino@gmail.com>
Date: Thu, 8 Jul 2021 11:17:57 -0300
Subject: [PATCH 2/2] .

---
 source/locales/en/translation.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/locales/en/translation.json b/source/locales/en/translation.json
index ac982e3d..ecf0c34c 100644
--- a/source/locales/en/translation.json
+++ b/source/locales/en/translation.json
@@ -122,7 +122,7 @@
     "runCommandSubtitle": "To deposit Cycles from a Cycles Wallet you need to run a DFX CLI command.",
     "runCommandButton": "Ok, I ran the command.",
     "depositIcpTitle1": "From another Plug Account",
-    "depositIcpSubtitle1": "Use when receiving from Plug accounts or other apps that support sending directly to Principal ID's",
+    "depositIcpSubtitle1": "Use when receiving from Plug accounts or other apps that support sending directly to Principal ID's.",
     "depositIcpTitle2": "From Exchange, DFX, or Account ID",
     "depositIcpSubtitle2": "Use when receiving from exchanges or other apps that only support sending to Account ID's.",
     "scanQrCode": "Scan QR Code"