Merge pull request #2691 from nymtech/2129-buy-2-secc

ui and copy changes

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 { CoinMark } from '@nymproject/react/coins/CoinMark';
 import { NymCard, ClientAddress } from '../../components';
 import { SignMessageModal } from './SignMessageModal';
 import { PoweredByBity } from 'src/svg-icons';
@@ -28,8 +29,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,
@@ -57,16 +57,18 @@ export const Tutorial = () => {
 
   return (
     <NymCard borderless title="Buy NYM with BTC without KYC" sx={{ mt: 4 }} Action={<ClientAddress withCopy />}>
-      <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',
@@ -77,9 +79,9 @@ 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}>
+              <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.
@@ -94,9 +96,9 @@ export const Tutorial = () => {
           title="Sign message"
           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}>
+              <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.
@@ -108,11 +110,10 @@ export const Tutorial = () => {
         <TutorialStep
           step={3}
           title="Send tx and receive NYM"
-          icon={<PaidIcon fontSize="small" />}
+          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 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>
           }
         />