From 3563ad67b275d49c77a6f7a2ca373e8cb1b43084 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 14 Dec 2022 12:21:36 +0100
Subject: [PATCH 1/3] ui and copy changes

---
 nym-wallet/src/components/Buy/Tutorial.tsx | 29 +++++++++++-----------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/nym-wallet/src/components/Buy/Tutorial.tsx b/nym-wallet/src/components/Buy/Tutorial.tsx
index 5f14e2c444..8efd096d58 100644
--- a/nym-wallet/src/components/Buy/Tutorial.tsx
+++ b/nym-wallet/src/components/Buy/Tutorial.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Stack, Typography, Grid, useMediaQuery, useTheme } from '@mui/material';
-import { Tune as TuneIcon, BorderColor as BorderColorIcon, Paid as PaidIcon } from '@mui/icons-material';
+import { Tune as TuneIcon, BorderColor as BorderColorIcon } from '@mui/icons-material';
+import { CoinMark } from '@nymproject/react/coins/CoinMark';
 import { NymCard } from '../NymCard';
 import { SignMessageModal } from './SignMessageModal';
 
@@ -27,8 +28,7 @@ const TutorialStep = ({
   <Grid
     item
     md={4}
-    pb={2}
-    pr={1}
+    p={3}
     sx={{
       borderRight: borderRight ? `1px solid ${borderColor}` : null,
       borderBottom: borderBottom ? `1px solid ${borderColor}` : null,
@@ -56,16 +56,18 @@ export const Tutorial = () => {
 
   return (
     <NymCard borderless title="Buy NYM with BTC without KYC" sx={{ mt: 4 }}>
-      <Typography mb={2}>
+      <Typography mb={2} fontSize={14}>
         Follow below 3 steps to quickly and easily buy NYM tokens. You can purchase up to 1000 Swiss Francs per day
         without KYC.
       </Typography>
       {showSignModal && <SignMessageModal onClose={() => setShowSignModal(false)} />}
       <Grid
         container
-        spacing={2}
-        mb={3}
+        spacing={3}
+        m={0}
         mt={3}
+        width={1}
+        flexWrap="nowrap"
         sx={{
           border: `1px solid ${borderColor}`,
           borderRadius: '8px',
@@ -76,7 +78,7 @@ export const Tutorial = () => {
           title="Define purchase details"
           icon={<TuneIcon fontSize="small" />}
           text={
-            <Typography sx={{ color: (t) => t.palette.nym.text.muted }}>
+            <Typography fontSize={14} lineHeight="24px" sx={{ color: (t) => t.palette.nym.text.muted }}>
               Click on{' '}
               <Typography display="inline" fontWeight={600}>
                 Buy NYM
@@ -90,10 +92,10 @@ export const Tutorial = () => {
         />
         <TutorialStep
           step={2}
-          title="Sign message"
+          title="Sign a message with your Nym wallet"
           icon={<BorderColorIcon fontSize="small" />}
           text={
-            <Typography sx={{ color: (t) => t.palette.nym.text.muted }}>
+            <Typography fontSize={14} lineHeight="24px" sx={{ color: (t) => t.palette.nym.text.muted }}>
               When asked for signature, copy the message and sign it using{' '}
               <Typography display="inline" fontWeight={600}>
                 Sign message
@@ -106,12 +108,11 @@ export const Tutorial = () => {
         />
         <TutorialStep
           step={3}
-          title="Send tx and receive NYM"
-          icon={<PaidIcon fontSize="small" />}
+          title="Make BTC tx and receive NYM"
+          icon={<CoinMark width={20} height={20} />}
           text={
-            <Typography sx={{ color: (t) => t.palette.nym.text.muted }}>
-              {`Send the defined BTC amount to Bity's address that's given to you. As soon as your BTC transaction has 4
-              confirmations, Bity will send the purchased NYM tokens to your wallet.`}
+            <Typography fontSize={14} lineHeight="24px" sx={{ color: (t) => t.palette.nym.text.muted }}>
+              {`Send BTC to the given address. When the transaction is confirmed your purchased NYM tokens will be transferred in your wallet.`}
             </Typography>
           }
         />

From 677d8c7fce5c88f03dffd9787aebef289c0d98ca Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 14 Dec 2022 12:30:10 +0100
Subject: [PATCH 2/3] text size

---
 nym-wallet/src/components/Buy/Tutorial.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nym-wallet/src/components/Buy/Tutorial.tsx b/nym-wallet/src/components/Buy/Tutorial.tsx
index 8efd096d58..4369594801 100644
--- a/nym-wallet/src/components/Buy/Tutorial.tsx
+++ b/nym-wallet/src/components/Buy/Tutorial.tsx
@@ -80,7 +80,7 @@ export const Tutorial = () => {
           text={
             <Typography fontSize={14} lineHeight="24px" sx={{ color: (t) => t.palette.nym.text.muted }}>
               Click on{' '}
-              <Typography display="inline" fontWeight={600}>
+              <Typography display="inline" fontWeight={600} fontSize={14} lineHeight="24px">
                 Buy NYM
               </Typography>{' '}
               button and follow the steps in the browser window that opens. You will be asked for purchase details i.e.
@@ -97,7 +97,7 @@ export const Tutorial = () => {
           text={
             <Typography fontSize={14} lineHeight="24px" sx={{ color: (t) => t.palette.nym.text.muted }}>
               When asked for signature, copy the message and sign it using{' '}
-              <Typography display="inline" fontWeight={600}>
+              <Typography display="inline" fontWeight={600} fontSize={14} lineHeight="24px">
                 Sign message
               </Typography>{' '}
               button below. Then copy and paste your signature back in the browser window.

From 142a2bb26b72ee80408ee577e715bb3c89ec847c Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 14 Dec 2022 13:05:54 +0100
Subject: [PATCH 3/3] copy

---
 nym-wallet/src/components/Buy/Tutorial.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/nym-wallet/src/components/Buy/Tutorial.tsx b/nym-wallet/src/components/Buy/Tutorial.tsx
index 4369594801..9cb896211c 100644
--- a/nym-wallet/src/components/Buy/Tutorial.tsx
+++ b/nym-wallet/src/components/Buy/Tutorial.tsx
@@ -92,7 +92,7 @@ export const Tutorial = () => {
         />
         <TutorialStep
           step={2}
-          title="Sign a message with your Nym wallet"
+          title="Sign message"
           icon={<BorderColorIcon fontSize="small" />}
           text={
             <Typography fontSize={14} lineHeight="24px" sx={{ color: (t) => t.palette.nym.text.muted }}>
@@ -108,11 +108,11 @@ export const Tutorial = () => {
         />
         <TutorialStep
           step={3}
-          title="Make BTC tx and receive NYM"
+          title="Send tx and receive NYM"
           icon={<CoinMark width={20} height={20} />}
           text={
             <Typography fontSize={14} lineHeight="24px" sx={{ color: (t) => t.palette.nym.text.muted }}>
-              {`Send BTC to the given address. When the transaction is confirmed your purchased NYM tokens will be transferred in your wallet.`}
+              {`Send the defined BTC amount to Bity's address that's given to you. As soon as your BTC tx has 4 confirmations, Bity will send the purchased NYM tokens to your wallet.`}
             </Typography>
           }
         />
@@ -121,7 +121,7 @@ export const Tutorial = () => {
         <Button variant="outlined" size="large" onClick={() => setShowSignModal(true)}>
           Sign message
         </Button>
-        <Button variant="contained" size="large" href={EXCHANGE_URL} target="_blank">
+        <Button variant="contained" size="large" sx={{ width: '148px' }} href={EXCHANGE_URL} target="_blank">
           Buy NYM
         </Button>
       </Stack>