diff --git a/nym-wallet/src/components/Buy/Tutorial.tsx b/nym-wallet/src/components/Buy/Tutorial.tsx index f093719f88..a6bd95c557 100644 --- a/nym-wallet/src/components/Buy/Tutorial.tsx +++ b/nym-wallet/src/components/Buy/Tutorial.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Button, Stack, Typography, Grid } from '@mui/material'; +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 { NymCard } from '../NymCard'; import { SignMessageModal } from './SignMessageModal'; @@ -14,13 +14,17 @@ const TutorialStep = ({ title, text, icon, - divider, + borderRight, + borderBottom, + fixTitleHeight, }: { step: number; title: string; text: React.ReactNode; icon: React.ReactNode; - divider?: boolean; + borderRight?: boolean; + borderBottom?: boolean; + fixTitleHeight?: boolean; }) => ( @@ -38,7 +43,13 @@ const TutorialStep = ({ {`STEP ${step}`} - + {title} {text} @@ -48,6 +59,9 @@ const TutorialStep = ({ export const Tutorial = () => { const [showSignModal, setShowSignModal] = useState(false); + const theme = useTheme(); + const showBorder = useMediaQuery(theme.breakpoints.up('md')); + const fixTitleHeight = useMediaQuery(theme.breakpoints.down('lg')); return ( @@ -80,7 +94,9 @@ export const Tutorial = () => { amount, wallet address, etc. } - divider + borderRight={showBorder} + borderBottom={!showBorder} + fixTitleHeight={fixTitleHeight} /> { button below. Then copy and paste your signature back in the browser window. } - divider + borderRight={showBorder} + borderBottom={!showBorder} + fixTitleHeight={fixTitleHeight} /> { transferred in your wallet. } + fixTitleHeight={fixTitleHeight} />