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}
/>