Tour guide button

src/components/TourGuide/TourGuide.js

@@ -70,7 +70,6 @@ const TourGuide = ({ setIsTourOpen, isTourOpen, stepsByPage }) => {
       rounded={10}
       className={classes.helper}
       accentColor="#757575"
-      getCurrentStep={(curr) => console.log(`The current step is ${curr + 1}`)}
     />
   )
 }

src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js

@@ -10,7 +10,6 @@ import ImportExportIcon from '@material-ui/icons/ImportExport'
 import SwapHorizIcon from '@material-ui/icons/SwapHoriz'
 import IconButton from '@material-ui/core/IconButton'
 import LinearProgress from '@material-ui/core/LinearProgress'
-import HelpIcon from '@material-ui/icons/Help'
 import Link from '@material-ui/core/Link'
 
 import { ualConfig } from 'config'
@@ -31,7 +30,7 @@ const useStyles = makeStyles((theme) => {
     titleBox,
     message,
     loading,
-    helpIcon
+    helpText
   } = commonStyles(theme)
 
   return {
@@ -138,6 +137,7 @@ const useStyles = makeStyles((theme) => {
     btnExchange: {
       ...btnExchange,
       alignItems: 'center',
+      flexDirection: 'column',
       [theme.breakpoints.up('sm')]: {
         '& button': {
           width: 266
@@ -156,7 +156,7 @@ const useStyles = makeStyles((theme) => {
       color: theme.palette.primary.contrastText,
       textDecoration: 'none'
     },
-    helpIcon,
+    helpText,
     message,
     loading,
     rocketSvg
@@ -422,27 +422,38 @@ const ExchangeBackLayer = ({
           onChange={handleOnChange('youGive')}
           value={youGive}
           helperText={
-            <Typography
-              variant="body1"
-              className={clsx([classes.textInfo, classes.helperText])}
-            >
-              {pair && <span>{t('yourWallet')}: </span>}
-              {userBalance[youGive.selectValue] && (
-                <>
-                  <span>{userBalance[youGive.selectValue].userAsset} </span>
-                  <Link
-                    className={classes.poolContractLink}
-                    href={`${ualConfig.blockExplorerUrl}/account/${
-                      userBalance[youGive.selectValue].contract
-                    }`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    ({userBalance[youGive.selectValue].contract}){' '}
-                  </Link>
-                </>
+            <>
+              {pair && userBalance[youGive.selectValue] && (
+                <Typography
+                  variant="body1"
+                  className={clsx([classes.textInfo, classes.helperText])}
+                >
+                  <span>{t('pool')}: </span>
+                  {userBalance[youGive.selectValue].poolAsset}
+                </Typography>
               )}
-            </Typography>
+              <Typography
+                variant="body1"
+                className={clsx([classes.textInfo, classes.helperText])}
+              >
+                {pair && <span>{t('yourWallet')}: </span>}
+                {userBalance[youGive.selectValue] && (
+                  <>
+                    <span>{userBalance[youGive.selectValue].userAsset}</span>
+                    <Link
+                      className={classes.poolContractLink}
+                      href={`${ualConfig.blockExplorerUrl}/account/${
+                        userBalance[youGive.selectValue].contract
+                      }`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      ({userBalance[youGive.selectValue].contract}){' '}
+                    </Link>
+                  </>
+                )}
+              </Typography>
+            </>
           }
           useHelperTextAsNode
           hasError={
@@ -511,10 +522,13 @@ const ExchangeBackLayer = ({
         >
           {t('btnLabel').toLocaleUpperCase()}
         </Button>
-        <HelpIcon
-          className={classes.helpIcon}
+        <Typography
           onClick={() => setIsTourOpen(true)}
-        />
+          variant="body1"
+          className={classes.helpText}
+        >
+          HELP
+        </Typography>
       </Box>
       <TourGuide
         isTourOpen={isTourOpen}

src/routes/Evodex/BackLayer/Fee/FeeBackLayer.js

@@ -5,7 +5,6 @@ import { makeStyles } from '@material-ui/styles'
 import Box from '@material-ui/core/Box'
 import Typography from '@material-ui/core/Typography'
 import LinearProgress from '@material-ui/core/LinearProgress'
-import HelpIcon from '@material-ui/icons/Help'
 
 import { ualConfig } from 'config'
 import TourGuide from 'components/TourGuide'
@@ -24,7 +23,7 @@ const useStyles = makeStyles((theme) => {
     titleBox,
     message,
     loading,
-    helpIcon
+    helpText
   } = commonStyles(theme)
 
   return {
@@ -98,6 +97,7 @@ const useStyles = makeStyles((theme) => {
     btnExchange: {
       ...btnExchange,
       alignItems: 'center',
+      flexDirection: 'column',
       [`${theme.breakpoints.down('sm')} and (orientation: landscape)`]: {
         paddingTop: theme.spacing(1)
       },
@@ -132,7 +132,7 @@ const useStyles = makeStyles((theme) => {
         alignItems: 'center'
       }
     },
-    helpIcon,
+    helpText,
     message,
     loading,
     rocketSvg
@@ -273,10 +273,13 @@ const FeeBackLayer = ({
           >
             {t('inputLabel').toLocaleUpperCase()}
           </Button>
-          <HelpIcon
-            className={classes.helpIcon}
+          <Typography
             onClick={() => setIsTourOpen(true)}
-          />
+            variant="body1"
+            className={classes.helpText}
+          >
+            HELP
+          </Typography>
         </Box>
       </Box>
       <TourGuide

src/routes/Evodex/BackLayer/Liquidity/LiquidityBackLayer.js

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
+import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@material-ui/styles'
 import Box from '@material-ui/core/Box'
 import Typography from '@material-ui/core/Typography'
 import AddIcon from '@material-ui/icons/Add'
 import RemoveIcon from '@material-ui/icons/Remove'
-import HelpIcon from '@material-ui/icons/Help'
 import LinearProgress from '@material-ui/core/LinearProgress'
 import Link from '@material-ui/core/Link'
 
@@ -21,7 +21,7 @@ import { useExchange } from 'context/exchange.context'
 import { evolutiondex, commonStyles } from 'utils'
 
 const useStyles = makeStyles((theme) => {
-  const { inputBox, rocketSvg, message, loading, helpIcon } = commonStyles(
+  const { inputBox, rocketSvg, message, loading, helpText } = commonStyles(
     theme
   )
 
@@ -151,7 +151,10 @@ const useStyles = makeStyles((theme) => {
         minWidth: 800
       }
     },
-    helpIcon,
+    noPadding: {
+      padding: 0
+    },
+    helpText,
     message,
     rocketSvg
   }
@@ -337,9 +340,9 @@ const LiquidityBackLayer = ({
             label={t('inputLabel')}
             helperText={
               pair
-                ? `${t(
-                  'available'
-                )}: ${pair.balance ? pair.balance.toString() : 0}`
+                ? `${t('available')}: ${
+                    pair.balance ? pair.balance.toString() : 0
+                  }`
                 : ''
             }
             onChange={handleOnChange}
@@ -400,11 +403,15 @@ const LiquidityBackLayer = ({
           >
             {t('remove').toLocaleUpperCase()}
           </Button>
-
-          <HelpIcon
-            className={classes.helpIcon}
+        </Box>
+        <Box className={clsx(classes.btnExchange, classes.noPadding)}>
+          <Typography
             onClick={() => setIsTourOpen(true)}
-          />
+            variant="body1"
+            className={classes.helpText}
+          >
+            HELP
+          </Typography>
         </Box>
       </Box>
       <TourGuide

src/utils/commonStyles.js

@@ -6,17 +6,26 @@ export const commonStyles = (theme) => ({
       cursor: 'pointer'
     }
   },
+  helpText: {
+    fontSize: 14.1,
+    fontWeight: 600,
+    letterSpacing: 1.25,
+    lineHeight: 1.73,
+    color: 'rgba(255, 255, 255, 0.6)',
+    marginTop: theme.spacing(1)
+  },
   inputBox: {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
-    alignItems: 'center',
     marginTop: theme.spacing(1),
     padding: theme.spacing(2, 0),
     '& svg': {
       color: '#fff',
       fontSize: 30,
-      margin: theme.spacing(1, 0)
+      [theme.breakpoints.up('md')]: {
+        marginTop: -30
+      }
     }
   },
   rocketSvg: {
@@ -35,7 +44,7 @@ export const commonStyles = (theme) => ({
   btnExchange: {
     display: 'flex',
     justifyContent: 'center',
-    paddingTop: theme.spacing(4),
+    paddingTop: theme.spacing(3),
     '& button': {
       width: 162,
       height: 36